Link Color

Permalink
I am using the Inspiration Black theme for my new site. When I use the Amiant Image Gallery in one of the blocks, the hyperlink navigation is almost impossible to read because of the light grey color on the white background.

The Inspiration Black does not come with the ability to change the link colors in the Theme Customize options.

Anyone have suggestions on how to change the link color?

 
Doki replied on at Permalink Reply
Doki
I am unfamiliar with Inspirations Black, but do you get the message "This theme contains no styles that can be customized." or do you get customization options but just no link choices. If the latter, do you see a button entitled "Add your CSS"? If so, just click this button and hand type in the css you want to use. Since I don't know your level of CSS familiarity, I've included some sample lines below (apologies if you do know your CSS)

a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }


If you don't have the "Add your CSS" button, you have to change it directly in the code. Let me know if you need help in this case...
danmarr replied on at Permalink Best Answer Reply
Thanks for your reply. When I click Customize, it just says "This theme contains no styles that can be customized."

I am not a CSS guru. I can get in there and muck around, if I know the right file to muck with. I looked through the folder structure in my web space, and there are a couple of different places with "Theme" folders and a variety of different main.css files. So I'm not sure which one to muck with.

./concrete/theme (doesn't have a inspiration black subfolder)
./themes (doesn't have any subfolders)
./packages/inspiration_black/themes/inspiration_black (this one has main.css but it doesn't seem to change anything when I muck with that one)
tallacman replied on at Permalink Reply
tallacman
You can also add css to any page by putting it in the page attributes as "Add extra header content" while in edit mode. You'll need to wrap that in a set of <style>…</style> bookends but it’s a good way to add something just on one page.
danmarr replied on at Permalink Reply
Thanks for the suggestion. I went to properties on the page while in edit mode, and I added the following to extra header content:

<style>
a:link {color: #FFAE01; text-decoration: underline; }
a:active {color: #FFAE01; text-decoration: underline; }
a:visited {color: #FFAE01; text-decoration: underline; }
a:hover {color: #FFAE01; text-decoration: none; }
</style>

After saving, exiting edit mode, and refreshing, there was no change in the link colors on the page. I changed the link colors to an Orange color to make them stand out, but there was no change. Perhaps I did something wrong?
Doki replied on at Permalink Reply
Doki
Try clearing both your browser cache and your C5 cache (in the dashboard).

Otherwise, you got me stumped -- you might want to try Firebug to see exactly where the page is gettin its CSS from....
Doki replied on at Permalink Reply
Doki
Odd, your guess that ./packages/inspiration_black/themes/inspiration_black is the place to edit the CSS directly is correct. You must have some other CSS code overriding this.

You could take the time and use firebug to find the offending CSS, but tallacman's method is probably the best on a short time budget. In case you're unfamiliar, to so what tallacman suggested go into edit mode on the page, select Edit Page->Properties->Custom Attributes You'll see "Header Extra Content" under the Custom Attributes dropdown. Click it, and a new textbox should appear at the bottom of the window. Add your new CSS there (within the <script> tags as tallacman points out) and that should solve your issue.

The only drawback is that this needs to be done for each page. Therein, you might want to set this as an auto-attribute when each page is created.
danmarr replied on at Permalink Reply
Thanks for all of your help, both of you. I found it!!

It was in ./packages/inspiration_black/themes/inspiration_black in the typography.css file.