Streaming live at 10am (PST)

Custom CSS link properties overriding existing link styling for headers


#1

I'm building my website in webflow before transferring it to cloudcannon to allow my client to edit the site without damaging any of the styling.

Therefore I needed to add custom CSS for the site links so that when the client is editing text and wants to add links, they display with a style consistent with the website rather than the default blue & lilac with an underline.

I've been informed that at this point adding custom CSS is the only way to edit a site's master style.

This has been successful except that some of my headers, due to their placement on the site and aesthetic, are links that need to display with different properties. Rather than pink fading to black, these few links need to be black fading to pink.

Once I add in the custom CSS it fixes the body links but overrides these inconstancies in .header-3-links & .header-5-links that I've built into the site using the design builder.

I was informed that copying this code from the stylesheet into the head with the other custom link properties would resolve this issue but unfortunately it hasn't.

How else can I fix this issue?

Read-only and Webflow domain links are below.

Thanks.

http://bleached.webflow.com

https://webflow.com/design/bleached?preview=63db3c9b2bb7ebc6f2e5152794c78f9b


#2

Hi @jcooney89, Thanks for the read-only links and the information. Is there any way we could get some screenshots to better understand what you're trying to achieve? Which classes do you want to override? and what properties are you looking to update?

Thanks in advance! Any info will help a lot smile


#3

The top example is how it should be displaying after loading (when hovered over it transitions to pink).

Below is how it is displaying when the custom code is added (which overrides my original code).

The custom code is only intended to effect body text, as stated in the original post.


#4

Hi @jcooney89, I see where you're coming from now. The styles you've added using custom code can be applied at the body level from inside Webflow (with the exception of a:visited)

But since you are handing this off to someone who may not be able to add links the way you've styled them, you want to override them using custom code. (Hoping I'm understanding this correctly)

This is a valid effort and definitely reasonable given we don't have a secure way for clients and others to edit only content on their Webflow. Perhaps using the specific class names would be more reliable e.g.

<style> 
.heading-5-link:visited {
color:#ea1a7a
}
</style>

Hope this helps a little. @cyberdave any ideas on this?


#5