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 :
Laurent
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
#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
hi @dimitrilongo
Thank you for your answer.
So far I tried to avoid writing any css, hoping that Grav and Gantry5 would provide all necessary functionalities without the need to customize by writing code.
If I can’t find another solution, I’ll use yours.
Best Regards
Laurent
In Gantry Core Style you can modify Link Colors (see screenshot), i test with links in page content, it works, colors changes
@dimitrilongo
Thanks for your reply.
The link colors for my page are shown here and these are effectively the colors that you can see for the Facebook or Twitter icons. But unfortunately it does not apply to the link in page content.
Laurent
Hello @laurent !
Why don’t you give a try installing the plugin TinyMCE ?
You could add a link and then select it and change the color of it.
In my Grav Gantry fresh install, the color link in my markdown works (see screenshot)
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;
}
@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
