How do you style a specific aui-buttton, specifically an EntryViewer macro rendered as a button?

[Benjamin Rios]

Hi everyone,

I am fairly new to Confluence and have minimal experience with web development (CSS/HTML).

With that said, I have been attempting to style a single button on one of my confluence pages but have been running into a road-block.

I currently have a "Confiforms View Control (EntryViewer) macro which is rendered as a button. My goal is to change the color of this button.

Here is what I have tried:

First,

.aui-button { 

--aui-btn-bg: #36B37E; 

--aui-btn-text: #FFF; 

--aui-btn-border: #006644; 

}

As expected, the css above changed all of the buttons on the page to the specified style.

Next, I attempted to point the css at a specific button with the following:

.aui-button.specificButton { 

--aui-btn-bg: #36B37E; 

--aui-btn-text: #FFF; 

--aui-btn-border: #006644; 

}

I then went to the "CSS Styles" of the EntryViewer macro and tried to add the class with the following:

class: specificButton !important; 

The above did not nothing so I also tried:

class: specificButton 

which also did not cause any changes.

Finally, I tried the following:

.specificButton { 

--aui-btn-bg: #36B37E; 

--aui-btn-text: #FFF; 

--aui-btn-border: #006644; 

}

Once again, I went to the "CSS Styles" of the EntryViewer and tried:

class: specificButton !important;

which did nothing,

then again tried:

class: specificButton

which also did nothing.

Any guidance/example on applying css to specific buttons would be greatly appreciated.

Thank you! 

[Alex Medved _ConfiForms_ · Accepted solution]

Hi

You can try to target specifically the entry viewer buttons 

<style> 

button[id^="i_confiform_view_button_"] { 
  --aui-btn-bg: #36B37E; 
  --aui-btn-text: #FFF; 
  --aui-btn-border: #006644; 
} 
</style>

 Alex

[Benjamin Rios]

Thank you @Alex Medved _ConfiForms_ my problem has been solved. Just out of curiosity, is there anywhere in the confiforms documentation I could go to read up on the different ways I can style view buttons etc? 

The page I have been using thus far is: https://aui.atlassian.com/aui/5.9/docs/buttons.html

Thank you again!

[Alex Medved _ConfiForms_]

Honestly, we think that you should *never* change the default styling.

As only this way you can be sure everything being tested and works, and creates a good UI experience for your users

But yes, ConfiForms uses Atlassian AUI and the best way to see what can be customised is looking at the Atlassian AUI documentation

Alex

[Zoriana Bogutska_Adaptavist_]

@Benjamin Rios 

As an alternative you can try ready-to-use solutions for button macro from the marketplace:

- Buttons for Confluence

- Content Formatting Macros for Confluence

The last one is developed by my team, so let me know if you have questions. 

Regards,

Zoriana

[Alex Medved _ConfiForms_]

Not sure how this info could help to style a component in the ConfiForms app, but it's fine :) May be it helps others in some way :-)

[Zoriana Bogutska_Adaptavist_]

Sorry, I haven't noticed that this question is about the ConfiForms app.