Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,300,892
Community Members
 
Community Events
165
Community Groups

CSS styling links

Edited

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

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 Community Leader Nov 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.

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 Community Leader Jan 09, 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.

Where is this "CSS style sheet for Confluence"?

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
Community showcase
Published in Confluence

An update on Confluence Cloud customer feedback – June 2022

Hi everyone, We’re always looking at how to improve Confluence and customer feedback plays an important role in making sure we're investing in the areas that will bring the most value to the most c...

391 views 2 13
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you