I’ve recently started using the weaver theme for WordPress.
One of the biggest mental hurdle to jump over, is to not directly alter the CSS stylesheet, but to use the CSS sections under the main options menu of the Weaver Admin panel, and in some cases, the <head> section of Advanced Options
However, I did find that using google to find the correct snippet of CSS code really didn’t work well, since most people go straight to altering the CSS stylesheet.
But I soon found out how to “uncover” the correct CSS on my own.
A good example was the menu bar along the top of:
I added the CSS:
{font-size:180%}
to the CSS sections for “Menu Bar text”, “Menu Bar hover” and “Menu Bar current page”
This made the menu font just the right size I wanted.
However…
The drop down menu was a fixed width, so the sub menu words were wrapping around, causing an ugly mis-alignment of the gradient background.
The solution:
I found someone who mentioned changing the #access and #access2 section in the stylesheet, but I decided to carefully look at the stylesheet myself (Appearance -> Editor)
The stylesheet is reasonable well documented, so I went to the menu section of the stylesheet, looking for something about “width” and a size of about 100 to 300 px (pixels)… which is what I guessed was the width of existing sub menu.
it didn’t take long to find a section that looked like this:
#access ul ul,
#access2 ul ul,
#access3 ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
padding-left:0px;
float: left;
width: 180px;
z-index: 99999;
}
So, what I wrote in the Advanced Options -> <head> was:
#access ul ul {width:240px;}
#access2 ul ul {width:240px;}
#access3 ul ul {width:240px;}
I was close: that altered the menu width, and the background shadow, but the gradient background hadn’t increased in width.
Another look at the stylesheet showed this code:
#access ul ul a,
#access2 ul ul a,
#access3 ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
So I also added the following code to the <head> section:
#access ul ul a {width:220px;}
#access2 ul ul a {width:220px;}
#access3 ul ul a {width:220px;}
Bingo!
Just the right width!
However, some alterations are more difficult than others.
Ultimately, more comprehensive documentation (or even more meaningful variable names), would make this process a lot easier.
I mean, why call sub menu widths: “access”, why not just call it “sub-menu-width”?