Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Custom CSS, Clean Home theme

  1. kerrymurrayphotography
    Member

    I have not bought the css upgrade but am considering doing so... I've spent the better part of the last few days reading all things CSS related and (i think) im starting to get the idea. I thought i'd pick a few experienced brains before taking the leap though.

    What I would like to do it start with the Clean Home theme and

    1: Widen the header
    2: Remove the side bar so its a single column blog
    3: duplicate the header widget area and put it at the bottom (so there would be widget area at the top AND in the footer)

    I'm pretty sure that point one and 2 are achievable, based on what i've been reading so far, but what about no 3? Is it possible?

    As far as i'm understanding, what works on one theme isnt necessarily going to work on another, since the underlying html could differ. My overall aim is to create a photoblog with a wide single column, (900px aprox) a decent sized header image and a header and footer widget area. If not Clean Home, then is this possible on any other themes? I picked Clean Home because its the only theme with the header widget area i've found so far, but it could be any theme really.

    I know I'm a newby with the css, but im a quick learner and pretty one track minded, so i would really appreciate if anyone has any advice? Thanks!

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

  2. panaghiotisadam
    Member

    I don't know if 3 is possible, but I guess customizing a theme that already has bottom widget areas will be easier. So, in case you'll need this: the only theme with bottom and header widget areas is Motion.

  3. kerrymurrayphotography
    Member

    thanks panos, i will check it out.

  4. hallluke
    Member

    If a theme gives you two independent widget areas then it should be possible for you to reposition them to above and below your content at least to some extent. This is made easier if the widget areas have fixed (or at least known) heights and are at the same level in the HTML tag structure as the main content. Can you post a link to the site you're talking about using Clean Home so I can take a look?

  5. kerrymurrayphotography
    Member

    http://kerryandluis.wordpress.com/

    Hi Halluke, thanks for your help. This is just my test blog, the post that is on there i have imported from another blog just to mess around with. I uploaded the photos large, slightly more than 1000px but without the sidebar i would like them to be around 900px, give or take.

    So if i understand correctly, your saying that the sidebar widget area could be re-positioned to the footer? that would be awesome.

    thanks again!

  6. hallluke
    Member

    This should pretty much do it:

    .content {width:900px;}
#sidebar {float:left; width:900px;}
#sidebar .block {width:25%; float:left;}

  7. kerrymurrayphotography
    Member

    Wow! thats excellent, works beautifully! my first born child is yours. you make it look so easy... thank you so much.

    i copied some other code in to try and make my header image taller, instead of 900x200 im trying to make it 900x400, but obviously didnt get it right. i feel embarrassed to be asking you for more help, thanks so much for all you've done already!

  8. thesacredpath
    Member

    Are you talking about on http://kerrymurrayphotography.wordpress.com/ which is using twenty ten or are you talking about http://kerryandluis.wordpress.com/ ?

  9. thesacredpath
    Member

    Assuming you are talking about the site using twenty ten, the following will do it.

    #branding {
background: url("place URL of new image here") no-repeat scroll 0 0 transparent;
height: 400px;
width: 940px;
}

    Put the above into your CSS, upload your new header image to the media library, get the URL of that image and put it into the background declaration. Then go to appearance > header and do the "remove header image" thing and save.

  10. kerrymurrayphotography
    Member

    no, sorry, sacredpath... i was talking about http://kerryandluis.wordpress.com/ , im using it as a test blog to experiment with the css, didnt want to muck around with my "real" blog... but thanks so much anyway... it would be too easy that this code would work for Clean Home too, wouldnt it? im going to try anyway...

  11. thesacredpath
    Member

    No, CSS is theme specific. Each theme is different because they have different authors and each author decides what they are going to name the selectors and how they are going to organize the elements.

    I'll have a look at the other blog.

  12. thesacredpath
    Member

    This is actually easier (famous last words). Put the following into the CSS, upload the header to the media library, get the URL and put it into the background declaration. That should take care of it I'm pretty sure. It should push the navigation down below the header image I think. If it does not, we can move it down. Let me know.

    .header {
background: url("place URL of new image here") no-repeat scroll 0 0 transparent;
height: 400px;
width: 900px;
}

  13. thesacredpath
    Member

    You might want to do this as well (padding on the left of the title and description).

    #logo {
padding: 18px 0 34px 10px;
}

  14. thesacredpath
    Member

    OK, I just tried a header, and the menu stays where it is. If having it over the top edge of the header image is alright, then you are golden. If not, we can move the menu.

  15. kerrymurrayphotography
    Member

    would it be awkward if i told you i love you so much right now? seriously, you are awesome... thats perfect! The menu doesnt matter because i'm not going to use it anyway, im putting custom designed buttons into my header widget area, thats going to be my menu.

    thank you so so much, sacredpath and luke, you both rock!!

    ps. when i put that padding in, it didnt seem to make much difference... not that its super important, because it looks awesome as is.

  16. thesacredpath
    Member

    {blush} :-) Thanks.

    You can play with the padding (the left padding is the 10px value) and adjust it as desired. The order of the 4 values: top, right, bottom, left.

    To get rid of the top menu entirely, go to appearance > custom menu and create a blank custom menu with no pages or anything in it and save the menu. Then in the theme location module at upper left, select your blank custom menu in the "primary location" pulldown and save.

  17. kerrymurrayphotography
    Member

    The menu thing I had figured out already, so at least you didnt need to hold my hand for that... and i've played around with the padding, got that sorted too, thanks again, you have been a massive help!

  18. thesacredpath
    Member

    Glad it is all coming together and I was happy to help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags