CSS modifications
This site is running on WordPress.com Theme Enterprise which is now retired.
Enterprise is a fixed width, two column theme with options for right sidebar layout (as the Home page is set) or full-width, no sidebar layout (as this page is set), footer widget placement, custom header, custom background and customizable, dropdown navigation menu.
The theme is adapted for use on WordPress.com hosted blog platforms from the fuller featured Enterprise Theme by StudioPress which can be obtained for use on self-hosted sites using WordPress.org open source blog/website software.
I have the WordPress.com Custom Design upgrade and have made a number of modifications to the CSS (Cascading Style Sheet).
Modifications to Enterprise Theme
For WordPress.com users still running blogs using the Enterprise Theme who may be interested in the CSS customization, the current modifications for this site are set out below. There are several style sheets for the Enterprise Theme. All changes have been made to style sheet identified as:
id= ‘all-css-2’ (972 rules)
and to elements between Lines 3627 to 4921, as viewed when logged in to WordPress.com, in Firefox Web Developer Tools > Style Editor View.
You can download the style sheet for Enterprise Theme here:
Enterprise Theme: https://wpcom-themes.svn.automattic.com/enterprise/
Style CSS: https://wpcom-themes.svn.automattic.com/enterprise/style.css
The default font stack for h1 header (site title) and h4 header (site description) for Enterprise Theme is Tahoma, Arial, Verdana.
The default font stack for navigation menu tabs, page and post titles, content and headings, widget text and links is Arial, Tahoma, Verdana.
Update at May 3, 2017: Current CSS modifications are:
body {
background: #f5f5f5;
color: #090d10;
font-size: 14px;
line-height: 22px;
}#wrap {
-moz-border-radius: 0;
-khtml-border-radius: 0;
-webkit-border-radius: 0;
}a, a:visited {
color: #336699;
font-weight: bold;
}a:hover {
color: #8cb3d9;
text-decoration: none;
}#header {
-khtml-border-radius: 3px;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-radius: 0 0 3px 3px;
}#header {
margin: 0 auto 10px;
background: #404040;
border: 1px solid #404040;
}#header h1, #header h1 a, #header h1 a:visited, #header h4, #header h4 a, #header h4 a:visited, .header-left {
color: #adc2d1;
}#header h1 a, a:visited, a:hover {
font-weight: bold;
}.header-left p {
font-size: 12px;
font-style: normal;
}#nav {
text-transform: none;
}#nav {
-khtml-border-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}#subnav {
display: none;
}#content h2 a, #content h2 a:visited {
color: #2e4453;
}#content h2 a, #content h2 a:visited, a:hover {
font-weight: bold;
}#content h2 a:hover {
color: #888888;
}.categories a, .tags a {
color: #999999;
font-weight: normal;
}
Update at September 23, 2015: Current CSS modifications are:
body {
background: #F7F7F7;
color: #333333;
font-size: 14px;
line-height: 22px;
}a, a:visited {
color: #008080;
}a:hover {
color: #666666;
text-decoration: none;
}#header {
background: #404040;
border: 1px solid #404040;
}#header h1 a, a:visited, a:hover {
font-weight: bold;
}.header-left p {
font-size: 12px;
font-style: normal;
}#nav {
text-transform: none;
}#subnav {
display: none;
}#content h2 a, a:visited, a:hover {
font-weight: normal;
}#content h2 a:hover {
color: #666666;
}.categories a, .tags a {
color: #999999;
}
The site title and site description text have been changed from default dark grey #333333 to #339999, via Admin > Appearance > Header.
Previously:
The following modifications are currently added to the WordPress CSS panel and are overriding the theme’s default CSS:
body {
background: #F7F7F7
color: #111111;
font-size: 14px;
line-height: 22px;
}a:hover {
color: #666666;
}#nav {
text-transform: none;
}#subnav {
display: none;
}#header h1 a, a:visited, a:hover {
font-weight: bold;
}#content h2 a, a:visited, a:hover {
font-weight: normal;
}.categories a {
color: #999999;
}.tags a {
color: #999999;
}
which apply the following modifications:
1 Changes Background from #F0F0F0 to #F7F7F7; changes page and post content font colour from grey #555555 to dark grey #222222; increases page and post content font size from 12px; line-height: 20px; to 14px, line-height: 20px; also applies increase to font size of widget text, widget links, RSS Posts and RSS Comments buttons text, but leaves font size of navigation menu parent and child tab page titles and post meta text unchanged.
2 Changes Hyperlinks hover colour from strong blue #008DCF underlined to mid grey #666666 underlined.
3 Undoes the Upper Case text transform for the parent page navigation menu tab titles text; also undoes the Upper Case text transform to the RSS Posts and RSS Comments buttons text.
4 Hides the Subnav Categories menu.
[In the Enterprise Theme, a mid grey subnavigation menu (#subnav) sits immediately below the dark grey pages and child pages navigation menu (#supernav) and by default, displays tabs for the 10 most frequently used Categories – compare with ME agenda site, for which the Enterprise Theme CSS is unmodified and which displays the most frequently used Categories menu.]
5 Changes blog title (h1) font weight from normal to bold.
6 Retains post title (h2) font weight as normal.
7 Applies change of colour to both links and link hover from default strong blue #008DCF to light grey #999999, selectively for post Categories.
8 Applies change of colour to both links and link hover from default strong blue #008DCF to light grey #999999, selectively for post Tags.
Alternatively, combine the two:
.categories a, .tags a {
color: #999999;
}
It is possible to change the colour of the site title and site description, add a custom header image, change the theme’s background colour or add a custom background without purchasing the Custom Design upgrade. These can be changed from the Header and Background tabs, under Appearance tab in the Site Admin Management pages.
The site title and site description have been changed from default dark grey #333333 to named colour “Teal” #008080, via Admin > Appearance > Header.
Additional modifications may be effected as I become better acquainted with the specific CSS for this theme.
Further basic modifications
The site title and site description can otherwise be modified for colour, and also for font size, font family, weight, style, hover, text decoration etc by modifying the following. Include only the selectors for the elements and rules you want to add or override.
#header h1, #header h1 a, #header h1 a:visited, #header h4, #header h4 a, #header h4 a:visited {
color: #333;
font-size: 24px;
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
margin: 0 0 7px 0;
padding: 0;
text-decoration: none;
}#header h1 a:hover, #header h4 a:hover {
text-decoration: none;
}.header-left {
width: 690px;
float: left;
margin: 0;
padding: 15px 0 0 20px;
}.header-left p {
font-family: Tahoma, Arial, Verdana;
font-size: 14px;
font-style: italic;
margin: 0;
padding: 0;
}
To change the colour of the navigation menu parent tabs
To change the default dark grey colour of the Supernav page navigation menu, add the following to the CSS modifications (note: this will apply the colour change to parent page tabs, only, not to any dropdown child page tabs):
#nav {
background: #HEXCODE;
}
To hide the navigation menu
#nav {
display: none;
}
To change the colour of the Subnav Most Used Categories menu
#subnav {
background: #HEXCODE;
}
To hide the Search Form in the Header
Add the following to the CSS modifications:
#searchform {
display:none;
}
this will also block the display of a Search Form Widget added to the sidebar or to one of the three Footer columns. If you require no Search Form in the Header and a Search Form in the sidebar or Footers, drag the Search Form Widget into position and add both the following to the CSS modifications:
#searchform {
display:none;
}#sidebar .widget_search form {
display: block;
}
A more elegant solution is:
.header-right {
display: none;
}
which hides only the Search Form in the Header and does not prevent a Search Form displaying in the sidebar or in one of the three Footer columns.
To hide Search Form and RSS buttons in the Header, and hide Subnav menu
Add the following to the CSS modifications to hide Search Form and RSS buttons in the Header and to also hide the Subnav menu which displays tabs for the 10 most used Categories:
#searchform, #subnav, .rsslink {
display:none;
}
To change font colour, font family, weight, decoration, size, hover or other attributes of post titles (h2)
Modify selected of the following, as required. Include only the selectors for the elements and rules you want to add or override.
content h2 {
color: #333333;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
text-decoration: none;
margin: 0 0 5px 0;
padding: 0;
}#content h2 {
font-size: 20px;
border-bottom: 1px dotted #CCCCCC;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}#content h2 a, #content h2 a:visited {
color: #333333;
text-decoration: none;
}#content h2 a:hover {
color: #008DCF;
text-decoration: none;
}
Resources
WordPress Custom Design > Editing CSS
WordPress CSS Customization Forum
WordPress Tips by Panos (excellent resource for WordPress tips and workarounds):
Panos: CSS Editing: Where is the theme CSS and how do I edit it? February, 2013:
http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/
Panos’s Guides: http://wpbtips.wordpress.com/list-of-posts/2/
Panos’s Tutorials: http://wpbtips.wordpress.com/list-of-posts/3/
ColorPix: free download colour picker toolbar app (identifies RGB, HEX, HSB, CMYK):
http://www.colorschemer.com/colorpix_info.php
ColorHexa: free online tool providing information about any Hex colour, generates colour values, gradients, shades, tints, tones, colours by name etc: http://www.colorhexa.com/
Color picker: https://www.w3schools.com/colors/colors_picker.asp
Color names: https://www.w3schools.com/tags/ref_colornames.asp
HTML Styles – CSS: https://www.w3schools.com/html/html_css.asp
dx revision watch 