{"id":9598,"date":"2024-07-26T10:42:15","date_gmt":"2024-07-26T10:42:15","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9598"},"modified":"2024-09-03T12:34:43","modified_gmt":"2024-09-03T12:34:43","slug":"add-css-classes-to-heading-tags","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/glossary\/aem\/add-css-classes-to-heading-tags\/","title":{"rendered":"How to Add CSS Classes to Heading Tags in Rich Text Editor (RTE) in AEM"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<p class=\"wp-block-paragraph\">In the\u00a0<a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem\/\" data-type=\"post\" data-id=\"2483\">Adobe Experience Manager\u00a0(AEM)<\/a>, the Rich Text Editor (RTE) allows users to input and format text, similar to what you\u2019d experience with any typical word processing software. But what if you want to add a CSS class to a heading tag within the RTE? This article will walk you through the steps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understanding the functionality of AEM\u2019s Rich Text Editor (RTE) and CSS is crucial.<\/li>\n\n\n\n<li>Adding CSS classes to heading tags in RTE involves customizing the RTE configuration.<\/li>\n\n\n\n<li>The process involves creating the CSS file, linking it to the RTE, and modifying the RTE configuration.<\/li>\n\n\n\n<li>Testing the applied styles is an essential part of the process.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Understanding the Concept<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">AEM\u2019s Rich Text Editor (RTE)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adobe Experience Manager\u2019s&nbsp;<strong>Rich Text Editor (RTE)<\/strong>&nbsp;allows content authors to create and format text content within the AEM interface. Key features include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text formatting (bold, italic, etc.)<\/li>\n\n\n\n<li>Paragraph formatting (alignment, lists)<\/li>\n\n\n\n<li>Hyperlink and media embedding<\/li>\n\n\n\n<li>Table creation and editing<\/li>\n\n\n\n<li>HTML source code editing<\/li>\n\n\n\n<li>Extensible with custom plugins<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">CSS in AEM<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS<\/strong>&nbsp;is used to style components and pages in AEM, ensuring a consistent and appealing design. Key aspects include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Component Styling<\/strong>: Each component can have specific CSS.<\/li>\n\n\n\n<li><strong>Global Styles<\/strong>: Consistent styling across the site with global CSS.<\/li>\n\n\n\n<li><strong>Client Libraries (Clientlibs)<\/strong>: Manage and include CSS and JavaScript efficiently, with features like dependency management, minification, and&nbsp;caching.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Integration<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The RTE\u2019s HTML output is styled using CSS to maintain a cohesive look and feel across the website. Proper use of CSS ensures that rich text content is visually consistent with the site\u2019s overall design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Defining the Styles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first step to adding a CSS class to a heading tag is to define the class in a CSS file. This is where you specify the styles that you want to apply to the heading tags.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Linking the CSS File to the RTE<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Connecting Styles with the RTE<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once the CSS file is ready, the next step is to link it to the RTE. This can be done in the dialog of the component that uses the RTE. You need to add the path of the CSS file to the <strong>externalStyleSheets<\/strong>&nbsp;property.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Customizing the RTE Configuration<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Adding the CSS Class to the Styles Dropdown<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To make the CSS class available in the RTE, you need to add it to the <strong>styles<\/strong> dropdown in the RTE configuration. This involves modifying the <strong>_cq_htmlTag<\/strong>&nbsp;property in the RTE&nbsp;node&nbsp;of the dialog.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Modifying the Allowed Styles<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Restricting the RTE to Specific CSS Classes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In some cases, you might want to restrict the RTE to specific CSS classes. This can be achieved by adjusting the <strong>allowedPaths<\/strong>&nbsp;configuration in the RTE.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Applying the CSS Class<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Using the Styles Dropdown<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With the CSS class available in the styles dropdown, content authors can now apply it to heading tags. This is as simple as selecting the text and choosing the desired class from the dropdown.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Testing the Applied Styles<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Verifying the Outcome<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After applying the CSS class, it\u2019s important to test whether the styles are correctly applied. This involves previewing the page and inspecting the heading tags in the browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Solving Potential Issues<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If the styles are not applied as expected, some troubleshooting might be required. Common issues include incorrect CSS file path, errors in the CSS file, or misconfiguration in the RTE.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In conclusion, adding CSS classes to heading tags in AEM\u2019s Rich Text Editor requires some understanding of AEM configurations and CSS. However, with this guide, the process should be more approachable.<\/p>\n","protected":false},"author":12,"featured_media":5015,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"glossary-category":[43],"class_list":["post-9598","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Add CSS Classes to Heading"},"_links":{"self":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":2,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9598\/revisions"}],"predecessor-version":[{"id":9784,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9598\/revisions\/9784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media?parent=9598"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-category?post=9598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}