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?

20 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 "}"

WAD

More than a month ago #Permalink
Can you advise how to change the color after you have hovered? Currently it changes to white!

Paul Frankowski - Staff

More than a month ago #Permalink
Do you mean during hover?

.CLASSNAME a:hover {color: red;}

I have to see where to tell more


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 114
Toufiq

Toufiq

Total Accepted Answers: 86
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 70
Ofi Khan

Ofi Khan

Total Accepted Answers: 50
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 36

121

Templates

315298

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