All Link Colours

15 posts from 4 voices

• Started 2 years ago by newprodigy
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   newprodigy
   Member

   Hey group, I haven't quite found what I need in other threads so I thought I better start a new one. I'm in need of playing with the link colours for the 'dark' avisio theme. I need to change all link colours outside of the footer and main navigation links (i.e. general content links, side-bar links, portfolio post header links and so on).

   I've hunted through style3.css, which I think is where these styles should be located, but alas, nothing. If anyone can point me in the right direction that would be excellent.

   Thank you.
   Robb.

   Posted 2 years ago #
2. 

   Fox Web Design
   Member

   Yeah Im trying to find the same, I found this post which i thought was talking about link colours but ends up talking about background colour.

   http://www.kriesi.at/support/topic/link-color#post-8821

   Please help as soon as possible.

   Posted 2 years ago #
3. 

   Dude
   Dude

   To change the link color open style3.css and search for following code:
   

   a{
   color:#818ea1
   }
   
   a:hover{
   color:#98adcb; text-decoration:underline;
   }

   change it like:

   a{
   color:#818ea1 !important;
   }
   
   a:hover{
   color:#98adcb !important; text-decoration:underline;
   }

   and choose any color value you like.

   Posted 2 years ago #
4. 

   newprodigy
   Member

   Hey Dude, that's great, thanks. The change did impact the footer link colors and main navigation link colors but I've almost got that straightened out.

   I can't find the css for the main navigation sub-header link colors for hover states (the little text blurb under the main link item). Can you tell me where I can find that please?

   Thanks,

   Posted 2 years ago #
5. 

   Dude
   Dude

   Hey,
   just use following code in style1/2/3.css:
   

   .nav li a:hover span{
   color: #000;
   }

   Posted 2 years ago #
6. 

   Fox Web Design
   Member

   Dude, where and how do i change the footer link colours starting at #E6E6E6 moving to on hover over #FFFFFF

   http://www.foxwebdesign.com.au

   Thankyou

   Posted 2 years ago #
7. 

   Dude
   Dude

   Hey,
   I changed it for you.

   Posted 2 years ago #
8. 

   mobetta
   Member

   Hi there - Could you explain how to change the link and text color ONLY in the top footer? I have the stylesheets 1-3 all edited like this for my background color and the existing font and link color for the dark skin 3 is just right everywhere, but not in the top footer.

   I tried adding !important the the a and a hover color info at the top of the stylesheets and separating .footer and #top.footer a and a hover to two lines of code with the colors I think will work, but it didn't change anything. The link colors aren't readable on the background the client wants. How would I go about doing this? If I edit it in the widgets it will change all of them and then the sidebar won't be readable. And for some reason, the text on the footer widgets on the home page are a different color than those on the other pages of the site and I didn't change anything for font colors just the background.

   Please could you explain how to change these links only in the columns of the top footer? The client is anxious to put his new site up and can't until this issue is solved.
   Thanks:)

   Posted 2 years ago #
9. 

   Dude
   Dude

   Hey,
   I've used following code in style1.css:
   

   .footer a{
   color:#E6E6E6 !important;
   }
   
   .footer a:hover{
   color:#fff !important;
   }

   if it doesn't work for you please post a link to your website so that I can view your css code.

   Posted 2 years ago #
10. 

    mobetta
    Member

    Hey Dude - thanks for the assistance :)

    I put that code into stylesheet 1 and it didn't change anything. I also tried adding #top in front of your .footer because that's where I need the colors to change. Naturally, having tried this already it didn't work either. When you see the site you'll see that the footer links are just right but the top footer links are in need of being darker.

    Look at the footer columns on Home and then at those on any other page. The font changed to page font color on home and no where else on the site. How do I put it back to the existing color font in the top footer of home? Don't even know how such a thing is possible.

    The site is being built at: http://witnword.com/preview2

    Thanks! Looking forward to getting this to look as great as the rest of the site

    Posted 2 years ago #
11. 

    Dude
    Dude

    Hey,

    I just saw that you're using style3.css - so you need to use the css code there. Please clear your browser cache - sometimes there're leftovers which affect the design.
    

    .footer a{
    color:#E6E6E6 !important;
    }
    
    .footer a:hover{
    color:#fff !important;
    }
    .footer{
    color:#333 !important;
    }

    Posted 2 years ago #
12. 

    mobetta
    Member

    Thanks Dude - we're getting somewhere!

    The home page is still retaining the original body content colors though in the top footer and the bottom footer. I cleared the cache and that didn't change it in my standard Chrome browser. Checked it in Firefox and its the same issue there with a cleared cache. All pages changed but home. Only IE reflects all pages having footers with the same colors of text and links.

    Plus, the bottom footer text is too dark and has disappeared on the pages the changes took effect on Chrome and Firefox, and all of them on Internet Explorer.

    With the dark skin stylesheet and any color being usable for the fully customizable background, there has to be a way to separate the text and links colors - both a and a:hover, just as there is a way to code footer widgets separately from sidebar widgets. How do I stop the home page from reverting to the body text and link colors on FF and Chrome? And how do I separate the top footer and bottom footer color coding so it works? Nothing I've tried so far does anything to correct that issue.

    Posted 2 years ago #
13. 

    Dude
    Dude

    Hey,
    the link color has changed (Firefox) so I think the code I posted is correct, To change the color of the footer text use following code:
    

    .footer strong{
    color:#333 !important;
    }

    Posted 2 years ago #
14. 

    mobetta
    Member

    Thanks Dude

    I changed the link colors because e6e6e6 and fff was just too bright. All pages but Home - or some reason there is in the code for this area but only on home. How does that happen?

    Your footer strong code does the trick to over ride what ever made all text in the top footer columns on the home page do this.

    Now my only issue is the text color in the dark stripe of the bottom footer. I tried this but it didn't change the bottom footer text:

    #top .footer a{
    color:#665D50 !important;
    }

    #top .footer a:hover{
    color:#56647b !important;
    }

    #top .footer{
    color:#333 !important;
    }

    #top .footer strong{
    color:#333 !important;
    }

    .footer strong{
    color:#CCBB9F !important;
    }

    .footer a{
    color:#7A705F !important;
    }

    .footer a:hover{
    color:#818ea1 !important;
    }

    What am I doing wrong in separating these two areas of text?

    :) Thanks - I can't wait to be done with this project!

    Posted 2 years ago #
15. 

    Dude
    Dude

    Hey,
    I investigated your site with firebug but your code works for me:
    

    #top .footer a {
        color: #665D50 !important;
    }

    and i.e.
    

    #top .footer a:hover {
        color: #fff !important;
    }

    should change the text color in the dark stripe of the bottom footer. But you can also try:
    

    #top .footer strong a {
        color: #665D50 !important;
    }
    
    #top .footer strong a:hover {
        color: #fff !important;
    }

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.