Custom css for links not being seen

Created on 3 November 2023, about 1 year ago

Updated 27 June 2024, 5 months ago

We have a custom CSS created using the W3CSS Color Generator. The theme colors all seem to work however, the one thing the W3CSS generator does not create are link styles.

.w3-theme-l5 {color:#000 !important; background-color:#f4f4f7 !important}
.w3-theme-l4 {color:#000 !important; background-color:#d9dce4 !important}
.w3-theme-l3 {color:#000 !important; background-color:#b4b9ca !important}
.w3-theme-l2 {color:#fff !important; background-color:#8e95af !important}
.w3-theme-l1 {color:#fff !important; background-color:#697294 !important}
.w3-theme-d1 {color:#fff !important; background-color:#464d63 !important}
.w3-theme-d2 {color:#fff !important; background-color:#3f4458 !important}
.w3-theme-d3 {color:#fff !important; background-color:#373c4d !important}
.w3-theme-d4 {color:#fff !important; background-color:#2f3342 !important}
.w3-theme-d5 {color:#fff !important; background-color:#272b37 !important}

.w3-theme-light {color:#000 !important; background-color:#f4f4f7 !important}
.w3-theme-dark {color:#fff !important; background-color:#272b37 !important}
.w3-theme-action {color:#fff !important; background-color:#272b37 !important}

.w3-theme {color:#fff !important; background-color:#4e556e !important}
.w3-text-theme {color:#4e556e !important}
.w3-border-theme {border-color:#4e556e !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#4e556e !important}
.w3-hover-text-theme:hover {color:#4e556e !important}
.w3-hover-border-theme:hover {border-color:#4e556e !important}

.w3-link-custom {color:#cc6633 !important; background-color:#fbf4f4 !important}
.w3-link-hover-custom {color:#ff0033 !important; background-color:#fbf4f4 !important}

We link styles to the end of the css and used the style names in the W3CSS Content Field as:
w3-link-custom w3-link-hover-custom

however the link and hover colors are not being used in the text. All other colors are being used on the site.

I am sure this is from our not completely understanding the link styles. Any help is appreciated. We are trying to structure different configurations for different sites so the custom.css is an important file for us.

Thank you.

💬 Support request

Status

Fixed

Version

2.0

Component

Miscellaneous

Created by

🇺🇸United States markfien

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @markfien
Comment about 1 year ago →
🇺🇸United States markfien
Assigned to flashwebcenter
Status changed to Fixed about 1 year ago4:42pm 4 November 2023

Comment about 1 year ago →

🇺🇸United States flashwebcenter Austin TX

Hello,
The link classes are not applied to anchor tag. You can use each region name and apply the link color.
Example:

#footer-container a,
#main-container a {color:#cc6633 !important; background-color:#fbf4f4 !important}
#footer-container a:hover,
#main-container a:hover {color:#ff0033 !important; background-color:#fbf4f4 !important}

Best wishes,
Alaa

Comment about 1 year ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.
Status changed to Fixed 5 months ago11:14pm 27 June 2024
Comment 5 months ago →
🇺🇸United States flashwebcenter Austin TX

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024