Need help? Check out our Support site, then


CSS code for Enterprise Theme

  1. I like the Enterprise theme a lot more now than when I started using it two weeks ago. There are a few aspects of its appearance I want to change via CSS. One of such changes is removing the category bar entirely (and maybe also round the off the corners of the Page bar too). I had some help from another thread but it doesn't work.

    http://en.forums.wordpress.com/topic/enterprise-theme?replies=53

    Am also looking for code to reduce the empty spaces between 1) header and page bar and 2) presently the category bar and post page and finally, removal of the Search box in the header.

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

  2. OK I've managed to get to where the theme is right now with the following script. Can someone fine tune this for me? I want the content bar's rounded corners to be straight so they line up with the Page bar nicely.

    .wp-caption p.wp-caption-text {
    font-size:1em;
    padding-top:9px;
    }
    
    #searchform {
    display:none;
    font-weight:bold;
    margin:0;
    padding:0;
    }
    
    #header {
    background:#FFFFFF;
    width:960px;
    height:80px;
    overflow:hidden;
    border:1px solid #E4E4E4;
    border-top:none;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #nav {
    float:left;
    width:960px;
    min-height:45px;
    background:#333 url('images/nav.png') repeat-x;
    display:block;
    text-transform:uppercase;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #subnav {
    display:none;
    background:#666 url('images/subnav.png') repeat-x;
    clear:both;
    width:950px;
    float:left;
    min-height:37px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -khtml-border-radius:10px;
    -webkit-border-top-left-radius:0;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    margin:0 auto 20px;
    }
    
    .rsslink {
    display:none;
    background:url('images/rss.png') no-repeat left center;
    margin:0 0 0 10px;
    padding:3px 0 3px 16px;
    }
  3. Just realized that there is none of the rounded corner business in IE 8. Actually looks neat and complements the cleaner theme! :)

  4. so, do you still need help?

  5. Yes please. Wonder if it's at all possible to uncurve all corners so the entire theme appears the same across browsers.

  6. Ok, I'll check the other point later.

    Yes, you can uncurve them by removing the properties that start with a dash (i.e. -moz, -khtml, -webkit). Just take them out in all the selectors they appear in and that should do it.

    BTW, just in case you don't know, you just need to have in the CSS Editor the code you're modifying/adding to the theme's CSS. This provides more info:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  7. Thanks for the csswiz link. It'll take me some time to digest them. Meanwhile it's the long winded, safe way. As you can see, the -moz, -khtml, -webkit properties are removed but in Firefox nothing seems to change even a forced reload. Perhaps the curves are hard coded into the theme?

    .wp-caption p.wp-caption-text {
    font-size:1em;
    padding-top:9px;
    }
    
    #searchform {
    display:none;
    font-weight:bold;
    margin:0;
    padding:0;
    }
    
    #header {
    background:#FFFFFF;
    width:960px;
    height:120px;
    overflow:hidden;
    border:1px solid #E4E4E4;
    border-top:none;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #nav {
    float:left;
    width:960px;
    min-height:45px;
    background:#333 url('images/nav.png') repeat-x;
    display:block;
    text-transform:uppercase;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #subnav {
    display:none;
    background:#666 url('images/subnav.png') repeat-x;
    clear:both;
    width:950px;
    float:left;
    min-height:37px;
    margin:0 auto 20px;
    }
    
    #content cocde {
    background:#F5F5F5;
    display:block;
    margin:0 0 15px;
    padding:10px 20px 0 15px;
    }
    
    .rsslink {
    display:none;
    background:url('images/rss.png') no-repeat left center;
    margin:0 0 0 10px;
    padding:3px 0 3px 16px;
    }
  8. OK Juan, I've just read the reasons why we should paste whole codes. Makes sense to me.

  9. why we should NOT paste whole codes

  10. No problem. I am taking a look at your code now. I'll post as soon as I have something

  11. BTW, it seems you manage to close the gap between the header and menu bar, so I won't look into that. And just to make sure, you want to hide the parts that read "File under" and "Tagged with", correct?

  12. My apologies. I obviously am still asleep. You do need the dashed properties, but you need to change their values.

    Also I went ahead and did some clean up on your code, so... replace your code with this:

    #wrap, #nav, div#header {
    -moz-border-radius-topleft:0;
    -moz-border-radius-topright:0;
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-bottomright:0;
    -khtml-border-radius:0;
    -webkit-border-top-left-radius:0;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-bottom-right-radius:0;
    }
    
    #searchform, #subnav, .rsslink {
    display:none;
    }
    
    #header {
    background:#FFFFFF;
    width:960px;
    height:120px;
    overflow:hidden;
    border:1px solid #E4E4E4;
    border-top:none;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #nav {
    float:left;
    width:960px;
    min-height:45px;
    background:#333 url('images/nav.png') repeat-x;
    display:block;
    text-transform:uppercase;
    position:relative;
    margin:0 auto;
    padding:0;
    }
    
    #content cocde {
    background:#F5F5F5;
    display:block;
    margin:0 0 15px;
    padding:10px 20px 0 15px;
    }
    
    .wp-caption p.wp-caption-text {
    font-size:1em;
    padding-top:9px;
    }

    HTH

  13. Just managed to remove the rounded corners in main bar and now sits flush with pages bar, the way I wanted it. I'm cool with the ""File under" and "Tagged with" no changes required for now. Thanks for your help, Juan!

    `#wrap {
    -moz-border-radius:0;
    -khtml-border-radius:0;
    -webkit-border-radius:0;
    }
    '

  14. Thank you very much for your help from the start to where it is right now. It's much appreciated.

  15. Oh I also increased the height of the header image and added a external path to load the image. This cannot be done from within the Header image option as it's hard coded to crop to exactly 960 x 80 px whereas it's now 960 x 385px. It's all good! :)

  16. @shimworld
    I love what you have done with the CSS editing on this theme. Your blog is looking sweet. :)

  17. Thanks TT. It was either to go all out or not bother at all. You probably like the COACH bags too :)

  18. I've just discovered a small problem. The code below while removing the search box in the header image also removes the search widget. I use the search function regularly so it's good to have a working search widget in the sidebar, if that's possible and still remove the top one.

    #searchform, #subnav, .rsslink {
    display:none;
    }
  19. Your blog is looking great!

    Do me a favor, add the search widget, I need it to be there even if it doesn't show. That way, I can give you the proper code.

    Thanks

  20. Hi .. just added Search widget. Sorry, just woke up, I'm on GMT +8 and it was 1 am when I submitted the last post.

  21. Okay, add the code back

    #searchform, #subnav, .rsslink {
    display:none;
    }

    and add this to the CSS

    #sidebar .widget_search form {display: block;}

    That should hide the search field in the header but display the one in the sidebar.

    HTH.

  22. PERFECT and that deserves an uppercase! :)

    Thank you.

  23. GREAT theme and finally have it working on my blog (inchristus.wordpress.com).
    How can I hide the categories row in the header?

  24. No problem, Shim.

    Pdadams,

    To hide the categories bar you'd need to have the CSS upgrade.

  25. @pdadams

    Assuming you have CSS upgrade, the following should take care of it

    `#subnav {
    display:none;
    }'

  26. I keep messing up the closing backtick

    #subnav {
    display:none;
    }
  27. Hi. I need to know how big the default image for Enterprise background and header. I wanna change both with my own images, just can't figure their required resolution.

    Thanks.

  28. Oh, and I don't code. So please please I'd appreciate much if you help me not with code language. I'm not a techie. Thanks again.

  29. The default header image is stated there: Dashboard | Appearance | Header

    Images of exactly 960 x 80 pixels will be used as-is.

    I have no idea what the measurement of background image is nor do I understand how it works. Judging from the space provided, it may even be the same as header image. No harm experimenting.

  30. Thanks....categories hidden successfully.

Topic Closed

This topic has been closed to new replies.

About this Topic