the Workshop

Here’s an easy one
go to plug-ins
add new
search “PC Custom CSS” and install it
activate it
go to the appearance tab
find the new Custom CSS tab
(that is where you will add any code changes in future so you don’t mess up the theme)

Now here’s what I do, copy your css and open it in a text editor.
Your menu is effected by .access under “Global” less then half way down around line 500
.access ul is the “unordered list” that holds the menu items
.access ul li is the “list items” which is each item of your menu

start by adjusting the margin of the ul
margin:0 auto 0 auto;
that means first number is top, second is right, third is bottom and fourth is left if you weren’t sure.
Make your changes and paste them into the custom css area and save, then in a different window see what happens on the site. Keep doing this and note the changes from what you do.
You could try slowly adjusting left and right and see if that start to center the menu
margin:0 20px; (first number is top and bottom, second number is left and right)

Try that and just get a feel for it, the more you play the easier it becomes.

install a custom css plugin like PC Custom CSS to write your changes.
the menu is effected by

[mod: please mark any posted code and be aware of the forum limit of 10 lines of code]

#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
try margin:0 auto; first to see how it’s changes and try adding something for left and right

#access li {
float: left;
position: relative;
}

you can add padding-left or if you don’t mind
#access li:first-child {
float: left;
position: relative;
}
and and a margin left to nudge it all over.

You could even open the header and add an extra <div> between the .menu and ul giving it a class and using that to center the menu.

in the css go to
/* =Structure
find
#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
background:;
}
this is your widget area on the right
give it
background:#color;

might want to concider adding

border-left:1px dotted #color;
to enhance that effect

install the “PC Custom CSS” plugin so you do your tweaks there without affecting the theme in case something goes wrong.
use google’s “inspect element” to find what css effects the elements so you can copy the style and paste in into the custom css and play from there.

font size is usually under Global settings in the css
Heading is under “Branding”

Try tiny MCE and see if that helps the kitchen sink problem

true, second install the “PC Custom CSS” plugin so you can write your hacks and see how they effect the site.

There are other ways around this issue without effecting the size. Make note that changing the size effects how it looks on EVERY browser.

have you tried going to “appearance” and using the theme options to change the background to lite or white?

I just finished tearing through twenty eleven from one end to the other. The CSS is a monster if you’re not used to it.

Best to start simple until you feel more comfortable. Open the site in Google and right click over something to get the “inspect element” which is Googles built in Firebug of sorts.

Whenever an element looks off, I tend to inspect it with this. The right hand panel will tell you what rules are effecting the element and where you can find it in the css or whatever stylesheet is effecting it. And the bottom of the inspection bar shows the order of the containing elements.
So if you’re trying to fix an element in the header and you hover over the item and go to “inspect” you can find that items property and on the bottom see how its contained like:
div.header div#branding div#site-title ……

Then you can add the new changes noting how it effects the site.

You might want to start with .page-title around line 500 (I alter the code so I don’t know what line it was originally on)
What I found was to change the line height to 1em for starters. Heres what I did

.page-title {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1em;
text-transform: uppercase;
}
.page-title a {
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
text-transform: none;
margin-left:-9999px; /* in the event you don’t want to see the title but leave it for readers */
}

I recently found a trick that might work. I had a client who demanded it look the same in all browsers and have a gradient. Try making a “sprite” .jpg for the link and hover state. Next you have to tweak the css so that IE reads it.

I wound up making a 40px by 10px sprite and uploading it to the media, coping the address and writing the additional code….so for the menu, ul li:link {background:url(wherever it is in the media.jpg) repeat-x center top\9; /* IE 8 and below */}
and then for the hover state the menu background is “center bottom”

Two things to note to get this to work in IE without needing the compatibility mode.
1) you need to add a strict doc type in the header, not the short php version. This stops IE from going into quirks mode.
2) I installed the “PC Custom CSS” plugin and added the code for the IE there.

Might not be the best solution, other then banning IE all together but this actually took care of a lot of issues with the site in all versions of IE.