CSS code for Enterprise Theme
-
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: (visible only to logged in users)
-
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; } -
Just realized that there is none of the rounded corner business in IE 8. Actually looks neat and complements the cleaner theme! :)
-
-
Yes please. Wonder if it’s at all possible to uncurve all corners so the entire theme appears the same across browsers.
-
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/
-
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; } -
-
-
-
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?
-
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
-
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;
}
‘ -
Thank you very much for your help from the start to where it is right now. It’s much appreciated.
-
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! :)
-
@shimworld
I love what you have done with the CSS editing on this theme. Your blog is looking sweet. :) -
Thanks TT. It was either to go all out or not bother at all. You probably like the COACH bags too :)
-
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; } -
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
-
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.
WordPress.com Forums 