CSS styling links

Niteshade November 19, 2018

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?

 

2 answers

1 accepted

0 votes
Answer accepted
Niteshade November 20, 2018

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.

Bill Bailey
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 20, 2018

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 January 9, 2019

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
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
January 9, 2019

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.

Rob Stoecklein May 10, 2022

Where is this "CSS style sheet for Confluence"?

0 votes
Christa Elrod May 28, 2020

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

 

For example:


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

or

You can use specific class like

 

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

a.red {
color:red !important;
}

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events