Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17878

    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.

    #97325

    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

    #97326

    Thank you for your reply.

    Got any tips on how it is done?

    #97327

    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!

    #97328

    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

    #97329

    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;

    }

    #97330

    So, back to the drawing board….

    #97331

    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;

    }

    #97332

    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

    #97333

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

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Move the logo to the right hand side’ is closed to new replies.