Docs

[jensjakobsen]

Hi

I need to change the layout of links of the body text area. Basically I need the layout to look like match “normal web standard” (blue text color, underlined, red on hover, and purple once clicked) , so that people actually identify the presence of links in a text.

Please take a look at http://kvikkastrup.net.virker.nu/svoemning-2/ – there is a link in the second paragraph, the final word “her”.

But when looking on the text, it’s not clear that there is a link.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body a { color:#0000FF;text-decoration:underline;}
body a:visited {color:#800080;}
body a:active,body a:hover  { color:#FF0000;}

Hope that helps.

[jensjakobsen]

It worked ‘a little too good’ – please take a look at http://kvikkastrup.net.virker.nu as this CCS also affects the widget area (TOC on the right side). Can this be excluded?

[Christian]

Please change body to .x-main. Remember to include the .

Thanks.

[jensjakobsen]

Worked like a charm! Thanks!

[Paul R]

You’re welcome! 🙂

[jensjakobsen]

Ops! Just saw that this neat trick could help me in the footer area as well – sorry for not mentioning it earlier!

How can I make sure that the above applies to my links in the footer? I need links general to be visible unless they are in my TOC/sidebar area.

[Joao]

HI There,

Update the provided code to :

.x-colophon.top  a, body a { color:#0000FF;text-decoration:underline;}
.x-colophon.top  a:hover, body a:visited {color:#800080;}
.x-colophon.top  a:active,.x-colophon.top  a:hover, body a:active,body a:hover  { color:#FF0000;}

Hope it helps

Joao

[jensjakobsen]

Hi again – this works ‘a little too well again’:

– Sidebars and headers should have X-theme layout
– Text/main-area and footers should have default web layout (underlined links etc.)

Please take a look at: http://kvikkastrup.net.virker.nu/

[Friech]

Hi There,

The custom CSS code Paul’s provide above should do the trick. Lets just tweak it a little bit.

.x-main a, footer.x-colophon a { color:#0000FF;text-decoration:underline;}
.x-main a:visited, footer.x-colophon a:visited {color:#800080;}
.x-main a:active, .x-main a:hover, footer.x-colophon a:hover  { color:#FF0000;}

Cheers!

[Author]

Posts