• Resolved neil-guevara

    (@neil-guevara)


    Hey guys, i need some help with something.

    I want to be able to change the colour of my links appearing within my blog. Currently there is only one setting but i would like to attribute different colours to different types of link. In this case i want my post titles to be black and the links within the post red. I have no idea how to do it, ive added my stylesheet here so maybe someone could help with it. Your help would be great!!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter neil-guevara

    (@neil-guevara)

    Any help on this one guys?

    Neil,

    Can you give us a link to a live site perhaps? It makes it easier to make sure the proposed changes will work.

    Thread Starter neil-guevara

    (@neil-guevara)

    Thanks for taking the time mate! Heres the link

    Hey Neil,

    Here you go:

    For the Post titles, I’d change this:

    .titles a:link, .titles a:visited, .titles a:active {
    text-decoration: none;
    underline: none;
    font-size: 24px;
    font-weight: normal;
    border-bottom-width: 0;
    }

    to:

    .titles a:link, .titles a:visited, .titles a:active {
    text-decoration: none;
    color: #000;
    }

    You can see it’s quite abbreviated – that’s because there are several repeat styles in there that are already assigned further up the style chain, so to speak, like:

    .titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; underline: none;}

    You can probably nix a few of the unnecessary entries in above entry too making it:

    .titles { font-weight: normal; font-size: 24px;}

    If you want to give your title links a hover style, you might try something like this:

    .titles a:hover {
    color: #666;
    text-decoration:underline;
    }

    Hope that helps.

    Thread Starter neil-guevara

    (@neil-guevara)

    sewmyheadon, it worked an absolute treat, THANK YOU SO MUCH!!!

    You know your code, maybe you could help me with one last thing, this thread has the info, its simple, or at least for someone who knows their code.

    You’re very welcome. πŸ™‚

    Thread Starter neil-guevara

    (@neil-guevara)

    Hmm my header has now gone a little off centre, now its way to the right πŸ™

    The header looks fine to me in Firefox 3. What browser are you using?

    An ‘aside’ (pardon the pun, considering your other thread), you have a bunch of validation errors on your page and I’d encourage you to fix them as they can have an effect on cross-browser/platform rendering.

    Thread Starter neil-guevara

    (@neil-guevara)

    My theme is heavily hacked to pieces, id love to fix them, i really would, but me and code are not good friends, i need to get a book hehe. Im using firefox 3 BTW. The header just needs to be a little to the left, thats all.

    Thread Starter neil-guevara

    (@neil-guevara)

    According to browser shots my face is only half there in most browsers πŸ™

    Not sure what to tell you on this, really. Your banner image is placed directly into the code with an image map and it’s over 1220 pixels wide, so it will get truncated on smaller monitors.

    I’d try wrapping your header image and image map stuff inside a div called ‘branding’ and try to position it better using CSS.

    Like this:

    <body>
    <div id="branding">
    <img src="http://photoneil.net/wp-content/themes/pure_passion/images/header.gif" alt="header" width="1260" height="280" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="320,103,458,155" href="http://photoneil.net" />
    <area shape="rect" coords="397,156,522,205" href="http://photoneil.net/contact" />
    <area shape="rect" coords="355,206,485,257" href="http://photoneil.net/category/gallery" />
    <area shape="circle" coords="780,193,64" href="http://julespage.photoneil.net" />
    </map>
    </div>
    Thread Starter neil-guevara

    (@neil-guevara)

    Ive added your code, seems to have the same effect as before, ive added it to browser shots to get a better idea, need to wait though. Thank for your help mate, any luck on the asides?

    Yeah, I see that.

    Actually, it wouldn’t change anything by itself. I was hoping that we could use some ninja CSS to change the position of the header.

    Try this:

    #branding {width:1220px;margin:0 auto;}

    This will center your header image above the content area.

    Your mug will still be cut off when viewing at resolutions like 800×600 or the much more common 1024×768, but it’s viewable at widths of 1280 or larger.

    Personally, I’d have constructed the template without such a huge header and wouldn’t have used an image map, but an absolutely positioned unordered list of links.

    So, my short answer is this is probably the best you can do without reworking your theme a bit.

    Another option would be to modify the width of that header image, cutting off some of the textured ‘dead’ space on the left. You’d have to revamp your image map coordinates, though.

    Hope that helps. πŸ™‚

    Thread Starter neil-guevara

    (@neil-guevara)

    It does help mate, i was going to cut the image off a bit and see if that helped, not sure if it would though as the style sheet is telling to to go top right. hm ill try a few things out and see what happens, ill hit you up with the result πŸ˜‰

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Chaning Link Colour’ is closed to new replies.