How do you style a specific aui-buttton, specifically an EntryViewer macro rendered as a button?
Asked by 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!


Answers:
author: Alex Medved _ConfiForms_
body: 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

comments: author: Benjamin Rios
body: Thank you [@Alex Medved _ConfiForms_](/t5/user/viewprofilepage/user-id/781630) 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!


author: Alex Medved _ConfiForms_
body: 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


author: Zoriana Bogutska_Adaptavist_
body: [@Benjamin Rios](/t5/user/viewprofilepage/user-id/5009703)

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

- [Buttons for Confluence](https://marketplace.atlassian.com/apps/1222939?tab=overview&hosting=cloud&utm_source=Atlassian-Community&utm_medium=referral&utm_campaign=Comment_How-do-you-style-a-specific-aui-buttton_20221108)

- [Content Formatting Macros for Confluence](https://marketplace.atlassian.com/apps/247/content-formatting-macros-for-confluence?hosting=cloud&tab=overview&utm_source=Atlassian-Community&utm_medium=referral&utm_campaign=Comment_+How-do-you-style-a-specific-aui-buttton_20221108)

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

Regards,

Zoriana

comments: author: Alex Medved _ConfiForms_
body: 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 :-)


author: Zoriana Bogutska_Adaptavist_
body: Sorry, I haven't noticed that this question is about the ConfiForms app.


Tags: aui

confiforms