Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

change check mark color in checkbox

Avatar

Level 5

Hi All.

Is it possible to change check mark color in a checkbox to green and keep font of caption like black? If yes. How it to do?

Thanks.

7 Replies

Avatar

Former Community Member

This is pretty cool - how did you do it?  I thought it was scripting... but I don't see any.  Can you explain?

Avatar

Level 10

You have to manipulate the XML source.

The check box field can have 2 individual <font> elements.

One for the field which affects the checkmark and another for the caption.

In these <font> elements you can have a <fill> element to define the color.

Here's an example:

<field name="CheckBox" y="34.925mm" x="95.25mm" w="43.205mm" h="12.7mm">

            <ui>

               <checkButton size="7.0556mm" mark="cross">

                  <border>

                     <edge stroke="lowered"/>

                     <fill/>

                  </border>

               </checkButton>

            </ui>

            <font typeface="Arial">

               <!-- This fill element controls the color of the check mark -->

               <fill>

                  <color value="255,0,0"/>

               </fill>

            </font>

            <margin leftInset="1mm" rightInset="1mm"/>

            <para vAlign="middle"/>

            <value>

               <integer>1</integer>

            </value>

            <caption placement="right" reserve="28.6mm">

               <para vAlign="middle" spaceAbove="0pt" spaceBelow="0pt" textIndent="0pt" marginLeft="0pt" marginRight="0pt"/>

               <value>

                  <text>Check Box</text>

               </value>

               <font typeface="Arial" baselineShift="0pt">

                  <!-- This fill element controls the color of the caption -->

                  <fill>

                     <color value="0,0,128"/>

                  </fill>

               </font>

            </caption>

            <items>

               <integer>1</integer>

               <integer>0</integer>

               <integer>2</integer>

            </items>

         </field>

Avatar

Level 5

Hi radzmar.

Thanks for replay. Very helpful.

Avatar

Former Community Member

So - I guess I do not understand how to manipulate the "XML source"  I assumed this was javascript on the box.  I will keep looking.  If anone has more info for a layman please pass it along.

Avatar

Level 10

There is no scripting in this example.

All is done in the XML Source in Designer.

In Designer there a several tabs available in Designers workspace.

A Design View, a Masterpages, a XML Source and a PDF-Preview.

Designer creates XML-based forms so all objects you add to a form are written into the XML source, which can also be viewed and manipulated.

Here a screenshot of the example above.

I added a check box and modified it in the XML Source (blue highlighted area) to change the check mark color.

XMLSource.png