CSS code for Enterprise Theme

  • Author
    Posts
  • #482386

    shimworld
    Member

    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.

    https://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.

    #482657

    shimworld
    Member

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

    shimworld
    Member

    Just realized that there is none of the rounded corner business in IE 8. Actually looks neat and complements the cleaner theme! :)

    #482668

    devblog
    Member

    so, do you still need help?

    #482670

    shimworld
    Member

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

    #482672

    devblog
    Member

    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/

    #482673

    shimworld
    Member

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

    shimworld
    Member

    OK Juan, I’ve just read the reasons why we should paste whole codes. Makes sense to me.

    #482675

    shimworld
    Member

    why we should NOT paste whole codes

    #482676

    devblog
    Member

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

    #482677

    devblog
    Member

    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?

    #482678

    devblog
    Member

    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

    #482680

    shimworld
    Member

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

    #482696

    shimworld
    Member

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

    #482698

    shimworld
    Member

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

    #482700

    timethief
    Member

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

    #482702

    shimworld
    Member

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

    #482705

    shimworld
    Member

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

    devblog
    Member

    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

    #482747

    shimworld
    Member

    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.

The topic ‘CSS code for Enterprise Theme’ is closed to new replies.