Home / Forums / DynamiX Support / Full Width Logo above Tabs

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts

  • Hendry
    Participant

    Hi Andy,

     

    Could you help out on how to place a full width logo above tabs on our website http://www.thepeoplestudio.sg? I’ve tried working on it but could work out how to shift things in place as all tabs have a hover that is too long to nicely align.

     

    Kindly advice and thanks in advance.

     

    Cheers,

    Hendry

    Andy
    Andy
    Keymaster

    Hi Hendry,

     

    You could build the logo into the background using the Custom + skin?


    John Skehill
    Participant

    I am also trying to figure this out…I managed to move the site down to make room for the logo above the  by adding a margin-top:@@px to the header css but I cannot figure out how to move the logo out of the header into the space above. It appears to be locked to only be within the header. Andy, could you shed some light on this please? I would love to be able to move the logo so it is above the menu/header.

     

    Thanks

    John

    Andy
    Andy
    Keymaster

    Hi John,

     

    You can control the positioning of the logo by using CSS e.g.

     

    #header-logo {margin-top:150px !important;}

     

    Does that help?


    John Skehill
    Participant

    I added a margin to the header to make room above the header for the logo and added the code you suggested but changed the value to 0px so that it would be at the top of the page, however, the logo is still fixed to the header area and will not move into the space I have made above it. Please find CSS below for the header.

     

    /** Header *********************************/
    .header-wrap,.header-wrap-img {position:absolute;width:100%;height:135px;left:0;top:0;}
    #wrapper.gallery .header-wrap,#wrapper.gallery .header-wrap-img {height:285px;}

    #header {
    z-index:998; /* Feel the IE LOVE */
    position:relative;
    width:948px;
    margin-top:200px;
    }

    #header.pages { height:150px !important;}
    #header.gallery {height:120px !important;}
    #header.gallery3d {height:80px !important;}
    #header-logo {margin-top:0px !important;}
    #header-logo {margin-left:0px !important;}

    #header-logo {
    margin-top:0px;
    min-width:220px;
    position:absolute;
    z-index:1;
    }

    #header-logo h1, #header-logo .description h2 { margin:0;padding:0;}
    #header-logo h1 {font-size:30px;line-height:34px;}
    #header-logo .description h2 {font-size:12px;}
    #header-logo h1 a { color:#333;}
    #header-logo .description { position:absolute;margin-top:33px;}
    #sub-header {
    width:100%;
    position:relative;
    z-index:0;
    margin-top:-6px;
    }
    /** / Header *********************************/

     

    If you could highlight where I am going wrong, that would be great.

     

    Your help is greatly appreciated. 🙂

     

    Thanks

     

    John

    Andy
    Andy
    Keymaster

    Hi John,

     

    I don’t see those changes made on your site – are they live or have you removed the settings you’ve made?


    John Skehill
    Participant

    I removed the settings because I couldn’t figure it out and it looked strange. lol I was hoping that when I set the #header-logo {margin-top:0px !important;} it would take the ‘top’ as the top of the site, rather than the top of the header. Do you need me to put the settings back how I had them or can you understand what I am describing?

     

    Thanks

     

    John

    Andy
    Andy
    Keymaster

    Yes I would need to see the changes live to see why it’s being ignored, thanks.


    John Skehill
    Participant

    Hi Andy,

    I have added the image back on to the site. As you will be able to see it appears to be locked to the header. Any help would be great. Thanks

     

    John

    Andy
    Andy
    Keymaster

    Hi John,

     

    I’ve checked the site and I definitely do not see any CSS changes – where are you making them in the style.css or Skin Settings -> Add Custom CSS.


    John Skehill
    Participant

    Hi Andy,

     

    I made the changes in the style.css. For some reason the image that I added as the branding was not showing up. It should be now. You should hopefully see that the image I have inserted appears to be locked to the header area. The css that I have edited is below in bold…

     

    /** Header *********************************/
    .header-wrap,.header-wrap-img {position:absolute;width:100%;height:135px;left:0;top:0;}
    #wrapper.gallery .header-wrap,#wrapper.gallery .header-wrap-img {height:285px;}

    #header {
    z-index:998; /* Feel the IE LOVE */
    position:relative;
    width:948px;
    margin-top:200px;
    }

    #header.pages { height:150px !important;}
    #header.gallery {height:120px !important;}
    #header.gallery3d {height:80px !important;}
    #header-logo {margin-top:0px !important;}
    #header-logo {margin-left:0px !important;}

     

    #header-logo {
    margin-top:0px;
    min-width:220px;
    position:absolute;
    z-index:1;
    }

    #header-logo h1, #header-logo .description h2 { margin:0;padding:0;}
    #header-logo h1 {font-size:30px;line-height:34px;}
    #header-logo .description h2 {font-size:12px;}
    #header-logo h1 a { color:#333;}
    #header-logo .description { position:absolute;margin-top:33px;}
    #sub-header {
    width:100%;
    position:relative;
    z-index:0;
    margin-top:-6px;
    }
    /** / Header *********************************/

     

    By editing this, I have made space above the header for where I want the image to go.

    I was hoping this….

    #header-logo {margin-top:0px !important;}
    #header-logo {margin-left:0px !important;}

     

    would tell the image to jump to the very top left of the site, leaving me to just deal with resizing the image to make it fit nicely.

     

    I hope this makes sense and you can shed some light on where I am going wrong. Thank you so much for your help.

     

    John


    John Skehill
    Participant

    Would any of this be easier in Tersus? Seems like there is more customisation on  your other theme? Which would you recommend using?

    Andy
    Andy
    Keymaster

    Hi John,

     

    The issue seems that whatever file you’re editing isn’t the live version – I can’t see the changes in the file: See

     

    http://www.thepeoplestudio.sg/wp-content/themes/DynamiX/style.css

     

    Tried adding it to Skin Settings -> Add Custom CSS

     

    #header-logo {margin-top: 0 !Important;}

     

    Tersus is more powerful and there are more options available, but this should work.

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

You must be logged in to reply to this topic.