WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Chaning Link Colour (15 posts)

  1. Neil Guevara
    Member
    Posted 6 years ago #

    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!!

  2. Neil Guevara
    Member
    Posted 6 years ago #

    Any help on this one guys?

  3. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Neil,

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

  4. Neil Guevara
    Member
    Posted 6 years ago #

    Thanks for taking the time mate! Heres the link

  5. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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.

  6. Neil Guevara
    Member
    Posted 6 years ago #

    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.

  7. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    You're very welcome. :)

  8. Neil Guevara
    Member
    Posted 6 years ago #

    Hmm my header has now gone a little off centre, now its way to the right :(

  9. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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.

  10. Neil Guevara
    Member
    Posted 6 years ago #

    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.

  11. Neil Guevara
    Member
    Posted 6 years ago #

    According to browser shots my face is only half there in most browsers :(

  12. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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>
  13. Neil Guevara
    Member
    Posted 6 years ago #

    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?

  14. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    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 800x600 or the much more common 1024x768, 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. :)

  15. Neil Guevara
    Member
    Posted 6 years ago #

    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 ;)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags