nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSS styling links

Niteshade

Case:

Custom CSS with some nice color for the links, structured as classes - like:

.green{}
.red{}

If I edit a page and edit the source code of the <a> tags that I am interested in, I am unable to set the class to one of my custom ones. class="red" is being omitted when I save the page.

I am able to change ALL links in the entire browser by setting a custom color to the entire <a> tag in the CSS, like:

a {
color: red;
}

However that is not what I want - I want be explicit about what links I wanna color.

Also I notice that my custom class is in the source code when I am in edit mode of a page, but as soon as I hit the Save button it gets omitted from the final HTML. Why?

Accepted answers

Niteshade

Alright so I managed to fix this problem on my own. Here are the details on how to color specific anchor (a) tags:

-Add class="yourClass" to the tags that need to be changed. You do this by editing the source code on a page ( <> button in top right corner)
-Add a CSS style sheet macro to the page
-The attribute you want to customize are these two:
.wiki-content X.yourClass a
.wiki-content X.yourClass a:hover

In the above case, X is the tag that your a-tag is wrapped around. In my case I use text set to the H1 tag and then I use them for the linking. If you want to use a paragraph instead just write .wiki-content p.yourClass a

The pseudo-class :hover is only necessary if you want a special color when the user hovers the mouse over the link.

All comments

Niteshade

Bill Bailey

There are two problems with that solution:

It may get stripped by Confluence at some point
Requires a lot of manual effort.

A more durable solution would be a user macro to apply a class to all the contents of the body's macro, then you can have the CSS styling in the space/global stylesheet.

Kris Fininen

Hi Bill - can you explain a bit more? What is the "body macro" and how would we apply a class to its contents?

Bill Bailey

If you want to change it space/system wide, you can edit the CSS style sheet for Confluence.

If you just want a section/link styled a certain way, then you need to create a user macro. For example:

## Macro title: Link Macro
## Developed by: Bill Bailey
## Date created: 2019.01.09
## Version: 0.1

## @noparams

<style type="text/css">
Mylink.a {
  color: red;
}
</style>

<a href="$body" target="_blank" class="MyLink">$body</a>

No when you insert the macro, you just past your url into the user macro body.

You could also convert the HTML to have inline style (rather than CSS and class), and add a parameter to select the color, so one macro can be used to set different styles of links.

Christa Elrod

To color specific anchor(a) tags, you can also use inline CSS code

For example:

<a href="link" style="color:red">anchor text</a>

You can use specific class like

<a href="link" class="red">anchor text</a>

a.red {
color:red !important;
}

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence