This blog­post is about how to use the default rich-text-com­po­nent 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­at­ed to meet a cer­tain style require­ment, but if you take a step back it is just a Text-com­po­nent 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” that you can con­fig­ure (take /content/geometrixx/en/toolbar.html as an exam­ple)?

With this styles tab you can spec­i­fy the styling of your com­po­nent.

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

An exam­ple

So let’s see how this works based on an exam­ple.

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

Screen Shot 2016-04-22 at 9.51.27 PM

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

In this case the author can spec­i­fy two set­tings: “Spac­er” and “Text Style”.

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

Screen Shot 2016-04-22 at 9.54.10 PM

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 class­es 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 dif­fi­cult.

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-fold­er and is stored per tem­plate. So you have mul­ti­ple style-def­i­n­i­tions in your project, and the author will only see the ones that are applic­a­ble.

At this loca­tion you can see the style-def­i­n­i­tions for the Geometrixx-appli­ca­tion : /etc/designs/geometrixx/jcr:content/contentpage/par/text

Screen Shot 2016-04-22 at 9.55.24 PM

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 com­po­nents

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 sling:resourceType “cq/gui/components/authoring/dialog/componentstyles”

Screen Shot 2016-04-22 at 9.58.19 PM

Con­clu­sion

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

And the best is; *with­out* new code or new com­po­nents!

@heervisscher

0 comments