Skip to content
Grav 2.0 is officially stable. Read the announcement →
Themes & Styling

Unable to change color of links

Started by Laurent Lefol 8 years ago · 7 replies · 1708 views
8 years ago

Hello,
I am learning how to use GRAV and Gantry5.
Can someone help me on the following issue ?:
I can modify the color of links such as the Facebook or Twitter icons by going to "Link Colors" in the Styles of the appropriate Outline.
But I cannot modifiy the color of other links such internal references to other pages.
As an example, look at http://devgrav.cooplameute.fr/

My expectation was that the link "Participez aux réunions publiques d'information" should be yellow like the Twitter or Facebook icons and Hover color should be red. But as you can see this is not the case.
Can someone explain me why ?

Nota: The link on the example is repeated twice. The second time with the following syntax :

Participez aux réunions publiques d'information

Laurent

8 years ago

hi @laurent

I'm not really aware of Gantry, but as i can see in gantry docs you can customize css :

navigate in the directory structure to ROOT/user/data/gantry5/themes/THEME_DIR/scss and create a file called custom.scss

CSS
#g-header a {
    color: #dce617;
}
#g-header a:hover {
    color: #e0166e;
}

change only in custom.scss because when re-compile change in custom.css will be lost and/or overridden when the custom.scss file recompiles, see here

Maybe a Gantry Guru will have another solution.

Hope that help

8 years ago

In Gantry Core Style you can modify Link Colors (see screenshot), i test with links in page content, it works, colors changes

02|690x240

8 years ago Laurent Lefol @dimitrilongo Thanks for your reply. The link colors for my page are shown here and these…

In Gantry, the button colors are controlled by the Accent Colors, not the Link Colors. If you change the Accent Colors, you will achieve the result you are hoping for. But if you do not want to change your Accent Colors, then you will have to insert a custom.scss file into your project and add the following:

.button {
background: #dce617;
}

.button:hover {
background: #e0166e;
}

8 years ago

@dimitrilongo
Thanks for your reply. It is very useful. I probably changed something during my trials that prevents the links to be colored as I expect. I will search again.
Laurent

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Sebadamus, 1 week ago
5 154 1 day ago
Themes & Styling · by martynfoster735, 1 week ago
1 196 1 week ago
Themes & Styling · by Justin Young, 3 weeks ago
1 242 3 weeks ago
Themes & Styling · by Slebeig, 1 month ago
4 377 1 month ago
Themes & Styling · by Pedro M, 4 months ago
4 748 3 months ago