AEM | text | CSS styles | cssName

[wim_van_den_bra]

Hi, 

we started from the tutorial http://dev.day.com/docs/en/cq/5-6/administering/configuring_rich_text_editor.html#Styles (Tables and Table Cells) but we are stuck because of some limitations when using the cssName. 

Below a description of what we are trying to establish and what we learned so far: 

• we configured a number of styles and these styles do show up properly in the drop down list when using the text component. Please find attached an image, depicting how to configure the cssName. 
• when we apply the style, AEM produces following HTML, be aware of the span tag: 

<span class="about-intro-txt"><b>Our Company</b> is able to help because of ...</span>

• ​because of the way the CSS has been designed, we want the HTML to be the following. Please note the div tag and the multiple divs.  

<div class="about-intro"><div class="website-width"><div class="about-intro-txt"><b>Our Company</b> is able to help because of  ...</div></div></div>

Please find a snippet of the CSS below. We can obviously  include all the properties in the style with the name "about-intro-txt" but we are not in favor of this approach since configuration would be duplicated (by example the website-with is used for other elements as well). 

.about-intro { background: #f4f5f5; padding: 40px 0; font-size: 30px; line-height: 45px; font-size: 3rem; line-height: 4.5rem; font-weight: 200; line-height: 40px; text-align: center; margin-bottom: 80px; } .about-intro .about-intro-txt { padding: 0 110px; color: #888; }

 .website-width {
        width: 940px;
        margin: 0 auto; } }

We already modified the cssName to "about-intro about-intro-txt" but this does not work. The second style is basically ignored. 

Any help is much appreciated. 

thanks, 

Wim 

[Sham_HC · Accepted solution]

The workaround you suggested to include all in single seems best option.  

If that is not the direction you want then need custom implementation You can try useSemanticMarkup & heavily doubt it will work. Other options is implement using html serilizer or overlaying rte postprocessHtml OR write own plugin.

[1]   https://forums.adobe.com/message/4652639