Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Custom header height in Triton Lite

  1. lovefurall
    Member

    Hey all. I'm looking to possibly switch over to the Triton Lite theme. I've copied my blog over and used the new theme with a test blog. I am trying to to change the height of the header image in CSS and haven't had any luck so far. I am only seeing an option for changing the width. I already have the new image header I want to use (960 x 115) uploaded to my image gallery and ready to link to, but I have no idea where to add/change this in my css header info. Any help would be greatly appreciated!

    Thanks!!

    The blog I need help with is lovefurall.com.

  2. designsimply
    Staff

    There is more than one way to change out the header image for the Triton Lite theme.

    If you have already uploaded a header image on the Appearance → Header page in Triton Lite, you can use this CSS to replace it:

    #header-image {
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
width: 920px;
height: 116px;
}

    If you don't have a header image setup on the Appearance → Header page, add this CSS to add a background image above the site title and tagline. Adjust the padding top value to add more space:

    #logo {
display: block;
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
padding-top: 116px;
}

    To replace the site title with a custom header image, try the following CSS. This one will also make it so the header image is linked back to the home page:

    #logo h1 a {
display: block;
background: url('http://lovefurall.files.wordpress.com/2012/03/lfa.jpg') no-repeat;
width: 920px;
height: 116px;
text-indent: -9999px;
}

  3. lovefurall
    Member

    Thank you, thank you!! Now I'm trying to move the nav bar down below the header. Basically I want the top of my blog to look like the Fresh & Clean theme (nav bar, header) while the rest of the site is pure Trinton Lite. Any suggestions on how to accomplish this?

  4. designsimply
    Staff

    Now I'm trying to move the nav bar down below the header. Basically I want the top of my blog to look like the Fresh & Clean theme (nav bar, header) while the rest of the site is pure Trinton Lite. Any suggestions on how to accomplish this?

    You can actually copy the "Navigation Menu" section from the Fresh and Clean original stylesheet into your Triton Lite theme and add a few adjustments. Here is an example:

    #access {
background:#efefef;
border:1px solid #ccc;
border-width:1px 0;
margin:0 auto 1.8em;
padding-left:.9em;
z-index:99;
position:absolute;
width:960px;
top:290px;
}

#access ul {
list-style:none;
margin:0;
padding-left:0;
}

#access li {
float:left;
position:relative;
}

#access li li {
min-width:11em;
width:100%;
}

#access a {
color:#666;
display:block;
font-size:.813em;
line-height:1.75em;
padding:.6em 1em;
text-decoration:none;
text-transform:uppercase;
}

#access a:hover {
background:#e6e6e6;
color:#0099ff;
-webkit-transition:background .2s linear;
-moz-transition:background .2s linear;
-o-transition:background .2s linear;
}

#access ul ul {
box-shadow:0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
display:none;
float:left;
position:absolute;
top:2.3em;
left:0;
z-index:99999;
}

#access ul ul ul {
left:100%;
top:0;
}

#access ul ul a {
background:#e6e6e6;
color:#666;
line-height:2.1em;
padding:.5em .5em .5em 1em;
height:auto;
}

#access li:hover > a,#access ul ul :hover > a {
background:#e6e6e6;
color:#0099ff;
}

#access ul ul a:hover {
background:#e6e6e6;
color:#0099ff;
}

#access ul li:hover > ul {
display:block;
}

#access .current_page_ancestor > a,#access .current_page_item > a,#access .current_page_parent > a,#access .current-menu-ancestor > a,#access .current-menu-item > a,#access .current-menu-parent > a {
color:#0099ff;
}

#access .current_page_ancestor > a:hover,#access .current_page_item > a:hover,#access .current_page_parent > a:hover,#access .current-menu-ancestor > a:hover,#access .current-menu-item > a:hover,#access .current-menu-parent > a:hover {
background:#e6e6e6;
color:#0099ff;
}

#access ul ul a {
border-bottom:none;
}

    The adjustments I made were to set the width for "#access" to 960px, add absolute positioning, set a top value to control where it appears, and remove the bottom border for "#access ul ul a" at the end.

    You can also adjust the "top" value in "#access" to control how far down the menu appears on the page.

  5. lovefurall
    Member

    Thanks a ton, you rock!!

  6. lovefurall
    Member

    So I have messed around a bit using this and think I like the Triton nav bar better. I am trying to move it down below the header image...but I'm not having any luck. What do I do to move the nav bar down? I tried adjusting the "top" position, but it seemed to do nothing. Argh.

  7. designsimply
    Staff

    To move the Triton Lite nav bar from the top to below the site title and tagline as seen on the Triton Lite demo site, you would add this CSS:

    body {
position: relative;
}

#logo{
margin-bottom: 34px;
}

#masthead {
display: block;
position: absolute;
top: 94px;
height: 34px;
}

    To adjust for whatever height your header is, change the "top" value until you find the right location in your setup.

    Note that this CSS example was tested with the demo site, if your site is using different custom CSS, then you may need to make some additional adjustments. If you' d like more precise help than that, please make sure to include a link to the blog you're currently working on.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags