Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Is it possible to style confiforms controls or forms?

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

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>

 

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

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

How about this for border ...

.confiFormsFormBorder {border: none !important;}

 

and this for background color ...

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

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!

Cool. Glad you got it working.

Like Curtis Freudigmann likes this

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;}

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

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

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>

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Marketplace Apps & Integrations

🤺 Atlympic Event: Partnerships

Hello Community!  Quick disclaimer: We are running a contest on Community (The Atlympics!) from July 23rd - August 8th of 2021. If you are interested in participating in this contest (prizes! ...

93 views 0 6
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you