The styles tab
This blogpost is about how to use the default rich-text-component for all the style requirements you have in your project. Quite a lot of times you see that new components are created to meet a certain style requirement, 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 numerous times the standard text component into your parsys. But have you ever noticed the "Styles"-tab that is located besides the "Text"-tab?
With this styles tab you can specify the styling of your component.
In the surrounding <div /> the classes will be set that you choose from the styles tab.
An example
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 sidekick into the page. When you have added the component click on the Styles-tab.
So perhaps this is the first you see a Styles-tab that is not empty.
In this case the author can specify two settings: "Spacer" and "Text Style".
What I going to do is to enter some text, and change the settings in the Styles-tab.
This is the result when you inspect the HTML:
This is my quote
What you see in the surrounding DIV is that two classes are added that where chosen from the Styles-tab.
So with this approach you can influence the style of the text via the CSS and the author doesn't has to do anything that is difficult.
Styles definitions
Next question is then "where are these styles stored?", the style information is stored in your design-folder and is stored per template. So you have multiple style-definitions in your project, and the author will only see the ones that are applicable.
At this location you can see the style-definitions for the Geometrixx-application : /etc/designs/geometrixx/jcr:content/contentpage/par/text
The style definitions are all made up from nt:unstructured nodes, the parent should be named as cq:styles. Under that node you can create the select-lists with the values that you can choose.
Custom components
You can also use this mechanism for your custom components, the only thing you need to do is to add a new tab in your Dialog with the xtype of "componentstyles".
An example can be found in the dialog that is used for the Text-component : componentstyles.
Conclusion
With this mechanism you use both the power of the standards components and the power of CSS. And there is way to create a right text/component styling for all the areas you have in your application.
And the best is; *without* new code or new components!
So is there any way, to glue these styles onto the component itself - independently from the page where it is used?
Thanks for your comment. What you also can do is the define styles that can be used within the rich-text-editor. Maybe that is what you are looking for.