How to handle cq component with same html structure and different css?


Tags: css,jsp,adobe,cq5

Problem :

I have 2 jsps for 2 cq components that have the same html structure but the css is different.

  • What are the best practices for refactoring in this case?

One scenario would be to have a single component and set the css classes based on some input provided by the author in the dialog (component type 1, component type 2), but this gets messy cause I need to do the if checks and set different values for the css classes. It becomes even more complicated if I add a 3rd component with the same html structure and different css.



Solution :

I would suggest to use one of next approaches:

  • Create base component with html structure and for each design create components which have sling:resourceSuperType of base component. And in child components you can override css file with specific one. Base component should be made of (at least) 2 jsp files:

    • container with some class (unique among different designs) which contains include of actual component content. This class then should be used in you selectors in css file. Like .container-design-1 .title {}. This container also can be overwritten in child components.
    • jsp with content.
  • Also you can still use component dialogue, but populate dropdown menu with available designs dynamically. For example, you can have some servlet+service which looks into repository and collects available clientlib categories for this component. And during rendering you will include selected clientlib category, set unique class for your container and use it in css selectors (like in previous approach).

Also in both cases html and id/class names of elements should be the same, and only styles implementation is different.


    CSS Howto..

    Load More / Show Less issues using jquery

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How can I create a postage stamp border?

    how to place bg image with css

    How to change the Img tag src through css only? [closed]

    Hovering over navigation link to show a separate div

    How to force elements to be in middle?

    How to expand text to full DIV width

    How to center dropdown menu under parent tab?

    How to draw heart with text in middle?

    How to display a list in horizontal groups of li elements?

    How to calculate gradient color replacements?

    How to make the underlines the same size in all browsers with css?

    How to remove the arrows in a scroll bar through CSS

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    How do I change phpmyadmin font size for sql query box?

    How to do “display = block” using jquery for particular element

    Don't understand how to control css elements with jQuery css

    How to apply a single line of CSS to an external iframe?

    How to position
    below rest of elements

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    How to Move Parent Div Position using css on hover

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to change in all css “#xxx” to “#000” [closed]

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    How to put text in the upper right, or lower right corner of a “box” using css

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to set min-height of div to height of viewport?

    How to vary shade of specific table row id