Hi, guys, I am struggling to change the hover color of the links. How can I change links color and hover colors on the linked list or any links?
Actually, I have 2 main colors for the links all over the website. One of them for the link and one of them for hover. How can I add these two colors all over the website? (Links, mail links, etc)
The hover color for the links are based off of your chosen link color. You can set them to be lighter or darker than the main link color in the Control Center stack. Foundry does not set hovered link colors to a separate color.
is it not possible with the CSS?
You can definitely add your own custom CSS to the page in the Page Inspectorâs Custom CSS field to target links and their hover states.
is the link must be inside the HTML stack for giving CSS?
No, it does not need to be inside an HTML stack.
If you want to post a link to an page youâre working one and details on what youâd like changed (along with what youâd like to stay as is) and what color youâd like it to be, Iâm sure a few of us would help with the CSS youâd need.
Here it my links on my websites; these are linked list as yo can see. Already custom color I added it but I donât know how to add them to hover color in CSS; I want to add a hover color these phone numbers and the emails.
I thought giving a CSS class these linked list and add them to hover color but I am not sure this is the correct way?
Can you publish a test page somewhere and send a link to a live page?
Donât now how to do that? But here my full page; you can look see the links on the âekibimizâ and iletisimâ page.
Ok, hereâs my suggestion.
First, turn off the âCustom Links Colorâ in the Linked List settings and change each itemâs Style back to âUse Control Centerâ. This makes it easier to customize the colors, since itâs no longer applying the â!importantâ directive to any of the linkâs CSS.
Next, add the class my-link-color in the HTML CSS classes field on the Linked List stack.
Finally, paste this code in either the site-wide of page specific CSS area. Change the color codes for the colors you want.
/* Set Custom Link Colors */
/* main color */
.my-link-color a, .my-link-color a:visited {
color: #66666;
}
/* hover color */
.my-link-color a:hover, .my-link-color a:focus, .my-link-color a:active {
color:#cc0033;
}Thanks to you I learned beautiful things today. Thank you again. 
But I have another question;
If I want to add a new class to the same item, should I separate it with a comma or just space or I canât add a new class for the same item?
Separate them with a space.
If you want to do multiple changes, you could always use one class and change the color and font with the same CSS class.
For example use a class named âmy-linkâ:
/* Custom Link Style */
/* main style */
.my-link a, .my-link a:visited {
color: #66666;
font-weight: bold;
}
/* hover changes */
.my-link a:hover, .my-link a:focus, .my-link a:active {
color:#cc0033;
}
Using two classes or one should both work. I just want to make sure you know you can do multiple things with one class.
Also note that in the CSS above, you only need the font-weight on the base link. The hover state uses that plus any additional CSS included. The above CSS will keep the bold and just change the color on hover.
Thank you again. Now, we are changed all global link colors and links font weight. Alright. What if I want to change one link main color and hover color but we will keep this global settings also. Cause I missed one of my link. I didnât add the same HTML classes for this link cause I used the same color of the background for hover global.
I will give a new HTML classes for this link and use the same CSS settings for this link but this time not inside the global CSS page inside the page CSS? is that correct?
Iâm not 100% sure I followed what youâre trying to do.
Generally, if you want links to have two sets of CSS settings, you can use two different classes and just assign the appropriate class to the link. You can put the CSS code in either place. If you are going to use it on more than one page, then put it in the global area. If youâre only going to use it on one page, then the pageâs CSS area is best.
If you wanted to change all the links, we could probably have done it by just changing the anchor tags (thatâs technically what links are) globally as opposed to using a class that you had to apply everywhere as needed. I though you only wanted the links in those linked lists to be different. In the end, this way is fine, but it might have saved you a bit of work the other way.
One last question. How can I change buttons hover color in form stack?
If you are using the standard Foundry form and only one form on the page, you can try this:
#submit:hover {
background-color: red;
border-color: red;
}
This is in the CSS for the Form stack.
It worked. But when used same style for visited it didnât work WHY?
#submit:visited {
background-color: #647382;
border-color: #647382;
}
I donât think the :visited pseudo class can be applied to buttons, only to links. Probably @elixirgraphics would know better than I do.
Edit: also probable that @DLH knows this.
Iâm not sure I follow what youâre trying to do. Form submit buttons are not visited like a link is. A submit button triggers the form but you donât âvisitâ anywhere.
I donât think youâll ever see a visited state on a form button. What issue are you seeing with the colors after using the CSS @dougmon provided?