Weaver II Snippets

Introduction

The previous Weaver had a fairly large Snippets document. Partly because there are so many new options, and certainly because of the CSS + option for any color option, the need for a lot of snippets has been reduced. Even so, there are some useful CSS tricks you can use to manually tweak your site. Here, in no particular order, are the current available snippets for Weaver II.

 

 

 

There are two ways to add styling. If the styling you want to modify goes with an element that has a color option, you can simply open the CSS+ button next to the color box. But a more common way might be to use the Advanced Options : <HEAD> Section : Custom CSS Rules box. These are added to the <HEAD> section of your site's HTML.

It is also possible to add specific CSS rules on a Per Page basis (follow the ? link from the Per Page options box for help), or for the Mobile View (Mobile tab).

MENUS

 

Hide Divider Lines on Vertical Menu
You can hide the horizontal divider lines on the Vertical Menu Widget using this snippet: 
.menu-vertical, .menu-vertical li a, .menu-vertical ul ul a {
    border: none;
}
Basic Styling for WordPress Custom Menu Widget
This is a start on some very basic styling for the built in WordPress Custom Menu widget 
.widget_nav_menu {clear:both;;margin:0;width:100% !important;overflow:hidden !important;
    margin-bottom:10px;}
.widget_nav_menu ul {margin: 0 !important; padding: 0 !important;
    list-style-type: none !important; list-style-image:none !important;}
.widget_nav_menu a:hover{text-decoration: none !important;}
.widget_nav_menu ul ul li { margin: 0 !important; }
.widget_nav_menu ul ul a {display: block !important; padding: 0px 5px 0px 25px !important;
   text-decoration: none !important;}
.widget_nav_menu ul ul a:hover {text-decoration: none !important;}
.widget_nav_menu ul ul ul a {padding: 0px 5px 0px 35px !important;}
.widget_nav_menu ul ul ul ul a {padding: 0px 5px 0px 45px !important;}
.widget_nav_menu ul ul ul ul ul a {padding: 0px 5px 0px 55px !important;}
Alternate Menu Bar Gradient
You can provide an alternate gradient for the menu bar using this snippet. This snippet overrides the background color. This version is a dark gray gradient. Change the color values for other colors. 
.menu_bar {
    background: -moz-linear-gradient(#383838, #272727);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
	from(#383838), to(#272727)); /* older webkit syntax */
    background: -webkit-linear-gradient(#383838, #272727);
}
Change links font size in simple horizontal menu using weaver_extra_menu Shortcode
Shortcode example: [weaver_extra_menu menu='menuname' style='menu-horizontal' css='width: 100%; text-align: center;border-bottom:1px solid grey;'] Add a CSS rule: 
 .menu-horizontal a {font-size:120%;}
Making the current page Item of that menu bold and a different color 
.menu-horizontal .current_page_item > a,
.menu-horizontal .current-menu-item > a {color:#13538A !important;font-weight:bold;}
Styling the Vertical menu current page
Add a CSS rule: 
.menu-vertical ul li.current_page_item > a,
.menu-vertical ul li.current-menu-item > a  {background-color:#94562C !important;}
Current Page: Menu BG Color
On the Main Options:Menus:Current Page section, open the CSS+ box for "Current Page Text", and add this (and specify whatever color you want): 
{background:#112233;}
Current Page: Menu Hover Color
Add a CSS rule like this (and specify whatever color you want): 
.menu_bar li.current_page_item:hover > a, .menu_bar li.current_page_ancestor:hover > a {background:pink;}
Styling Menus - General Info
Weaver II uses standard CSS rules to style all of it drop-down, pop-left, or pop-right menus. This styling is quite complicated, but can be overridden. The code below shows the default styling use by Weaver II. The definitions that are subject to option settings are indicated with a "/*@" comment.

Note that '.menu_bar' is the default menu class. The two main menu bars (Primary and Secondary) are additionally styled with '#access" and "#access3" CSS ids. The Weaver II Pro pop-left and pop-right vertical menus use the basic '.menu_bar' styling, but are modified with '.weaveriip_vertical_menu', '.menu_pop_left', and '.menu_pop_right' classes.

If you want to modify how the menus look, you can do it in two ways. If you really want to override all menu, re-style the '.menu_bar' rules. If you want to override just a specific instance, you can use a leading class or id the same way '.weaveriip_vertical_menu' does.

Please note that the menu styling included here was copy/pasted directly from the main Weaver II style.css file. That file is subject to updating, and those changes won't always be updated here. For best results, you might want to start with the rules you copy yourself from the style.css file. 
.menu_bar {
	font-size: 120%;	/*@ font size of menu items */
}

.weaveriip_vertical_menu .menu_bar {
	background-image:none;
	font-size:100%;
}
.weaveriip_vertical_menu .menu_bar ul {
	margin-bottom:0px !important;
}
#nav-bottom-menu, #nav-top-menu {
	min-height:38px;	/*@ matches menubar height */
}
.menu_bar div {
	margin: 0 22px;		/*@ margin from left/right */
}

.menu_bar {
	background: #FEB;	/*@ Menu bar bg color */
	color: #000;		/*@ text color */
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 0px;
	width: 100%;
}
.menu_bar ul {
	list-style: none;
	margin: 0 0 0 -10px;
	padding-left: 0;
}

.menu_bar li {
	float: left;
	position: relative;
}
.weaveriip_vertical_menu .menu_bar li {
	float: none;
}

.menu_bar a {
	color: #000;		/*@ link text color on top-level menu item */
	display: block;
	line-height: 38px;	/*@ this and .menu_bar ul ul top should be the same */
	padding: 0 10px;	/*@ padding between items */
	text-decoration: none;
	font-weight:normal;
	font-style:normal;
}

.menu_bar a:hover, .menu_bar a:visited {
	text-decoration:none;
}
.menu_bar ul ul a,.menu_bar ul ul a:hover, .menu_bar ul ul a:visited {
	text-decoration: none;
}

.menu_bar a:visited {
	color:#000;
}

.menu_bar ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 38px;		/*@ menubar height */
	left: 0;
	width: 188px;
	z-index: 99999;
}
.menu_pop_left .menu_bar ul ul {
	top:0px;
	left:-188px;
}

.menu_pop_right .menu_bar ul ul {
	top:0px;
	left:100%;
}
.weaveriip_vertical_menu .menu_bar ul ul li,
.weaveriip_vertical_menu .menu_bar ul li {
	border:none !important;
}

.menu_bar ul ul ul {
	left: 100%;
	top: 0;
}

.menu_pop_left .menu_bar ul ul ul {
	top: 0;
	left: -100%;
}

.menu_bar ul ul a {
	background: #EDA;		/*@ bg color of submenu items */
	color: #000;			/*@ text color of submenu text */
	font-weight: normal;
	height: auto;
	line-height: 18px;
	padding: 10px 10px;
	width: 168px;
}
.weaveriip_vertical_menu .menu_bar ul ul a {
	padding: 10px 10px;
}
.menu_bar ul ul :hover > a {
	background: #875;		/*@ color when hover over sub-menus */
}
.menu_bar li:hover > a,
.menu_bar a:focus {
	background: #875; 		/*@ bg color for menubar hover */
	color: #FEB;			/*@ hover text color, top and sub-menus */
}
.menu_bar ul li:hover > ul {
	display: block;
}
.menu_bar .current_page_item > a,
.menu_bar .current_page_ancestor > a {
	color:#222;			/*@ current page attributes */
	font-weight: bold;
}

 

Change Any Font Size
All the font sizes of various elements in Weaver are expressed as a percentage of a base font size. The default base font size is 12px, which can be changed on the Main Options:Font tab. But it is easy to change the font size of any element that has a color option (eigher color or BG color). Simply open the CSS+ option box next to the color picker. Then, in the box enter a new size for the text contained in that element: 
{font-size: 150%;}
Change the Comment Bubble
Add a CSS rule: 
.entry-header .comments-link a {
	background: transparent url(full-url-for-replacement) no-repeat;
Size should be 28w x 27h, or modify height, width in the rule. Using a transparent .png is a good idea. See style.css for full example of how the comment bubble is defined. Note there is an alternate version used in the rtl.css file (right to left).
Change Margins of Footer Widget Areas
Footer widget areas a automatically sized depending on how many footer widget areas actually have content. These rules may be modified to change the spacing of the footer widget areas. 
#sidebar_wrap_footer {
	padding: 1em 3% 1em 3%;	/* top left bottom right */
}

/* One Footer Widget Area */
#sidebar_wrap_footer.one .widget-in-footer {
	margin-left:4%; /* give extra margins when just one */
	margin-right:4%;
}

/* Two Footer Widget Areas */
#sidebar_wrap_footer.two .widget-in-footer {
	margin-right: 4%;
	width: 48%;
}

/* Three Footer Widget Areas */
#sidebar_wrap_footer.three .widget-in-footer {
	margin-right: 4%;
	width: 30.5%;
}

/* Four Footer Widget Areas */
#sidebar_wrap_footer.four .widget-in-footer {
	margin-right: 2%;
	width: 23.5%;
}
When you make the Footer (#colophon) Last
When you check the "Footer <div> Last" option in the Main:Footer tab, the #colophon area will be logically placed after the #wrapper. You might be in for some surprises. First, the positioning of the #colophon area is no longer relative, so it ends up on the left. And if you change the width, the width of any footer widget areas will auto-adjust to fill the whole width. Same for the copyright/credit info. These three rules are likely to help you get what you want: 
  /* make the footer sidebars the width you want, and centered.
#sidebar_wrap_footer {max-width:800px;margin-left:auto;margin-right:auto;}
  /* same for the copyright/credit stuff */
#site-ig-wrap {max-width:900px;margin-left:auto;margin-right:auto;}
  /* and if you make the Footer last, this will re-center it */
#colophon {position:relative; margin-left:auto;margin-right:auto;}
 
Post Information Line Icons
You can specify your own icons images for the Post Info lines by adding the following CSS. Your icons should be about 20x20 px. You can add padding-left and margin-left to adjust how the icons are positioned. 
.entry-meta-icons .entry-date {
	background: url(full-url/date.png) center left no-repeat;
}
.entry-meta-icons .by-author {
	background: url(full-url/author.png) center left no-repeat;
}
.entry-meta-icons .cat-links {
	background: url(full-url/category.png) center left no-repeat;
}
.entry-meta-icons .tag-links {
	background: url(full-url/tag.png) center left no-repeat;
}
.entry-meta-icons .comments-link {
	background: url(full-url/comment.png) center left no-repeat;
}
.entry-meta-icons .permalink-icon {
	background: url(full-url/permalink.png) center left no-repeat;
}
 
 
Reduce the space between the Post Title and the Post content of weaver_show_post
Add a CSS rule: 
.wvr-show-posts .entry-content {margin-Top:-10px;}
Post Title font size on the full post to be larger than that when displayed on the Page with Posts
Add a CSS rule: 
.page-template-paget-posts-php .entry-title {font-size:150%;}
Adding space after a paragraph in comments
Add a CSS rule: 
.commentlist .comment-content p {margin-bottom: .5em !important;}
Justify text in Excerpt
Add a CSS rule: 
.entry-summary {text-align: justify;}
Styling the Page numbers on a post with Multi Pages
Add/customize the CSS rules below (Multiple pages can be created by inserting <!--nextpage--> in the post where you want to create a new page): 
.page-link {font-weight:bold;background-color: #F0F0D6;padding: 10px 10px 10px 10px;}
.page-link a, .page-link a:link {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;
    border: 1px solid #e7e7e7;color: #1868AD;background-color: #FFFFFF;}

.page-link a:visited {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;border: 1px solid #e7e7e7;
    color: #1868AD;background-color: #FFFFFF;}

.page-link a:hover {border: 1px solid #3b3b3b;color: #3b3b3b;background-color: #FFFFFF;}
.page-link a:active {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;border: 1px solid #e7e7e7;
    color: #e56100;background-color: #FFFFFF;}
Styling the page numbers on the BLOG page
Add/customize the CSS rules below: 
.page-numbers {font-weight:bold;}
a.page-numbers, a.page-numbers:link {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;
    border: 1px solid #e7e7e7;color: #1868AD;background-color: #FFFFFF;}

a.page-numbers:visited {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;border: 1px solid #e7e7e7;
    color: #1868AD;background-color: #FFFFFF;}

a.page-numbers:hover {border: 1px solid #3b3b3b;color: #3b3b3b;background-color: #FFFFFF;}
a.page-numbers:active {padding: 4px 6px 4px 6px;margin: 2px;text-decoration: none;border: 1px solid #e7e7e7;
    color: #e56100;background-color: #FFFFFF;}
Font Weight for Post title
Add a CSS rule: 
.post h2.entry-title {font-weight:normal;}
 
Tweak indent on UL lists in widgets when the bullet style is none.
Add a CSS rule: 
.widget-area ul li {margin-left:1em;}
Paragraph spacing is controlled by:
Add a CSS rule: 
.#content p { margin-bottom: 1.5em;}
Remove space on the left of the menu bar
Add a CSS rule: 
.menu_bar ul {margin-left:-21px !important;}
Make FS contact form plugin fluid
Add a CSS rule: 
#FSContact1 {max-width:100% !important;}
#si_contact_name1 {width:80% !important;}
#si_contact_email1 {width:80% !important;}
#si_contact_subject1 {width:80% !important;}
Put several lines in the footer credit line
Add a CSS rule: 
#site-info {float:none; display:block; width:auto;}
#site-ig-wrap {text-align:center;}
Fiddling with the comment avatars size
There is only so much space to tweak before things don't line up right anymore. Add a CSS rule: 
img.avatar-40 {width:60px;}
img.avatar-32{width:50px;}
Content table border control
Add a CSS rule: 
#content table {border:2px solid #AAA;}
#content tr td {border:1px solid #AAA;padding:5px 10px;}
Underline Link page category titles
Add a CSS rule: 
.widget_links .widget-title {border-bottom-color:#222;border-bottom-width:2px;border-bottom-style:solid;}
Change the Font for the titles in the Sitemap Page
Check your page id number then add a CSS rule: 
.page-id-117 h3 {font-family:"Comic Sans MS",Arial,sans-serif;}
Body Class for each mobile device so you can make your CSS rules selective
Add a CSS rule: 
.weaver-mobile (phones and small tablets)
.weaver-phone (phones)
.weaver-smalltablet (small tablets)
.weaver-tablet (large tablets)
Example to change a rule on a class name class1 only on phone you would use 
.weaver-phone .class1 {…}
Removing the site title on phones 
.weaver-phone #site-title{display:none;}