How can i change the color for text on maiin page?

[amebb]

lol you sound so assuring at my skills.... lol If the internet crashes and stops... then you know i have messed up big time lol

OK, let me give it a go... pray to all the internet gods that i dont mess up .... lol

[swguy]

Just wear your lucky socks and hold your mouth right - you'll be fine.

[dbltoe]

I don't want to make it more confusing for you but you also need to consider that this is a link. As such it is controlled by more than just the .greeting class. And is also important when it comes to accessibility standards. Standards require that a link use some form of identification to let it be known without a doubt that it is a link.

A link can have several "events" attached to it. It can just be sitting there waiting to be used, be hovered over, already visited, let you know where you are in the site, etc. Each oof theswe events can have a different style attached to it. It can also have text decoration such as underline to show that it is a link. You can even change the mouse image which you often see on a site. And, more than likely, there is a class in your stylesheet specifically for links and link events that may override any settings you add to the site specific stylesheet.

A very concise explanation of all this can be found at https://www.w3schools.com/css/css_link.asp.

Again, I don't want to make it seem like an unsurmountable task, but you have hit one of the more important and involved areas of website compatibility.

If you will let us know the URL of your site and the color you are wanting, we can be very specific about what to put in the site specific stylesheet.

Let's get it right in one shot versus possibly unknowingly creating problems down the road.

Use something like yoursitedDOTcom if you don't want the entire world on your doorstep just yet.

[amebb]

I don't want to make it more confusing for you but you also need to consider that this is a link. As such it is controlled by more than just the .greeting class. And is also important when it comes to accessibility standards. Standards require that a link use some form of identification to let it be known without a doubt that it is a link.

A link can have several "events" attached to it. It can just be sitting there waiting to be used, be hovered over, already visited, let you know where you are in the site, etc. Each oof theswe events can have a different style attached to it. It can also have text decoration such as underline to show that it is a link. You can even change the mouse image which you often see on a site. And, more than likely, there is a class in your stylesheet specifically for links and link events that may override any settings you add to the site specific stylesheet.

A very concise explanation of all this can be found at https://www.w3schools.com/css/css_link.asp.

Again, I don't want to make it seem like an unsurmountable task, but you have hit one of the more important and involved areas of website compatibility.

If you will let us know the URL of your site and the color you are wanting, we can be very specific about what to put in the site specific stylesheet.

Let's get it right in one shot versus possibly unknowingly creating problems down the road.

Use something like yoursitedDOTcom if you don't want the entire world on your doorstep just yet.

Thank you so much for yur explanation regarding what i am trying to achieve.

For me before i started this thread i thought the task of changing colour of the text on the main page was a straight forward process. My understanding of this has changed and i do understand the complexities of what is involved, so i truly appreciate everyones help here.

Okay, so.... I have a website that is selling goods that are aimed for the Adult market. Not p0rn or anything sleazy, just silicone toys. If anything like this causes offense to anyone, i do apologise in advance.

The URL is.... https://www.kinkyx.com

Thank you for your assistance.

[dbltoe]

Okay, you have three examples of a link that should be discussed.

1. the log yourself in?
2. the "up to 30% off" image
3. the Shop by Brand [more] sidebox heading.

1. The existing color (#007bff) can be controlled in several places BUT you must keep in mind that you cannot hover on a mobile phone or tablet. If you were to make the text match the body color of #000000 (black), visitors would have no way of knowing it is a link. Currently, the color hints at a link and hovering over the text not only changes the cursor to a finger point but the link text is "decorated" by being underlined. It appears that you tried to change the color to #0000a0 in the ZCA Bootstrap Colors under Tools but there may be an extra character there as it is showing:

a {    color: #0000a.;
}

Note the . at the end of the hex code and no sixth digit. If your desired color change is "#0000a0", then replace the . with a 0. That darker blue would certainly let the customer know that there is probably a link there. You might want to make it #570057 to match your other color scheme. Note that changing this with Bootstrap colors will also change it for the product links under things like the New Products for October. Hence the suggestion to use #570057. Also, #007bff does not satisfy the minimum contrast for accessibility.

2. Remember that search engines cannot "see" an image. If there is text embedded in an image, it will not be seen by Google and probably won't be presented to a user visiting your site with a screen reader. You need to utilize the alt tag to let Google and the screen readers know that this is an offer of 30% off on your first order. You will probably see an immediate increase in signups and you will clear an accessibility error. Of course, that brings up the subject that you have an additional image in the Have you seen ... sidebox with the same problem and a lower % off for joining.

3. As it stands, the Shop by Brand [more], Reviews [more] sidebox, New Products [more], and the Specials [more] sidebox headings are letting folks know that there is a wat to get to "more" information.

Extra Credit: Your images are HUGE! Just one that I checked is nearly 35M! There is a free product at https://www.irfanview.com/ that can do the work for you. Open an image, drop the size to no more than 250px in width or height, change the DPI to 72, and save the image in a new folder to upload later via FTP. Your current page load for desktop is 1.1 seconds and 5.9 seconds on mobile. All do to image size.

Summary:

I would just set the a link color to #570057 in the Bootstrap Colors, fix the alt tags on images, and resize the images. That will jump your ranking and page scores tremendously. Your mobile Lighthouse scores are 75, 96, 96, 100. Guess which score is effected by image size.

[balihr]

It's actually easier than you'd expect. Once you copy the file and rename it (as swguy already explained), which is really simple if you use cPanel's File Manager, just edit the file and add the following (you can edit in File Manager using the Edit button):

<style>
    .greeting a {color: #570057;}
</style>

Save the file and you're done, just refresh your site and you'll see the color of the link is now matching the color of your panel headings.

[amebb]

Okay, you have three examples of a link that should be discussed.

1. the log yourself in?
2. the "up to 30% off" image
3. the Shop by Brand [more] sidebox heading.

1. The existing color (#007bff) can be controlled in several places BUT you must keep in mind that you cannot hover on a mobile phone or tablet. If you were to make the text match the body color of #000000 (black), visitors would have no way of knowing it is a link. Currently, the color hints at a link and hovering over the text not only changes the cursor to a finger point but the link text is "decorated" by being underlined. It appears that you tried to change the color to #0000a0 in the ZCA Bootstrap Colors under Tools but there may be an extra character there as it is showing:

a {    color: #0000a.;
}

Note the . at the end of the hex code and no sixth digit. If your desired color change is "#0000a0", then replace the . with a 0. That darker blue would certainly let the customer know that there is probably a link there. You might want to make it #570057 to match your other color scheme. Note that changing this with Bootstrap colors will also change it for the product links under things like the New Products for October. Hence the suggestion to use #570057. Also, #007bff does not satisfy the minimum contrast for accessibility.

2. Remember that search engines cannot "see" an image. If there is text embedded in an image, it will not be seen by Google and probably won't be presented to a user visiting your site with a screen reader. You need to utilize the alt tag to let Google and the screen readers know that this is an offer of 30% off on your first order. You will probably see an immediate increase in signups and you will clear an accessibility error. Of course, that brings up the subject that you have an additional image in the Have you seen ... sidebox with the same problem and a lower % off for joining.

3. As it stands, the Shop by Brand [more], Reviews [more] sidebox, New Products [more], and the Specials [more] sidebox headings are letting folks know that there is a wat to get to "more" information.

Extra Credit: Your images are HUGE! Just one that I checked is nearly 35M! There is a free product at https://www.irfanview.com/ that can do the work for you. Open an image, drop the size to no more than 250px in width or height, change the DPI to 72, and save the image in a new folder to upload later via FTP. Your current page load for desktop is 1.1 seconds and 5.9 seconds on mobile. All do to image size.

Summary:

I would just set the a link color to #570057 in the Bootstrap Colors, fix the alt tags on images, and resize the images. That will jump your ranking and page scores tremendously. Your mobile Lighthouse scores are 75, 96, 96, 100. Guess which score is effected by image size.

Thank you so much for your detailed explanation. I will follow the steps and try to complete them correctly.

Thank you