Is it possible to style confiforms controls or forms?

Curtis Freudigmann July 26, 2018

I have been using Confiforms to fulfill a number of request portals for my organization. I am working on an internal site and must abide by company branding standards and I would like to A) change the background of a Confiforms form and B) change the background or text color of the form registration button.

I have tried targeting the CSS using the built in style sheet and have looked into Vertuna's documentation to no avail.

Any help would be greatly appreciated.

(Also happy National Intern Day to all my fellow interns)

-Curtis

3 answers

1 accepted

1 vote
Answer accepted
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 26, 2018

You could use the stylesheet macro included with the Content Formatting for Confluence add-on to change the background color. Another option would be to create your own stylesheet user macro. Below is how you could create it.

Macro Name:
stylesheet

Macro Title:
Stylesheet

Macro Body Processing:
Unrendered

Template:

## Developed by: Davin Studer
## Date created: 7/26/2018
## @noparams

<style type="text/css">
/*<![CDATA[*/
$!body
/*]]>*/
</style>

 

0 votes
Curtis Freudigmann May 29, 2019

Has anyone been able to successfully modify Confiforms Form border color or background color. I have tried to target multiple ids and classes with the style sheet with no luck so far.

Thanks

-Curtis

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, 2019

How about this for border ...

.confiFormsFormBorder {border: none !important;}

 

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, 2019

and this for background color ...

.confiFormsFormContent, table[id^="i_registrationFormTable"] tr {background: #AAAAAA !important;}
Curtis Freudigmann May 30, 2019

Hey @Davin Studer I have tried that. I tried the first one to change border-color and i wasn't able to get it to work but on another try it seems to work. As for the background color I ended up going about it a different way. I kept that background white and changed the color of my page to an offwhite to give contrast that way. Thanks for your answer!

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 30, 2019

Cool. Glad you got it working.

Like Curtis Freudigmann likes this
Sarabjeet Kaur July 8, 2021

Hi @Davin Studer ,

I am used to working with macros but have never played with the source editor hence I am not sure where should I add the below text shared by you. I just want to get rid of the border line and the grey background of Save button.

.confiFormsFormBorder {border: none !important;}
Alex Medved _ConfiForms_
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 8, 2021

You can either use HTML macro and place this into the <style></style> tags or use space stylesheets and put the space-wide CSS rule

https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html

Sarabjeet Kaur July 8, 2021

Is this how you are suggesting me to use the command shared by Davin

html.JPG

P.S, I want to get rid of the border around the confiform and the grey background of Save button

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 8, 2021

This is a user macro that I created for our environment to hide certain pieces of ConfiForms. This user macro allows you to hide the frame around the form. You can create user macros in Confluence Administration -> User Macros.

Macro Name:
confiforms_hide_elements

Macro Title:
ConfiForms Hide Elements

Macro Body Processing:
No macro body

Template:

## Developed by: Davin Studer
## Date created: 10/08/2015

## @param Admin:title=Hide Admin Menu|type=boolean|default=false|desc=This will hide the admin menu for the form.
## @param Meta:title=Hide Entry Meta Data|type=boolean|default=false|desc=This will hide the entry meta data button.
## @param Panel:title=Hide Form Panel|type=boolean|default=false|desc=This will hide the form panel.
## @param Title:title=Hide Form Title|type=boolean|default=false|desc=This will hide the form title.

#set( $d = '$' )
#set( $p = '#' )

<style type="text/css">
#if($paramAdmin && $paramAdmin == true)
.confiFormsFormBorder + .aui-button.aui-style-default.aui-dropdown2-trigger, .aui-button.aui-style-default.aui-dropdown2-trigger[aria-controls^='admin']  {display: none !important;}
#end

#if($paramMeta && $paramMeta == true)
${p}showEntryMetadata {display: none !important;}
#end

#if($paramPanel && $paramPanel == true)
.confiFormsFormBorder {border: none !important;}
.confiFormsFormContent {padding: 0 !important;}
.confiFormsFormFooter {background-color: #FFFFFF !important; padding-left: 0 !important;}
#end

#if($paramTitle && $paramTitle == true)
.confiFormsFormTitle {display: none !important;}
#end

input[readonly='readonly'] {background: #f5f5f5 !important; color: #999999 !important;}
</style>
0 votes
Curtis Freudigmann July 26, 2018

Update:

Confiforms registration controls section has a CSS line to enter styling effects. So that answers problem B, however, I am still looking for a way to change form background colors.

-Curtis

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events