Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

What was the CSS they added to the theme to do this?

  1. stormcakes
    Member

    I love the way they edited Bueno on this blog: http://fucknfilthy.com/page/2/
    and want to have a similar design with a main header, no title and the menu floating below the image but want to do it to the theme: Pink Touch 2.

    And have a side panel for widgets like on the reference I provided.

    Is there any way to do this? Usually I'm great with code but the WordPress way of coding is really confusing me. Things I try and edit don't seem to work.

    Help please ^-^

    The blog I need help with is badweatherandrobots.wordpress.com.

  2. thesacredpath
    Member

    Sorry, that site has way too many images and posts on the main page. I waited for three minutes on my wireless internet service and it still wasn't close to finished loading so I cancelled out.

    From the little bit I can see though, there isn't anything unique done with that site.

    Pink Touch 2 has a custom header option, use that and upload and insert your image. Then the only thing is moving the navigation down below the header image. That can't be done though until you actually have some navigation and have inserted the header image.

  3. thesacredpath
    Member

    For the sidebar since the theme does not have one, the bottom sidebar has to be moved up and into that area. Sometimes this is straight forward and sometimes not. There are three widget areas in the footer. One of them would have to be moved up leaving only two at the bottom. Those would have to be adjusted so that the two of them took up the entire width. Sometimes that can look weird if the content does not fill the full width of the sidebar areas.

  4. stormcakes
    Member

    How do I move the navigation menu below the header image and how do I put borders around my posts like in the example I gave?

  5. stormcakes
    Member

    I'm now using the Pilcrow theme as it comes with a sidebar.

  6. thesacredpath
    Member

    Why not just use the theme they are using, Bueno?

    I noticed you have pasted the entire stylesheet into the CSS edit window. At wordpress.COM, that can cause issues for you down the road. It is best to add only the specific selectors and only the specific declarations that you are adding or changing to the CSS edit window. Right now the entire original CSS is loading and then it is loading your custom CSS which is nearly identical and then the browser has to sort through all that to determine what to use and what not to use. Sometimes they don't do such a good job.

    This does the borders and redoes margins and padding as needed. If you keep all the CSS in the CSS edit window, put this clear at the very bottom of your CSS.

    .two-column #content {
width: 69.99%;
}

.post {
border: 6px solid #67FB1B;
margin-bottom: 50px;
padding: 10px;
}

.two-column #sidebar, .two-column #secondary-sidebar {
width: 27.806%;
}

    I'll work on the header thing shortly.

  7. stormcakes
    Member

    Oh and I also want my header to be 306pc high but still 770px wide.
    Ive tried adding

    <br /> #header-image {<br /> background: url("http://img.photobucket.com/albums/v467/Mrots/badweatherheader.jpg") no-repeat scroll top center transparent;<br /> height: 306px;<br /> width: 770px;<br /> }<br />

    But it doesn't seem to do anything at all.

  8. stormcakes
    Member

    Ah thank you! The border works perfectly.

    I would use Bueno but I really like the Pilcrow Navigation style.
    And I can't seem to get rid of the darn black bottom border around the header image.

    I'll go through and get rid of the whole style sheet and put in new css for the changes I made shortly.

    Thanks again :)

  9. thesacredpath
    Member

    This should fix the header/nav.

    #header {
height: 275px;
margin-top: 30px;
position: relative;
}

#nav {
bottom: 0;
position: absolute;
}

  10. thesacredpath
    Member

    For the header image, do not use the header image uploader. Upload the image to the media library, get the URL and post it here and then I'll give you the code for adding it directly to the CSS so that we can get the taller header image and then I'll have to adjust the nav and such to fit with that size image.

  11. stormcakes
    Member

    Perfect!

    Ok the image is:
    http://badweatherandrobots.files.wordpress.com/2012/01/badweatherheader5.jpg

  12. thesacredpath
    Member

    OK, add this to your CSS. I had to set a "width" for the main container which before would shrink in width if a browser window was narrowed, but adding the image this way means it will not adjust in size with the width of the browser window and will look funny if a browser window is narrower than the header image.

    .two-column #container {
width: 770px;
}

#header img {
display: none;
}

    Change out the #header stuff I have previously with this.

    #header {
background: url("http://badweatherandrobots.files.wordpress.com/2012/01/badweatherheader5.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-top: 30px;
position: relative;
}

  13. stormcakes
    Member

    Oh my gosh you are amazing!
    Thanks so much.
    Just one more thing (forgive me! :P) I want to centralize the menu instead of it being left.

    I tried some code but nothing is happening.

  14. thesacredpath
    Member

    Give this a try and see what it gets you.

    #nav a {
margin-bottom: -7px;
}

.menu {
text-align: center;
}

#nav ul {
display: inline-block;
}

  15. stormcakes
    Member

    That worked. Thanks so much for your help!!!

  16. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags