How do I add a background color to the AUI Button Hyperlink macro?

Karie Kelly
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.
May 29, 2014

The AUI button hyperlink macro is part of adaptavist content formatting premium package.

I wanted to use it instead of the round rectangle macro because it is nicer when the button is a link to something else.

However, i cannot figure out how to use the ID and Class properties to change the button background.

I thought the class would be something like: #background {background-color: D1A0A0;}

and the ID would be something like either background or id="background".

But, no matter what I do, I cannot get the background color to change. Anyone have ideas on how to do so? Thanks!

1 answer

0 votes
Davin Studer
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.
May 29, 2014

I believe this is what you are looking for.

.contentf.aui-button {background: #D1A0A0};

Davin Studer
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.
June 3, 2014

Does this work for you.

Lesley Wilson July 25, 2019

Hi Davin,

I'm also trying to change the colour of my button/s using the ‘Button Hyperlink’ Macro.

Can you please confirm what I need to do to use your answer above?

Do I enter in as follows or am I missing something?

ID: id="background".
Class: .contentf.aui-button {background: #D1A0A0};

With #D1A0A0 being the hex value of my choice. 

Davin Studer
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.
July 25, 2019

No, you need to add a style macro to the page and put the CSS rule in the body of the style macro. Looks like the CSS classes have changed a bit since I originally answered.

.contentf-button.aui-button {background: #D1A0A0};

Adding it to the ID or Class attributes won't do anything. 

Lesley Wilson July 25, 2019

Thanks I'll do this!

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events