Twenty Ten Weaver Theme Snippets

CSS Snippets for Twenty Ten Weaver

There are many styling options than can be implemented using CSS. In fact, the vast majority of Twenty Ten Weaver's options are simply CSS style rules that override the defaults used by the parent Twenty Ten theme. Now it would be possible to provide many more options for styling your theme, but at some point, that would begin to make the control interface huge and confusing (What? - you say it already is huge and confusing!).

Instead of adding more and more options, this document will instead contain CSS snippets that you can cut and paste into the <HEAD> section of the Advanced Options tab. (Unless otherwise noted, you should paste these snippets between the <style> and </style> lines in the <HEAD> Section box.)

Note - although these snippets were designed specifically for Twenty Ten Weaver, almost all of them will work just as well just with Twenty Ten - so if you are familiar with editing Twenty Ten's style.css file, you will find these snippets useful, too.

Many times, these snippets will work without any additional modification - you can simply cut and paste. Sometimes they might call for a path or image name, in which case you will have to change from the example file name to one of your own. Please change these file names. The examples provided (mostly images) are hosted on our google account, and it would be more polite to use your own resources. You can copy any of the images to your own host, but please, don't use our examples.

And this is not a CSS tutorial. We will try to explain just enough for you to use these snippets without really understanding exactly how they work. You can easily go Google and search for more information about specific CSS properties we use. For example, searching for "CSS font-weight" will lead you all the information you might need to understand what values "font-weight" can take. But mostly the idea is to cut and paste, and then perhaps play a bit with sizes or other values provided.

And this is an on-going effort. We will add more snippets as they are "discovered". We appreciate contributions if you've found a useful snippet!

The Snippets

Header

Make site title big
Sometimes you might want your site title to be big. Try different %'s to vary the size.
```
#site-title a {font-size:150%}
```
Make menu bar have all corners rounded
Because it usually looks better, the default style when rounded borders are selected rounds only the bottom of the menu bar. You can change it to all rounded borders using this snippet.
```
#access {-moz-border-radius: 7px; -moz-border-radius: 7px;
         -webkit-border-radius: 7px; -webkit-border-radius: 7px;}
```
Border above and below Header image
The parent Twenty Ten theme puts a black bar above and below the header image. In order to avoid problems when picking various background colors, Twenty Ten Weaver removes those bars. You can restore them back to the original with this snippet. The # value is a color, as usual, and you can change it.
```
#branding img {
  clear: both; display: block;
  border-top: 4px solid #000; border-bottom: 1px solid #000;}
```
Styling Secondary Menu Bar
All the Main Options menu options apply to both the Primary and Secondary menus. The Primary menu bar is controlled by the #access tag, and the Secondary by the #access2 tag. Any of the snippets that use #access will apply to the Secondary Menu by using #access2 instead.
```
div.menu li { float:right }
```
Move Menu to the Right
If you want the menu items on the right of the bar, you can use this snippet. But be warned: this will reverse the order of the menu items! To get the order you really want, you'll have to use the Appearance->Menus panel to create the order you want - but in reverse!
```
div.menu li { float:right }
```
Center Items On Menu
This snippet will center the items in the menu bar. If you have too many sub-menus, they might not display properly on the right. You can change the center to right to move the menu to the right, but then there will be serious issues with sub-menus.
```
 #access { text-align:center; }
 #access ul{display:inline-block;}
```

General styling of menu bar
If you want to change the font or almost anything else about the menu bar, try adding your own styling to these CSS rules. We've included some simple attributes like color, but you could change decoration, font, or other attributes.

#access {font-variant:small-caps;
    background-color:#222222;} /* all menu text - small-caps */
#access a {color: #dddddd;}   /* menu links */
#access ul ul a, #access li:hover > a,
    #access ul ul :hover > a {background: #666666; } /* hover bg for all */
#access li:hover > a, #access ul ul :hover > a { color:#FFFFFF; }
    /* hover text color for all */
#access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {color:#FFFFFF; font-style:italic;}
    /* menu item for current page */

Add a Logo before Site Title
If you'd like a small logo in front of your Site title, you can use the following snippet. We've added a <div> with the id '#ttw-site-logo' just for this purpose. The "30px" in the padding should be adjusted to make the logo fit in front. You can also change background-position with various combinations to place the logo as you like.
```
#ttw-site-logo {background-image: url(address of logo); background-repeat:no-repeat;
    background-position: left center;padding-left:30px;}
```
Hide Site Title/Description via CSS
The Main Options tab has a checkbox to remove the site title and description - they are not included in the output page. Some people want the title text for search engines yet not displayed, and using this snippet will hide your title and/or image (you can remove one of the tags if desired) while leaving the text there for search engines.
```
#site-title, #site-description {display:none;}
```
Move Site Title and Site Description
The CSS tags for the Site Title and Site Description, normally found in the heading at the top of the page, are controlled by the #site-title and #side-description tags. By manipulating these tags you can move the title to the right, or put the site description under the title, change their fonts, or even move them over the site header image. Here are few examples of some of the things you could do. Experiment to get your title and site description exactly where you want.

Put the site description under the title
```
#site-description {
    clear: both; float: left;
    margin-top: -10px; margin-left: 50px; /* adjust as needed */
}
```
Put the site title on right, description on left
```
#site-title {
    text-align:right; float: right; /* put on right side */
}
#site-description {
    clear: right; float: left;
    margin-top: -40px;   /* adjust as needed */
}
```
Put Title and Description over the Header image
```
#site-title {
    position: absolute;
    top: 100px; margin-left: 40px; /* adjust as needed */
}
#site-description {
    position:absolute; clear: both; float: left;
    top: 150px;		/* adjust and coordinate with #site-title */
    margin-left: 50px;  /* adjust as needed */
}
```

Post and Page Content

Adding boxes to post information
As demonstrated in the Simple Silver theme, these snippets will put a bordered box of a specified color around the post information at the top and bottom of each post entry.
```
.entry-meta {padding:4px 0 4px 20px;background-color:#F8F8F8;
   border: solid 1px #A0A0A0;}
.entry-utility {padding:4px 0 4px 20px;background-color:#C0C0C0;
   border: solid 1px #A0A0A0;}
```
Adding Background Color to Page Titles
This snippet will add a background color on page and post titles.
```
.entry-title {background-color:#DDDDDD;}
```

Adding Shadows to Site, Page, Post, and Widget titles
These style rules will add a shadow effect on all the major titles. You should be able to figure out which rules affect which titles. You can search the web for "CSS text-shadow" to learn about options.

#site-title a {text-shadow:1px 1px 1px #999;}
#content .entry-title {text-shadow:1px 1px 1px #999;}
.entry-title a:link {text-shadow:1px 1px 1px #999;}
.entry-title a:visited {text-shadow:1px 1px 1px #999;}
.entry-title a:active, .entry-title a:hover {text-shadow:1px 1px 1px #999;}
.widget-title {text-shadow:1px 1px 1px #999; }

Control Font Size and Line Spacing of Content Text
While the main options give you some rough control over the size and line spacing of the main content text, you can get fine control by overriding the "body, input, textarea" CSS tag. Search the web for options on using "font-size" and "line-height". This example will make the text smaller.
```
body,input,textarea {font-size: 10px;line-height: 14px;}
```
Hide Page and/or Post Titles
If you don't want your page titles to show, you can use the following snippet:
```
.page .entry-title{display:none;}
```
You can do the same for posts with:
```
.post .entry-title{display:none;}
```
If you want to hide the title of a specific page, you use the WP ID of the page (both posts and pages have ids - you can get the page id from the Edit Page/Post address bar - it will show as ?post=id). To hide a specific post or page, use this (this example will hide the title of page with id=3, you have to determine the id of the post/page whose title you want to hide):
```
#post-3 .entry-title{display:none;}
```
Hiding Comments
The normal mechanism for getting rid of comments on a Wordpress post or page is to disable comments using the option on the post/page editor page. But sometimes, you will still get something related to comments showing on your pages. This snippet will stop comments from showing. (It does not, however, do anything about the post information shown above and below posts, which can still include references to comments. A possible fix for that is in the feature queue.)
```
#comments {display:none;}
```
Making the site Background Color or Image Show behind everything
While the Main Options tab has settings for all the major areas of your site's pages, each areas will have some color by default. However, you might want to use the main background color or image set using the Appearance->Background menu to appear behind everything (or selected areas). Use this snippet to make the background show through everything, or selectively remove areas from the rule as needed (you may have to play a bit - some areas are behind others). Used with a background gradient and a shadow border can lead to very handsome sites.
```
#wrapper, #main, #container, #content, #primary,
  #secondary, #ttw-top-widget, #ttw-bot-widget,#footer
  {background-color:transparent;}
```

Widget Areas

Adding space below Sidebar widget titles
You may want to add some space between a sidebar widget's title and the content. This is fairly easy to do. Add this snippet, which adds 10px (10 pixels, about what a line takes up). If you want more, simply change the 10px to something bigger.
```
.widget-title {margin-bottom:10px;}
```
Changing the font size of a widget title
You can also change the font size of a widget title. Our example uses 'px', but there are other options for specifying font-size - you can use whatever you know. Font-weight can be any of: normal, bold, bolder, lighter, or values 100 to 900. The line-height influences the layout, and is related to font-size. And again, we use the margin-bottom to fix that up. You can play around with the values to get a look you like.
```
.widget-title {font-size:30px;font-weight:normal;line-height:35px;margin-bottom:5px;}
```
Changing the font size of widget content
This snippet will change the font size of text in a widget area. Change the 120% to whatever you need.
```
.widget-area {font-size:120%;}
```
A widget title with a dotted bar underneath
This example is taken from the Orange sub-theme. When you see a 6 numbers following a #, that is a color. You can search the web for colors, or play with the Main Options tab to see the value for colors.
```
.widget-title {font-size:130%;margin-bottom:8px;border-bottom: 1px dotted #C4BCB0;} 
```
A widget with a gray bar and small-caps font
This example is from the Ivory Drive sub-theme. You can change the color of the under-bar and its height. Small-caps is the only interesting font-variant currently supported by HTML.
```
.widget-title {border-bottom: 2px solid #737373; font-variant: small-caps;}
```

Sidebars
We worked long and hard to give you some good choices for sidebar arrangement. Here's the CSS rules you have to fiddle to rearrange the sidebars (and the top/bottom widget areas). This example is for the two sidebars, one on the left, one on the right. By changing a combination of mainly float, width, and margins, you can get pretty much any arrangement you want. But please don't ask for help on these - just play with the various values until you get an arrangement you like.

#container { width:940px; float:left; margin:0 0 4px 0px; }
#content { width: 460px; margin: 0px 0px 5px 220px; overflow:hidden;
    padding: 5px 20px 4px 20px; }
#primary { width:214px; float:left; margin: 0 0 4px -940px; }
#secondary { width:214px; float:left; margin: 0 0 4px -226px;}
#ttw-top-widget, #ttw-bot-widget {width: 400px; margin-left: 265px;}
.one-column #content { margin: 0 0 0 0 px; padding: 0; width: 800px;}

And here's the code for the wide sidebar on the right:

#container { float: left; margin: 0 0px 4px 0; width: 628px; }
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;
     margin: 0 0 4px 0;}
#ttw-top-widget, #ttw-bot-widget {width: 520px;}
.one-column #content { margin: 0 0 0 80px; padding: 0; width: 800px;}

Centering Sidebar widget titles
This snippet will center your widget titles.
```
.widget-title {text-align:center;}
```

Footer

Hiding the Copyright and Powered by in the footer
Hey - we'd really appreciate it if you leave the Powered by text in the footer, but we know sometimes you really don't want to have stuff like that in your footer. It is in a <div> with id '#site-generator'. If you also want to eliminate the copyright notice, it is in a <div> with id '#site-info'. This snippet will hide both. It should be fairly obvious which part to delete if you want to keep one.
```
#site-generator {display:none; }
#site-info {display:none;}
```
Border around footer
It is fairly easy to add a border of the style, width, and color of your choice around the footer box. First, however, you need to clear the 4px bar included above the footer by default. Following is a simple example, but you can look up the other options available for borders by searching the web for "css border values".
```
#colophon {border-top:none;}
#footer {border-style:double; border-width:4px; border-color:#222222;}
```
Change font size of everything in footer
If you want to change the font size of everything in the footer - widgets and other text you may add to the footer, try this snippet. You can use any of the usual font-size values to specify size.
```
#footer {font-size:8px;}
```
If you have widgets in the footer, and want to change the font size of only the widget areas, use:
```
#footer-widget-area {font-size:8px;}
```