Created

Feb 09, 2013

The styles tab

Posted by Feike Visser

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?

style-1

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.

 

style-2

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.

style-3
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

style-4

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.

style-5

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!

@heervisscher

COMMENTS

  • By APK - 10:25 AM on May 31, 2014   Reply
    Many Thanks.
  • By asri - 4:18 AM on Jun 01, 2014   Reply
    good product where i can buy this product?
  • By tidung.net - 5:10 AM on Jun 02, 2014   Reply
    Thanks.
    • By Ibeacons for sale - 5:01 AM on Jun 05, 2014   Reply
      I so want to you can visit. However, I do believe the idea might have to wait until come july 1st. I did not really understand that Serlkay acquired ever before enhanced its sizing. I must say that a succesful loved ones owned or operated organization in this era can be a really refreshing look! Along with this is the really refreshing site!
      • By apk - 11:29 AM on Jun 06, 2014   Reply
        Thanks.
      • By obat sipilis - 6:29 AM on Jun 08, 2014   Reply
        good product where i can buy this product?
        • By Jasa SEO - 11:30 AM on Jun 08, 2014   Reply
          Many Thanks.
          • By Tattoos - 4:37 PM on Jun 08, 2014   Reply
            Many Thanks.
            • By Sound Insulation Testing - 7:11 AM on Jun 09, 2014   Reply
              Everything from tables to beds to chairs is customizable. Plus, it automatically sends orders to manufacturers when a customer makes a purchase.
              • By step up height - Order Now - 9:20 AM on Jun 09, 2014   Reply
                Few days before I brought step up body growth formula but after using this product, and after using this I really gain 3 inches plus it provide energy to fulfill my dream
                • By criminal defense lawyer - 9:30 AM on Jun 09, 2014   Reply
                  Likewise, if you need some product or set up information, it is often much much better to discover your alternatives online than to get in touch with someone and discuss your needs – even if you are working in the area. Thanks to an wide range of mobile cellphone programs and thinking handling, companies can often discover out most of the facts they need, and handle their day, without ever discussing with the house company office.
                  • By mobile responsive landing page design - 10:37 AM on Jun 09, 2014   Reply
                    companies can often discover out most of the facts they need, and handle their day, without ever discussing with the house company office.
                    • By event photos - 11:46 AM on Jun 09, 2014   Reply
                      companies can often discover out most of the facts they need, and handle their day, without ever discussing with the house company office.
                      • By Best Cash Back - 6:38 AM on Jun 10, 2014   Reply
                        companies can often discover out most of the facts they need, and handle their day, without ever discussing with the house company office.
                        • By bestrecumbentbikereviews.net - 6:29 AM on Jun 11, 2014   Reply
                          companies can often discover out most of the facts they need, and handle their day, without ever discussing with the house company office.
                          • By Obat Keputihan - 9:30 AM on Jun 22, 2014   Reply
                            Many Thanks.
                            • By Anonymous - 3:50 AM on Jul 01, 2014   Reply
                              <a href="http://ardhydangia.blogspot.com" title="Tips komputer">Tips komputer</a>
                              • By Rodg - 7:02 PM on Jul 03, 2014   Reply
                                Very helpful tutorial, the illustrations help a big deal, thanks for that.
                                • By airul - 11:00 AM on Jul 06, 2014   Reply
                                  Thanks.
                                  • By zion website - 10:17 AM on Jul 09, 2014   Reply
                                    I think many business owners have often noticed about the key advantages of going natural, but are still reluctant to make the modify.
                                    • By model baju lebaran - 4:38 PM on Jul 12, 2014   Reply
                                      i really to say nice tools from adobe. i like it.
                                      • By cek tagihan pln - 4:38 PM on Jul 12, 2014   Reply
                                        i really look tools from adobe. i like it.
                                        • By mevabe - 2:59 AM on Jul 14, 2014   Reply
                                          Thanks to an wide range of mobile cellphone programs and thinking handling, companies
                                        • By nivea - 3:00 AM on Jul 14, 2014   Reply
                                          Visit the NIVEA site for skin and beauty care advice and discover the latest product innovations. Beauty is care. Beauty is NIVEA.
                                        • By Yamaha R15 indonesia - 9:05 AM on Jul 15, 2014   Reply
                                          i really to say nice tools from adobe. i like it.
                                        • By url opener - 6:24 PM on Jul 15, 2014   Reply
                                          This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work...
                                        • By Palette opinie - 6:25 AM on Jul 17, 2014   Reply
                                          the standard text component into your parsys. But have you ever noticed the "Styles"-tab that is located besides the
                                        • By rob judge unlock her legs reviews - 7:51 AM on Jul 17, 2014   Reply
                                          warming is not to be dealt with by switching to cleaner forms of energy but rather by returning to a pastoral, renewable-powered, and low-energy society. "Real climate solutions," writes Klein
                                        • By duplichecker - 8:00 PM on Jul 18, 2014   Reply
                                          woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that perfect balance between superb usability and visual appeal. I must say you’ve done a very good job with this.
                                          • By does paleo burn actually work - 6:59 AM on Jul 23, 2014   Reply
                                            So let's see how this works based on an example.

                                            ADD A COMMENT