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;
}
I first wanted to change the font to my favorite, Georgia. My friend taught me that the first font in the list of many is what should show up first. If someone's computer can't display Georgia, it will go to the next one and so on. So I typed in "Georgia' in front of "Tahoma" and now it looked liked this:
ul#page-list li a {
margin:0;
padding:0;
display:block;
color:#eeeedf;
font-family:Georgia,Tahoma, Geneva, sans-serif;
text-decoration:none;
}
Next, I wanted the color to be the same gold as the "blurb" under "Affiliate Newbie Me.com." I found the color here:
h4#site-blurb {
font-family:Georgia;
color:#feb638;
So, I changed the color on the ul#page-list entry, accordingly, and voi~la. Now it looked like this:
ul#page-list li a {
margin:0;
padding:0;
display:block;
color:#feb638;
font-family:Georgia,Tahoma, Geneva, sans-serif;
text-decoration:none;
}
Page Menu Hover Color
Lastly, I thought it would be nice to make the top menu pages change to white when the cursor moved over the titles, like the Header Title text. I found that here:
ul#page-list li a:hover {
color:#db5216;
}
…and typed in "#fff" for the color:
ul#page-list li a:hover {
color:#fff;
}
… and it worked!!
I hope you like the changes.
Time For Bed!
Hooray! I am going to try and unwind so I can get to sleep. I'm taking my kids roller skating tomorrow!
