CSS Snippets for Weaver

Almost all of the styled elements of a Weaver sub-theme are controlled by CSS rules. By knowing the CSS name of a specific item or area on the page, it is possible to add new styling features and rules to elements that are not covered by the standard options on the Main Options page. (On the other hand, most of the content - the words and where they go on a page - are controlled by Weaver's code, and not really subject to change.)

As Weaver has added features, one is the ability to add CSS rules directly to most page and post elements directly from the Main Options tab. More details for this are covered in the CSS document. Even with all that flexibility, there are still some things that can only be changed by adding new CSS rules using the Advanced Options page.

This document will contains 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.

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.

Here's a clickable list of snippets:

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 attachment 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 <!--next page--> 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. (Menu bars will not display with rounded corners in Internet Explorer 8 or earlier.) 
    #access {-moz-border-radius: 7px; border-radius: 7px;
         -webkit-border-radius: 7px;}
  3. Border above and below Header image
    You can add a black bar above and below the header image. 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 Options 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 effects to the just the content area of pages. Use these snippets, which add a background color and a border, as a starting 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 special 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 six different "check-box" table styles, including "None". If you need to customize your tables, pick "None" and can use the following snippet. It is a complete list of the styling for tables in the #content area. It is important to add the #content in front of each rule to just style tables in the content area because tables are sometimes used in widgets and other areas of the page You can tweak these as you need to get your tables looking the way you like. 
    #content table {

}
#content tr th,
#content thead th {

}
#content tr td {

}
#content tr.odd td {

}

  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'). Weaver now included "check-box" options to hide these, but 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;}

    13. 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 Options 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. That option will be necessary if you add borders more than 1 px wide to your sidebars or main content area.

  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 within 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.

 

イヴ サンローラン財布 クロエ バッグ イヴ サンローラン バッグ クロエ 財布 イヴ サンローラン クロエ イヴサンローラン クロエバッグ 新作イヴサンローラン