Is it possible to style confiforms controls or forms?

[Curtis Freudigmann]

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

[Davin Studer · Accepted solution]

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>

[Curtis Freudigmann]

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]

How about this for border ...

.confiFormsFormBorder {border: none !important;}

[Davin Studer]

and this for background color ...

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

[Curtis Freudigmann]

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]

Cool. Glad you got it working.

[Sarabjeet Kaur]

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_]

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]

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

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

[Davin Studer]

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>

[Curtis Freudigmann]

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