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; } } }

Can I use a CSS class to style a wiki markup link?

Dee Scarano

I'd like to style a wiki markup link inline using a class defined in the global CSS.

What I was expecting to be able to do in wiki markup is something like this:

[link text|http://link.com|class=classname]

If it helps make it clearer, the equivalent HTML for what I'm trying to do would be this:

&lt;a href="http://link.com" class="classname"&gt;link text&lt;/a&gt;

Any suggestions?

Accepted answers

SarahA

Hallo Dhyana

There are two ways I can think of:

Enable the HTML macro, and then use it: https://confluence.atlassian.com/display/CONF35/HTML+Macro Note the security implications mentioned on that page. (I'm linking to the Confluence 3.5 docs because of your reference to wiki markup. Let me know if you're on Confluence 4.x)
Or write a user macro of your own: https://confluence.atlassian.com/display/CONF35/Writing+User+Macros

I hope this helps.

Cheers, Sarah

All comments

SarahA

Hallo Dhyana

There are two ways I can think of:

Enable the HTML macro, and then use it: https://confluence.atlassian.com/display/CONF35/HTML+Macro Note the security implications mentioned on that page. (I'm linking to the Confluence 3.5 docs because of your reference to wiki markup. Let me know if you're on Confluence 4.x)
Or write a user macro of your own: https://confluence.atlassian.com/display/CONF35/Writing+User+Macros

I hope this helps.

Cheers, Sarah

Dee Scarano

Thanks Sarah, I'm actually using Confluence 4.2 but the link is in a global styling area which is why the wiki markup.

I had thought of using the HTML macro but, upon checking the system plugins in the Confluence Admin console, I saw that the {html} macro has been superceded by {html-xhtml} so I'll give that a go.

Thanks so much.

Matthew J. Horn

If you dont want to write a macro, you could also use jQuery. Something like this would add a classname attribute to an <a> tag:

AJS.$("a").attr('class','classname');

You add this in your Custom HTML panel in the Admin.

If you wanted to only touch specific anchor tags (such as external links), you could do this:

AJS.$("a[class='external-link']").attr('class','classname');

Steffen Heller

If you don't mind misusing the link title attribut in a real bad way you could do the following:

Write this into your wiki page:

[link text|http://link.com|green]
[link name|http://link.com|red]

Write this into your CSS export stylesheet

a[title=green] {
color:green;
}
a[title=red] {
color:red;
}

The result on the html page will be this:

&lt;a href="http://link.com" title="green"&gt;link text&lt;/a&gt;
&lt;a href="http://link.com" title="red"&gt;link text&lt;/a&gt;

and the apperarence of the links in the PDF file will be according to the formats in the CSS export stylesheet.

The result will be the same as with a class but off course it is against the real intention of the title attribut.

Welcome!

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

Quick Links

Find more posts tagged with

confluence

css

markup