Forum Discussion

allisonn's avatar
allisonn
Genius
10 years ago

How tell the difference between OOB HTML table and quilt components

Hi everyone,

 

We are working on some redesign of our community was advised to post my question here. We have been told that OOB components that utilize Lithium's quilt architecture are much more flexibile with styling than components utilizing HTML tables. Is there a way to tell which type of architecture a component uses? e.g. through inspect element or something like that?

3 Replies

  • Yes, you can use firebug. The OOB elements have the classes usually stating with 'Lia'

  • allisonn's avatar
    allisonn
    Genius
    10 years ago

    That's not quite what I meant... there are OOB components that use the quilt and some that use tables. Apparently those that use tables are more difficult to do custom styling on and you are better off just using the API. I want to know how can I tell which OOB components use the quilt vs. HTML table.

  • DougS's avatar
    DougS
    Khoros Oracle
    10 years ago

    As you know, there are many OOB components, some of them use quilts (which are XML configuration files that can be edited via the Pages tab in Studio), some of them use either a "grid" or a "render order" XML configuration which are currently not available to edit via Studio or the SDK (but services can edit them).

     

    For the most part, quilts are used to render components for an entire page.  There are some special components that use quilts to render components on a page.  For example, when you are on the Forum Topic Page (the page that displays a thread in a Lithium forum), it uses a special quilt (named the Forum Message page in studio, or res/quilts/ForumMessage.quilt.xml if you are using the Lithium SDK) to render all of the elements of the topic message and for each reply to the topic message on the page:

     

    forum_topic_page.png

     

    You can tell if a quilt is being used, but looking at the HTML of the page and looking for a css class named lia-quilt.  All of the quilt layout rows will have the lia-quilt-row css class, and each of the quilt layout columns will have the css class lia-quilt-column.

     

    "Grids" are xml files that can be used to customize lists of messages that appear in tables, like the one you find on the Forum Page:

     

    forum_page.png

     

    Lithium Professional Services can add grid xmls for these tables that allow you to customize what appears in each cell of the table.  We want to expose the ability for developers outside of Lithium Services to add/modify grids and we may add support for this via the Lithium SDK in the future (this is not on a product roadmap at this point).  These may be the components that you have heard are better just to build from scratch.

     

    Finally, "Render Orders" are XML files that can be used to customize things like tabs on the "my settings" page, Options drop-downs on messages on the Forum Topic Page:

     

    my_settings_tabs.png

    message_options_dropdown.png

     

    Lithium Professional Services can add render order xmls for these that let you add custom tabs or options.  We want to expose the ability for developers outside of Lithium Services to add/modify render orders and we may add support for this via the Lithium SDK in the future (this is not on a product roadmap at this point).

     

    I hope that helps!

     

    -Doug