We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

how and where to change the effects or styling of color of the links in headers and other text links

Featured Lock Resolved
Please help me change the EFFECTS or darkening/lightening of the color of the headers (h1, h2, h3) and other links in the main content and modules.
It is currently darkened or lightened based on the chosen link color in the template. What I want to have is the reverse or interchange - for the default link color to be the color of the links normally then get it darkened when the mouse hover the links.

Please see attached images. I want the chosen color of the link to be as is, and only lightened or darkened when the mouse hovers it.


Note: edited to clarify my issue.

Attachments (2)

  • hovered.JPG
    hovered.JPG 18.8 KB
  • normal.JPG
    normal.JPG 17.9 KB

6 Answers

Jakir hasan - Staff

More than a month ago #Permalink
Hi, Go to template following path "templates\shaper_helix_ii\less" . Open preset.less file. From here you can see the color coding.


Jakir hasan - Staff

More than a month ago #Permalink
Hi, Go to the template parameter. Here have option to change presets color. See the documentation http://docs.joomshaper.com/component/k2/item/45-helix-ii



More than a month ago #Permalink
Thanks Jakir. I have already seen that documentation but it doesn't help me in what i need to change.

Again, what I want to happen is for the chosen link color to be exactly that color, no darkening or lightening. The present styling is changing the color of the links to a darker tone. When you hover over the text links, that is only when you will see the chosen color.

I need to replace the effects - from darker to plain/natural color when the text links are normal and then it gets darker when the mouse hovers over it.

I guess it's with the less folder but i'm really not sure. Please help. Thanks again.


More than a month ago #Permalink
Would you mind giving an example please. I see "darken" and "lighten" but I just couldn't find the exact line that control those text link colors. :-(

Thank you very much.

Jakir hasan - Staff

More than a month ago #Permalink
Hi ,
See the preset.less line no. 16 for link color

//Link color
a:not(.btn) {
color: darken(@link_color,20%);
&:hover {
color: @link_color;

Just delete darken and lighten then you will get exact color....


There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us