This blog­post is about how to use the default rich-text-component for all the style require­ments you have in your project. Quite a lot of times you see that new com­po­nents are cre­ated to meet a cer­tain style require­ment, but if you take a step back it is just a Text-component with some extra styling.

The styles tab

I am sure you have dragged numer­ous times the stan­dard text com­po­nent into your parsys. But have you ever noticed the “Styles”-tab that is located besides the “Text”-tab?

With this styles tab you can spec­ify the styling of your component.

In the sur­round­ing <div /> the classes will be set that you choose from the styles tab.

An exam­ple

So let’s see how this works based on an example.

Go to this page (/content/geometrixx/en/toolbar.html) from the Geometrixx-application, and drag a Text-component from the side­kick into the page. When you have added the com­po­nent click on the Styles-tab.

So per­haps this is the first you see a Styles-tab that is not empty.

In this case the author can spec­ify two set­tings: “Spacer” and “Text Style”.

What I going to do is to enter some text, and change the set­tings in the Styles-tab.

This is the result when you inspect the HTML:

<div class=“text_quote text par­base spacer_both sec­tion”>
<p>This is my quote</p>
</div>

What you see in the sur­round­ing DIV is that two classes are added that where cho­sen from the Styles-tab.

So with this approach you can influ­ence the style of the text via the CSS and the author doesn’t has to do any­thing that is difficult.

Styles def­i­n­i­tions

Next ques­tion is then “where are these styles stored?”, the style infor­ma­tion is stored in your design-folder and is stored per tem­plate. So you have mul­ti­ple style-definitions in your project, and the author will only see the ones that are applicable.

At this loca­tion you can see the style-definitions for the Geometrixx-application : /etc/designs/geometrixx/jcr:content/contentpage/par/text

The style def­i­n­i­tions are all made up from nt:unstructured nodes, the par­ent should be named as cq:styles. Under that node you can cre­ate the select-lists with the val­ues that you can choose.

Cus­tom components

You can also use this mech­a­nism for your cus­tom com­po­nents, the only thing you need to do is to add a new tab in your Dia­log with the xtype of “componentstyles”.

An exam­ple can be found in the dia­log that is used for the Text-component : componentstyles.

Con­clu­sion

With this mech­a­nism you use both the power of the stan­dards com­po­nents and the power of CSS. And there is way to cre­ate a right text/component styling for all the areas you have in your application.

And the best is; *with­out* new code or new components!

@heervisscher