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_

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