Support Forums

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

Your Time: Our Time:

How to change hyperlink color

Featured Lock Resolved Issue
Hi,

How do I go about to change the hyperlink colors? Right now they are all pastel blue but I want to be green. How?

18 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
In Helix3 there are 3 or 4 color presets (preset1.css in your case) and sometimes their values are "stronger" than settings in template area.
That's why I think small css customization is better, please use:

a, .sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a, #sp-bottom a { color: #4196a3; }


I took "green" color #4196a3 from your logo.

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Please follow the below instruction.

1. Extension > Template > Open your template > Presets Tab

http://prntscr.com/cmu0e7

-Thanks

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
you can also use custom CSS for selected hyperlinks areas.
please read: https://www.joomshaper.com/documentation/helix3/custom-code-settings

All major browsers have web-developer mode with show source, used css.

Ronny Ko

More than a month ago #Permalink
Toufiq,

As you can see from the screenshot, I had set the colour I wanted prior to reaching support. Yet, the colour is not the same as what you can see at http://www.mybooks.solutions major hyperlinks. for example, on the menu, it is a cyan blue rather than green.

Please advise.

Attachments (1)

  • Screen Shot 2016-09-27 at 9.16.57 AM.png
    Screen Shot 2016-09-27 at 9.16.57 AM.png 83.6 KB

Ronny Ko

More than a month ago #Permalink
hello Paul, unfortunately, your suggestion isn't the solution. I followed Touqui answer but that isn't the solutions either. do you have another solution?

Paul Frankowski wrote:

Hi,
you can also use custom CSS for selected hyperlinks areas.
please read: https://www.joomshaper.com/documentation/helix3/custom-code-settings

All major browsers have web-developer mode with show source, used css.

Paul Frankowski - Staff

More than a month ago #Permalink
"hello Paul, unfortunately, your suggestion isn't the solution."
My solution is good, for all those people (webmasters) who knows basic of CSS. If not, you have to learn more, a book / video tutorial.
---
You have to add more details to your question.
For example : "I need green hyperlinks in articles, and red hover"
so it that case you have to use:
.item.item-page a { color:#24C055;}
.item.item-page a:hover { color:red !important;}

Ronny Ko

More than a month ago #Permalink
Paul,

Sorry if I insulted your knowledge.

Your answer is contradictory to Touqui's I'm using Helix3. I already set the main link colour to what I want in the Presets. It didn't work.
Your suggestion to go into the CSS and add a change is against Touqui's.

Since Touqui's solutions didn't work either -- did you see my screenshot on my reply to Touqui...you'll see that I want green but on my site, http://www.mybooks.solutions, the hyperlinks are still blue.

No, I do not want any a:hover features.


Thanks,


Paul Frankowski wrote:

"hello Paul, unfortunately, your suggestion isn't the solution."
My solution is good, for all those people (webmasters) who knows basic of CSS. If not, you have to learn more, a book / video tutorial.
---
You have to add more details to your question.
For example : "I need green hyperlinks in articles, and red hover"
so it that case you have to use:
.item.item-page a { color:#24C055;}
.item.item-page a:hover { color:red !important;}

Ronny Ko

More than a month ago #Permalink
This solution works good, Paul. Great answer and great work, bud.

thanks,

Paul Frankowski wrote:

In Helix3 there are 3 or 4 color presets (preset1.css in your case) and sometimes their values are "stronger" than settings in template area.
That's why I think small css customization is better, please use:

a, .sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a, #sp-bottom a { color: #4196a3; }


I took "green" color #4196a3 from your logo.

Ronny Ko

More than a month ago #Permalink
Paul:

I don't know why but after making this small change you suggested, the font color in this page has 2 problems:

1. font color is green-cyan. I removed all color in the SPPagebuilder setting
2. when you over on the text or the title, it goes blue.

What it should be is:
black text for the text and title.
No onhover effect.

url: https://mybooks.solutions/index.php?option=com_sppagebuilder&view=page&id=32#2

Thanks

Ronny

Paul Frankowski wrote:

In Helix3 there are 3 or 4 color presets (preset1.css in your case) and sometimes their values are "stronger" than settings in template area.
That's why I think small css customization is better, please use:

a, .sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a, #sp-bottom a { color: #4196a3; }


I took "green" color #4196a3 from your logo.

MICHAEL WAECHTER

More than a month ago #Permalink
Toufiq wrote:

Hi,

Thanks for your query. Please follow the below instruction.

1. Extension > Template > Open your template > Presets Tab

http://prntscr.com/cmu0e7

-Thanks


That does not work. I'm not sure if you guys have a bad upload or not, but that doesn't change any text.

Toufiq - Staff

More than a month ago #Permalink
MICHAEL WAECHTER wrote:

Toufiq wrote:

Hi,

Thanks for your query. Please follow the below instruction.

1. Extension > Template > Open your template > Presets Tab

http://prntscr.com/cmu0e7

-Thanks


That does not work. I'm not sure if you guys have a bad upload or not, but that doesn't change any text.


Hi, Thanks for your reply. Still now has problem? Please let me know. Thanks

Rob

More than a month ago #Permalink
I'm hoping to change the Product Title colors on one page of my Hope Template to RED - they are currently YELLOW but hard to read.

I inserted the code above, but it also changes the color of the active menu items to RED. (Want the menu items to stay YELLOW)

Is there a way to change the only the Product Titles and leave the menu items as the default color? Thanks.

http://lemonadeteambuilding.com/team-building-activities

Paul Frankowski - Staff

More than a month ago #Permalink
Yes,
Remove "a," (first two letters) from :


a, .sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a, #sp-bottom a { color: #cc0000; }


yes, from your custom CSS code. You have to be more careful.
Browser just do what you program, It doesn't have brain.

Rob

More than a month ago #Permalink
Hi Paul,

Thanks for your quick reply. That changes things - but it's the opposite of what I want. I want the Product Titles to be Red. Any ideas?

Paul Frankowski - Staff

More than a month ago #Permalink
I shown you how to control color of menu items, now 2nd part


.product-title a { color: red;}




Tip for future:
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Rob

More than a month ago #Permalink
Thanks for your help Paul. I figured it out with the clues and google. Here's what I tried and it seems to work...
.j2store-product-list .product-title a { color: #cc0000;}
}

Paul Frankowski - Staff

More than a month ago #Permalink
use only single close "}"


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

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 119
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Toufiq

Toufiq

Total Accepted Answers: 91
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 3
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

295921

Community Users

Newsletter

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