## 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.)

IMPORTANT NOTE: Although all these snippets will still work as <HEAD> Section snippets, many of them can also be implemented by using the CSS slide-open options on the Main Options tab new as of Weaver 1.5. It is highly recommended that you use the CSS slide-open option whenever possible.

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. (The CSS Help document does have a short CSS Tutorial, however, along with useful reference links.) 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".

Here's a clickable list of snippets:

- Header
- Make site title big
- Make menu bar have all corners rounded
- Border above and below Header image
- Styling Secondary Menu Bar
- Move Menu to the Right
- Center Items On Menu
- General styling of menu bar
- Add a Logo before Site Title
- Hide Site Title/Description via CSS
- Move Site Title and Site Description
- Post and Page Content
- Adding boxes to post information
- Adding Background Color to Page Titles
- Adding Shadows to Site, Page, Post, and Widget titles
- Control Font Size and Line Spacing of Content Text
- Hide Page and/or Post Titles
- Hiding Comments
- Making the site Background Color or Image Show behind everything
- Putting Posts and Pages in boxes
- Hiding Post Meta Information
- Changing Twenty Ten Table Styling
- Sticky Posts and Author Information
- Hiding Titles for special Post Pages
- Widget Areas
- Adding space below Sidebar widget titles
- Changing the font size of a widget title
- Changing the font size of widget content
- A widget title with a dotted bar underneath
- A widget with a gray bar and small-caps font
- Sidebars
- Centering Sidebar widget titles
- Changing Top and Bottom Widget Area Size and Placement
- Footer
- Hiding the Copyright and Powered by in the footer
- Border around footer
- Change font size of everything in footer
- General Styling
- Make Everything Transparent

## The Snippets

### Special Weaver CSS Elements

Weaver has defined several special CSS id's and classes to help style some fine details of various page elements (e.g., the "previous" and "next" page links). You will have to provide your own CSS rules for these elements in the <HEAD> Section.

1. #archive-title: wraps the "Archives - Date" title found when displaying posts in an archive. You can hide this title (and similarly, the other special post display pages described following) using #archive-title {display:none;}
2. #attachment-title: for attatachment post pages
3. #author-title: for author post pages
4. #category-title-xxx: for category pages. The xxx should be the specific category slug - a lower case version of the category with spaces replaced with underscore. For example, "Category A" would have a slug "category-a", and the rule name would be #category-title-category-a.
5. #tag-title: for tag post pages.
6. #ttw-site-logo: See Header, #8, Add a Logo before Site Title, below.
7. .nav-previous, .nav-next: The "Older Posts" and "Newer Posts" links (or previous and next article title).
8. .meta-prep-author: For posts, the "Posted on" text string.
9. .vcard: For posts, the author's name.
10. .cat-links: For posts, the "Posted in catetory-list" string.
11. .entry-utility-prep: For posts, the "Posted in" string.
12. .meta-sep-bar: For posts, the vertical bar (|) separating items.
13. .tag-links: For posts, the "Tagged tags" string.
14. .entry-utility-prep-tag-links: For posts, the "Tagged" string.
15. .comments-link: For posts, the "n Comments" or "Leave a Comment" field.
16. .edit-link: For posts, the "Edit" field (note: this only appears when an editor or admin is logged in)
17. .page-link: For posts, the "Pages: 1 2 3" set of links when <!--nextpage> option is used.
18. .more-link: For post excerpts, the "Continue reading..." text

### Header

1. Make site title big
   Sometimes you might want your site title to be big. Try different %'s to vary the size. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       #site-title a {font-size:150%}

2. 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; border-radius: 7px;
                -webkit-border-radius: 7px;}

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

4. 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.
5. 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; }

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

7. 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. Don't forget about #access2 if you have a secondary menu bar.

       #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 */

8. Add a Logo before Site Title
   If you'd like a 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. Fiddle with the padding and width settings to get the logo to show where you want. (Note: If you use '#ttw-site-logo-link' instead, the logo will display as an active link back to the site's home page.)

       #ttw-site-logo {background-image: url(http://whatever.png); background-repeat:no-repeat;
         background-position: top center; padding-top:125px; width: 940px;}

   The Advanced Optoins Pre-Header area can also be used to do this with more flexibility.
9. 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.(or use the appropriate Main Options CSS slide-open to add just the {} part)

       #site-title, #site-description {display:none;}

10. 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 `#site-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. (or use the appropriate Main Options CSS slide-open to add just the {} part)
    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

1. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

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

2. Adding Background Color to Page Titles
   This snippet will add a background color on page and post titles. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .entry-title {background-color:#DDDDDD;}

3. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

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

4. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       body,input,textarea {font-size: 10px;line-height: 14px;}

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

   (or use the appropriate Main Options CSS slide-open to add just the {} part)
   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;}

6. 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.) (or use the appropriate Main Options CSS slide-open to add just the {} part)

       #comments {display:none;}

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

8. Putting Posts and Pages in boxes
   You can get get some very appealing effects by styling individual posts with borders or background colors. You can apply same efffects to the just the content area of pages. Use these snippets, which add a background color and a border, as a sarting point. Note that margins may need to be adjusted to match the sidebar scheme you are using. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       #content .page {background-color:#fafafa; padding:15px;
           border: 1px solid #218c64; margin: -5px 0px 10px -20px;}
       .post {background-color:#fafafa; padding:15px;
           border: 1px solid #218c64; margin: -5px 0px 10px -20px;}

9. Hiding Post Meta Information
   You can hide the meta information for posts (the Posted on __ by __ and Posted in __ lines) with the following snippets. There are also speciall Weaver CSS elements to fine tune these items.

       .entry-meta {display:none;}
       .entry-utility {display:none;}

10. Changing Twenty Ten Table Styling
    Weaver now includes five different "check-box" table styles, but if you need to customize your tables, you can use the following snippet. Here's a complete list of the Twenty Ten table styling for the #content area. You can tweak these as you need to get your tables looking the way you like.

        #content table {
        	border: 1px solid #e7e7e7;
        	text-align: left;
        	margin: 0 -1px 24px 0;
        	width: 100%;
        }
        #content tr th,
        #content thead th {
        	color: #888;
        	font-size: 12px;
        	font-weight: bold;
        	line-height: 18px;
        	padding: 9px 24px;
        }
        #content tr td {
        	border-top: 1px solid #e7e7e7;
        	padding: 6px 24px;
        }
        #content tr.odd td {
        	background: #f2f7fc;
        }

11. Sticky Posts and Author Information
    (Weaver now includes a "checkbox" option to set this color.)
12. Hiding Titles for special Post Pages
    Most of the special post pages (e.g., Archive pages) include an extra title line (e.g., 'Monthly Archives: July 2008'). You can hide those titles with the following CSS rules:

        #archive-title {display:none;}
        #author-title {display:none;}
        .category-title {display:none;}
        #category-title-slug {display:none;}
        #tag-title {display:none;}

Note that you can hide all categories using '.category-title', or just a specific category using '#category-title-slug', where slug is the lower case name of the category with blanks replaced with '-' (e.g., 'Cat A' is 'cat-a', thus #category-title-cat-a).

### Widget Areas

1. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .widget-title {margin-bottom:10px;}

2. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .widget-title {font-size:30px;font-weight:normal;line-height:35px;margin-bottom:5px;}

3. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .widget-area {font-size:120%;}

4. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .widget-title {font-size:130%;margin-bottom:8px;border-bottom: 1px dotted #C4BCB0;}

5. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       .widget-title {border-bottom: 2px solid #737373; font-variant: small-caps;}

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

   Note: It should be almost completely unnecessary to use this snippet now because sidebar widths are now adjustable from the Main Optoins tab under the Widget Areas section. This includes an option to adjust the sidebar border width if you add wide borders using the Main Options CSS feature.

7. Centering Sidebar widget titles
   This snippet will center your widget titles (or use the appropriate Main Options CSS slide-open to add just the {} part).

       .widget-title {text-align:center;}

8. Changing Top and Bottom Widget Area Size and Placement
   You may want to change how wide the top and bottom widget areas are, as well as their placement withing the content area. (And we've had it reported that the default placement can be off for RTL languages.) You can fiddle with the width and margin. You might need to use margin-right instead of margin-left, and sometimes a negative number can make it work. All this is dependent on the sidebar arrangement you've set.

       #ttw-top-widget, #ttw-bot-widget {width: 420px; margin-left: 40px;}

### Footer

1. 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. These are controlled in the Advanced Options tab under the Site Options section.
2. 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". (or use the appropriate Main Options CSS slide-open to add just the {} part)

       #colophon {border-top:none;}
       #footer {border-style:double; border-width:4px; border-color:#222222;}

3. 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. (or use the appropriate Main Options CSS slide-open to add just the {} part)

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

### General Styling

1. Make Everything Transparent
   If you want the site to have a single background color for the whole displayed screen, you can use the Appearance->Background to set the background color (or image), and then make all the major areas of the page transparent. Note, this snippet is just for the major areas - some things like input areas will retain their own background color. Also note that these rules style the major areas of any page, and you can do other things besides setting the background color - e.g., use "background-image:url(address)" to set an image. (or use the appropriate Main Options CSS slide-open to add just the {} part)

       #wrapper, #main, #access,
           #container, #content { background-color: transparent; }
       #primary, #secondary,#ttw-top-widget,
           #ttw-bot-widget, #footer { background-color:transparent; }

   These can also be set using the background color boxes in the Main Settings.