AEM Cloud Template Styling

AEM_Cloud_Template_Styling.md

🎨 AEM Cloud Template Styling

Within the Codebase

You can find the css / scss within the following folder structure:

📁 Root
-:file_folder: ui.frontend
-:file_folder: src\main\webpack
-:file_folder: components
_componentname.scss_

The policy on .content.xml also has to be edited at this location:

📁 Root
-:file_folder: ui.content
-:file_folder: jcr_root
-:file_folder: conf -:file_folder: ProjectName
-:file_folder: settings
-:file_folder: wcm
-:file_folder: policies
.content.xml

Please note, this is a little different than the AEM Project Archetype, but works similarily

Within .content.xml, look for the component's parent. For this example, we can use the "button" component:

<button jcr:primaryType="nt:unstructured">
    <policy_1620274265435
        cq:styleDefaultClasses="cmp-button--styleprimary"
        jcr:primaryType="nt:unstructured"
        jcr:title="Petwatch button policy"
        sling:resourceType="wcm/core/components/policy/policy">
        <jcr:content
            cq:lastReplicated_publish="{Date}2021-08-16T11:45:29.375Z"
            cq:lastReplicated_scene7="{Date}2021-08-16T11:45:29.375Z"
            cq:lastReplicatedBy_publish="Rakesh.Pawar@icfnext.com"
            cq:lastReplicatedBy_scene7="Rakesh.Pawar@icfnext.com"
            cq:lastReplicationAction_publish="Activate"
            cq:lastReplicationAction_scene7="Activate"
            jcr:mixinTypes="[cq:ReplicationStatus]"
            jcr:primaryType="nt:unstructured"/>
        <cq:styleGroups jcr:primaryType="nt:unstructured">
            <item0
                cq:styleGroupLabel="Style"
                jcr:primaryType="nt:unstructured">
                <cq:styles jcr:primaryType="nt:unstructured">
                    <item0
                        cq:styleClasses="cmp-button--styleprimary "
                        cq:styleId="1620274327402"
                        cq:styleLabel="Primary"
                        jcr:primaryType="nt:unstructured"/>
                    <item1
                        cq:styleClasses="cmp-button--stylesecondary"
                        cq:styleId="1620274342204"
                        cq:styleLabel="Secondary"
                        jcr:primaryType="nt:unstructured"/>
                    <item2
                        cq:styleClasses="cmp-button--stylelinkchevron"
                        cq:styleId="1623903274767"
                        cq:styleLabel="Plain Link with Chevron"
                        jcr:primaryType="nt:unstructured"/>
                    <item3
                        cq:styleClasses="cmp-button--styleblue"
                        cq:styleId="1623903274769"
                        cq:styleLabel="Blue"
                        jcr:primaryType="nt:unstructured"/>
                </cq:styles>
            </item0>
            <item1
                cq:styleGroupLabel="Fit"
                jcr:primaryType="nt:unstructured">
                <cq:styles jcr:primaryType="nt:unstructured">
                    <item0
                        cq:styleClasses="cmp-button--fitcontent"
                        cq:styleId="1623902533731"
                        cq:styleLabel="Content"
                        jcr:primaryType="nt:unstructured"/>
                    <item1
                        cq:styleClasses="cmp-button--fitcontainer"
                        cq:styleId="1623903250143"
                        cq:styleLabel="Container"
                        jcr:primaryType="nt:unstructured"/>
                </cq:styles>
            </item1>
        </cq:styleGroups>
    </policy_1620274265435>

Add a new item under the items, give it a new item number, new styleId, and new styleLabel using BEM standard syntax:

<item4
cq:styleClasses="cmp-button--styleyellow"
cq:styleId="1623903274456"
cq:styleLabel="yellow"
jcr:primaryType="nt:unstructured"/>

You will see,

• I copied item3, and renamed ititem4
• I added cmp-buttom--styleyellow as the styleClass
• I changed the styleLabel to yellow

Deployment to Local environent

Build your package using mvn clean install -PautoInstallSinglePackage,fedDev
Sometimes if that fails, use: mvn clean install -PautoInstallSinglePackage,overwrite-content
This will push the changes to the AEM local environment.

Checking Deployment within CRXE

Navigate to the CRXE Package Manager

• Find your latest project-name.ui.content-1.0.0-SNAPSHOT.zip
• Click on it, and Reinstall
  This will install the deployed package in the previous step. Check the dialog that /conf/project-name/settings/wcm/polcies/project-root/components/button was installed
• Navigate to the CRXE file manager policies
  Or, working path: /conf/project-name/settings/wcm/policies/project-root/components/button

Expected result: You can see the new item4 that you created.

Editing the policy in the AEM UI

Navigate to the templates icon in the main dashboard /libs/wcm/core/content/sites/templates.html/conf/

• Edit the template
• Click on initial page policies
• Select the policy in the dropdown that you need. In this case, it's the button policy
• This should now add the class cmp-button--styleprimary
• From the dropdown of any page using this template, you can now apply this style