Style ALL <a>'s sitewide

Ask the community
,
1

Maybe I’m missing something, but I can’t find a way to do this.
I’d like to colour all links blue by default.
I don’t see any settings to do it.

I don’t think we can add CSS to the code area.

I tried this (and other variations of this code) with no joy.

//this function is called from $w.onReady  
function fixLinks() {
 let textElements = $w("Text");
 for (var t of textElements){
        console.log(t.html);
        t.html.replace(/<a/g, '<a style="background-color:#ff0000;text-decoration:underline;"');

    }
}

Surely there must be a way to turn all links site-wide blue…?

TIA…

2

You are correct in stating " I don’t think we can add CSS to the code area."

If you want to customize links, you could use the Text screen element and use the available HTML and styling .

3

Thanks @yisrael-wix - can you explain why my code above doesn’t work? I know I can go through with the editor and manually change the colour of each link. But that is a bit silly if say next week we want to change ALL links to a different shade of blue. Or red. On a big site that could take hours, and one or two would probably get missed. What I’m looking for is a simple way to style EVERY link on EVERY page with a couple of lines of code. Like you can do with CSS on a regular site. Or jquery.

4

@yisrael-wix any thoughts on how to style EVERY link on the site so it can be changed easily as the design changes? Without manually going through every link, or having to have separate code for every link? This code should work, according to your answer to another post, but it does nothing - am I missing something?

//this function is called from $w.onReady  
function fixLinks() {
 let textElements = $w("Text");
 for (var t of textElements){
        console.log(t.html);
        t.html.replace(/<a/g, '<a style="background-color:#ff0000;text-decoration:underline;"');

    }
}