I Changed The Appearance of My Site’s Top Menus All By Myself!

Some seemingly simple tweaks in color, font, and font size took me an hour (or more!) of "playing" to get changes to work on this site, but … I figured it out – all by myself!  I really am learning bits and pieces of html code!  

Here Are the Changes I Made and How:

All you techies out there may have a good laugh at how I struggled with this!

Fellow Newbies:  I hope this helps you with some nitty-gritty Appearance changes and "reading" some code!  I'm giving myself a pat on the back!

Header Title Color

The Header title ("Affiliate Newbie Me .com") was white and changed to an orangey-red color when the cursor moved over it.  I really liked the combination, but the orangey-red color made me feel better, more calm – I thought the white was too stark.  So, I set out to reverse the two – to make the title always appear orangey-red and change to white when the cursor moved over it.

Try it!  You'll see what I mean.

I have learned from my good html-expert-friend that all of these nit-picky appearance changes must happen in the Appearance – Editor – Stylesheet (style.css), which scares the be-gee-bers out of me!  You're probably wondering why I don't just have her do it for me, right?  She has offered me help and has helped me with my first web site, Musiciantip.com (developing very slowly!) and has really customized it for me because she kept telling me, "ANYTHING can be changed, ANYTHING!"  (Do you regret that statement, my friend??)  I really don't want to keep bugging her, and I want to learn to do this stuff on my own.

So I headed on into the Stylesheet, much as my 5-year old boy heads into his room after dark, to see what I could "read".  I will never forget one of my first sessions with my expert friend when we (she) installed a WordPress theme onto my blog.  I was so excited – there was the domain name I had painstakingly chosen displayed across the top, and it was mine!  I even called my Mom on the way home to have her type in the domain and have a look – "I have a web site!!"

Then my friend and I started to tweak.  We wanted to change the font and adjust the centering of the Header Text, so she said, " let me have a look."  She looked at the Stylesheet and started reading – it all just looked like a bunch of type-o's to me.  "Oh, I see what they did," she said, matter-of-factly.  She clicked away some more type-o's (she knew the techinical terms for everything, of course – me, a forward slash, huh?  Now I know it's one of these  /   !) and our changes were done!

I know that "Affiliate Newbie Me .com" is my blog's title, located in the Header, so I searched the Stylesheet "text" for something that might resemble this.  I also figured out that H1, H2 etc… were text headings and the one in the Header is the H1.  A-ha, here's what I found:

h1#site-title a{

color:#fff;

font-size:1.5em;

margin:0 0 0 30px;

}

h1#site-title a:hover {

color:#db5216;

}

I changed the first "color:#fff", which I assumed was white, to the second "color:#db5216," and changed the second color to the first, so now the code "read" like this:

h1#site-title a{

color:#db5216;

font-size:1.5em;

margin:0 0 0 30px;

}

h1#site-title a:hover {

color:#fff;

}

Alas, it worked!  This is so much fun for me and gives me such a sense of power knowing that I can do this, too!

Page Menu Font, Font Size, and Color

I have learned that the Stylesheet reads from the tippy-top of the site on down, so I scrolled above the Header section I'd just edited and found:

ul#page-list li a {

 margin:0;

padding:0;

display:block;

color:#eeeedf;

font-family:Tahoma, Geneva, sans-serif;

text-decoration:none;

}