Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM | text | CSS styles | cssName

Avatar

Level 2

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 

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

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