Move the logo to the right hand side « Support Forum | Kriesi.at

Support Forum » Sentence

Move the logo to the right hand side

10 posts from 3 voices

Started 7 months ago by webtigerwebsites
Latest reply from webtigerwebsites
This topic is closed
This topic is not a support question

Tags:

No tags yet.

webtigerwebsites
Member

Hi,
May you please let me know if it is possible and if so, how to do the following:
Thank you kindly in advance.

My site is set up with the main content on the left and the menu on the right.
The logo is above the main content.
The menu on the right hand side has a big gap above it.
I would like to put the logo above the right hand side menu in that big gap.
I would like to move the blog posts/content up towards the top of the page so that there isn't a big gap.
Does that make sense?
Thank you kindly.

Posted 7 months ago #
Devin
Moderator

Hi webtigerwebsites,

Unfortunately it would require quite a bit of modification in order to do that and then to keep the theme responsive. You'll need to look into a freelance web developer to make that customization for you so that it doesn't effect browser compatibility and the responsive elements of the theme.

Regards,

Devin

Posted 7 months ago #
webtigerwebsites
Member

Thank you for your reply.
Got any tips on how it is done?

Posted 7 months ago #
Kiwy
Member

Hi there,

some tips, install firebug(for FF) Chrome has a standard debug(press F12) so you can lookup which div or span it is using.
-move up the section that contains the blog/items post.
Expand the viewing area, set up bounderies relative to the postion to keep the text/blog/items inside your area.

This can also be done with the logo and the rest, if you can find the tags;)

Good luck!

Posted 7 months ago #
Devin
Moderator

Hey webtigerwebsites,

For Sentence, it would be a significant change in both the css and the php files of the theme. You'll be moving the logo from the header.php to the sidebar.php and then re-doing many of the media queries for each screen size (large, normal, tablet, mobile widescreen and mobile portrait).

Regards,

Devin

Posted 7 months ago #
webtigerwebsites
Member

Well I managed to do it with just CSS, And it works well for most screen sizes except for two tablet sizes..

/**get logo over to the right**/
div#header.seven {
padding-bottom:46px !important;
}

#sidebar_bg {
background-image:url("http://thelogourl.png") !important;
background-position:right top !important;
background-repeat:no-repeat !important;
height:100%;
position:absolute;
right:-40px;
top:0;
width:800px;
z-index:1;
}

.logo, .logo a {
display:none !important;
float:left;
margin:0;
padding:0;
position:relative;
}

div#header.seven {
padding-bottom:45px !important;
padding-left:0 !important;
padding-top:0 !important;
}

#secondary {
margin-top:214px !important;
padding:0 0 0 40px;
}

#secondary {
margin-top:214px !important;
padding:0 0 0 40px;
}

Posted 7 months ago #
webtigerwebsites
Member

So, back to the drawing board....

Posted 7 months ago #
webtigerwebsites
Member

This is my latest attempt.. GETTING CLOSER>...

#secondary {
background-image:url("http:thelogo.png") !important;
padding:15px 0 0 35px !important;
background-repeat: no-repeat !important;
}

.sidebar {
display:block;
margin-bottom:40px !important;
margin-top:233px !important;
position:relative;
width:240px !important;
}

.logo, .logo a {
display:none !important;
float:left;
margin:0;
padding:0;
position:relative;
}

Posted 7 months ago #

Devin
Moderator

As an additional bit of help, you can use this a starting point for modifying your changes based on screen size:

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) { }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) { }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) { }

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) { }

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) { }

Add it to your custom.css and use the queries to adjust your fixes for the various screen sizes.

Regards,

Devin

Posted 7 months ago #

webtigerwebsites
Member

Oh right, ok. Thanks. I will give it a go!

Posted 7 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Move the logo to the right hand side

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…