Need help? Check out our Support site, then


Help with Black Letterhead

  1. So I'm one of the morons who decided to upgrade without being adept at CSS (1 section on it in college...5 years ago)

    Anyway, I started out with the Black Letterhead template because I thought it looked closest to what I'm ultimately going for. I've hashed out at least the very basics, but the hovering has got me stumped.

    Basically all the websites I've checked for tutorials tell me to do this:
    A:visited {color: #FFBF00; text-decoration: none}
    A:link {color: #FFFF00; text-decoration: none}
    A:active {color: #C0FFC0; text-decoration: none}
    A:hover {cursor: crosshair; color: #C0FFC0; background-color: lightslategray; text-decoration: none}

    But the stuff I'm trying to change looks like this:
    h1, h1 a, h1 a:hover, h1 a:visited, .description {
    text-decoration: none;
    color: #FD5A1E;
    }

    h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
    color: #E4D3A6;
    }

    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }

    I'm just going through this stuff bit by bit, doing things trial and error. Please excuse me if this is a really dumb question. I just can't get rid of the "orange" that is embedded in the template somehow.

    Please take a look and tell me how far off i am.

    Thanks.

  2. Not 100% sure as I don't use this theme and haven't memorized the color scale, but I think the problem child would be the following if you are talking about the links:

    a, h2 a:hover, h3 a:hover {
            color: #FD5A1E;
    	text-decoration: none;
    	}
    
    a:hover {
    	color: #707070;
    	text-decoration: underline;
    	}

    Trent

  3. This should get all links to appear the way you specified in your example code:

    <br /> a:link, h2 a, h3 a {color: #FFFF00; text-decoration: none}<br /> a:visited, .entry p a:visited, h2 a:visited, h3 a:visited {color: #FFBF00; text-decoration: none}<br /> a:active {color: #C0FFC0; text-decoration: none}<br /> a:hover, h2 a:hover, h3 a:hover {color: #C0FFC0; background-color: lightslategray; text-decoration: none}<br />

    (crosshairs on links aren't a great idea from an accessibility point of view, but then neither is aqua on a light grey background, so feel free to put it back in if you really want it)

    I don't know whether you also wanted to change the widget titles in the sidebar, but to make them yellow too you'd use h3 {color: #ffff00;}

  4. Thanks that worked...I didn't want all the junky colors on it - the particular tutorial I copy-pasted from used loud colors so you could see what was going on.

    Thanks a million!

Topic Closed

This topic has been closed to new replies.

About this Topic