Tagged: CSS, hover, hyperlink, hyperlink color
- This topic has 3 replies, 2 voices, and was last updated 7 years, 4 months ago by Theme Horse Support Team.
-
AuthorPosts
-
June 21, 2017 at 4:00 pm #51861embrunaParticipant
Hi all, I am having some trouble with hyperlinks. I used some custom CSS in the theme options to narrow down the issues; the code is below:
In the theme options the navigation color is set to #1f2596 (BLUE). If you look at this page you can see that:
1) Not all of the hyperlinks are the same color. For instance in the footer under “Affiliations” two of the links are the color set in the theme options (BLUE), two of them are the color that is set in the custom css below (GREEN). Most of the hyperlinks in the main text of the pages and posts are the CSS-set color but not all.
2) Some of the hyperlinks only have color when you hover over them. When you do hover over them, they come up BLUE. I want the hyperlinked text to always be in color and use the CSS-set color. (to see this hover over “(2) Github Repository” in the first bullet point)
MY QUESTION: What gives – why are different hyperlinks being treated differently? What CSS do I need to have the hyperlinked text with a color different from the theme’s navigation text color, and how do I set it so it is always on (instead of just on hover?)
—
The following custom CSS helped me id the situations in which there was a problem.a:link {color:#237422;
}a:hover {
text-decoration:none;
color:#237422;
font-weight:bold;
}June 22, 2017 at 11:33 am #51884Theme Horse Support TeamKeymasterHi Embruna,
Theme main built-in default color code is
#89a452
(green) which treat as a color skin so that the user can easily change the color skin to their own corporate color via color skin option but this will not reflect to the list elements.
First remove the css code that you have paste and to set the same color for list elements go to Appearance > Customize > Ambition Theme Options > Custom CSS and paste the below CSS code then click on Save button.#main ul a, #main ol a, #main ul a:hover, #main ol a:hover { color: #050466; }
Change the above color code
#050466
manually to the skin color you choosed.It seems like you have set color skin to
#050466
(dark blue) and want to set the different color for the links in the main content section rather then the color skin that you have choose then paste the below CSS code in Custom CSS option then click on Save button.a, #main ul a, #main ol a, #main ul a:hover, #main ol a:hover { color: #050466 !important; }
Change the above HEX color code
#050466
to your own HEX color code that you wish to have it on links.Thank you!
June 23, 2017 at 1:43 am #51889embrunaParticipantHi – thanks, but that didn’t work.
June 30, 2017 at 12:05 pm #51954Theme Horse Support TeamKeymasterHi Embruna,
Apologies for the late reply.
Please remove the below CSS code that you have paste in custom CSS option.
a:link { color: #1f2596; }
and paste the below custom CSS code which will change the list colors.
#main ul a, #main ol a, #main ul a:hover, #main ol a:hover { color: #050466; }
Change the above color code #050466 to set your own color.
Hope the above code will help you to set the list color. If you have any problem then let us know.
Thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.