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

  • Author
    Posts
  • #793045

    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.

    #793285

    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.

    #793286

    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.

    #793364

    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?

    #793365

    stormcakes
    Member

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

    #793366

    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.

    #793367

    stormcakes
    Member

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


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

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

    #793368

    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 :)

    #793369

    This should fix the header/nav.

    #header {
    height: 275px;
    margin-top: 30px;
    position: relative;
    }
    
    #nav {
    bottom: 0;
    position: absolute;
    }
    #793370

    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.

    #793371

    stormcakes
    Member
    #793372

    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;
    }
    #793373

    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.

    #793374

    Give this a try and see what it gets you.

    #nav a {
    margin-bottom: -7px;
    }
    
    .menu {
    text-align: center;
    }
    
    #nav ul {
    display: inline-block;
    }
    #793380

    stormcakes
    Member

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

    #793381

    You are welcome.

The topic ‘What was the CSS they added to the theme to do this?’ is closed to new replies.