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.
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.
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;
}
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.
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.