01 02 03 04 05 06 07
★ Owner: Kayla
★ Opened: 06/09/17
★ Program: Photoshop CC 2020
★ Version: 13
★ Started Sw: 2005ish
★ Host: Myself
★ Credits: x
home content tutorials holiday contact ov

color code stylesheets tutorial

All Stylesheets look different, so hopefully this helps because it's basically the same concept for them all. I'm using my stylesheet v25 to help with this tutorial. CLICK HERE to use it as a reference. Ok if you look at my stylesheet, it's all shades of grey. This is so you can customize it to YOUR liking. Basically, to match it to your header. This tutorial hopefully will help you understand how to change the colors in a stylesheet. This can work in collage or preppy or blend layouts.

The Steps

1. If you look at the header.php page, the first section you find in the container is the "topper" section. If you look closer to the links in it, you'll see different classes.

2. Ok so you see "top1" "top2" "top3" and "top4"? You want to change the colors of those links. Go to the style.css page. Find the section that looks like a.top1, a.top1:active, a.top1visited.

3. If you want to change the BACKGROUND of the link than find the little background piece of coding. I highlighted it below. Be careful you don't find the "color" section because that is NOT the same as the background. The color is the fonts color

4. Now that you've found it, change where you see #aaa to a color of your choice using the HTML color code of it. (this section of coding is what gives those top links the grey box look) If you don't know how to figure out the HTML colors than visit my color picker page to download a tiny program that instantly gives you the HTML code of any color. It takes two seconds to download and 2 seconds to use. click here for my color picker page

That's it really. top1 changes the background color of this box. It'll go from that grey to whatever you chose

Basically, the classes are NAMES of the links. Each class has styling coding that you change. Incase you didn't understand this, I'm going to do it again with another link below.

1. See the affies links?

2. Find the affie section in the header.php file. Find the class of the affie links.

3. Now go to the style.css page and find the styling for it.

4. Find whatever it is that you want to change the color of.
  • background: #ddd; is the background color of the affie links.
  • color: #aaa; is the color of the font.
  • border-left: 5px solid #ccc; is the little border you see on the left of each of the affie links. #ccc is the color of that border.
  • Change the colors to what you want.

    I hope you understand this now. That's basically what you do for all links.

    ----------------------NEXT SECTION IS FOR COLORING THE LITTLE HEADER SECTIONS, THE H1 or H2 OR H3 AND SO ON --------------

    1. Go to your header.php page. Find what the header you want to change is called. I'm changing the headers in the sidebars color. I outlined what two of them looks like in the header.php page. There are actually 4 in the sidebar of the stylesheet I linked, but they are all labeled as < h5 >. You'll see what I mean in the pic below.
    This is the 4 you'll see in the sidebar: header, elites, affies, comment.

    2. See the < h5 >? That's what you look for in the style.css page. Now go to the style.css page and find the styling for it.

    3. Just like above, change the colors! You should have noticed by now that it's basically the same little pieces of coding every time when it comes to changing a color.
  • backround: #bbb; to change the background color.
  • color: #eee; to change the color of the font.

  • ----------------------NEXT SECTION IS FOR COLORING THE MAIN SECTIONS OF THE LAYOUT --------------

    1. Which one do you want to change the colors of? Let's just say you want to change the colors of the sidebar. Find what the sidebar is named in the header.php file.
    It's usually called div id="sidebar" or div id="rightbar". For some reason I have both names in this stylesheet. Don't mind that. They always have ONE of them. The one thats active in this stylesheet is div id="rightbar"

    2. Now find the styling for the section in the style.css page.

    3. Again, change whatever colors you need to. I'd hope you know how to by now.

    Just a friendly tip, make sure the colors match your header!!! If you need help figuring out colors to use for a collage/blend layout than check out THIS color generator.