Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
WKND Chapter 5 Style System - Style Icon (Paintbrush) not showing up for Title Component
Hi, I was wondering if anybody has ran into a similar issue or knows how to solve the following issue:
****Background****
I've following the instructions in WKND Tutorial Chapter 5 Style System. My local author instance is at version 6.5.0 (jar file, not the cloud version), and coming from the resolution to this issue https://github.com/adobe/aem-guides-wknd/issues/283, I downloaded service pack 6.5.10 from distribution center and uploaded it to my local instance successfully. Things all worked as expected in the tutorial until I tried to Add a Title Policy
****Problem Description****
With Title Policy set and saved following the steps below:
Policy Title *: WKND Title
Properties > Styles Tab > Add a new style
Underline : cmp-title--underline
The expected underline did show up in localhost:8082 (because 8080 and 8081 are preoccupied)
but it can't be displayed in http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
because I don't have the style icon (paintbrush 
****What I've tried/ Other information****
1. I examined the model in CRX/DE as shown below in the screenshot, things look fine?
2. I confirmed that the page uses "Article Page Template"
Because I've tried creating "WKND Title" policy so many times, you'll notice below that each of them has the style tab set (i.e cmp-title-underline) added). Theoretically at least one should do its job.
3. Even before I created my own title policy named "WKND Title", I notice a policy called "WKND Title - Global Styles" came out of the box (I'm on chapter 5 tutorial/style-system-start branch by the way) wherein all the settings I need are already in place. Despite this I still don't see the style icon/paintbrush showing up above the title component.
Can anybody please help?
1 Accepted Solution
Correct answer by
Problem solved and this is how-to:
(1) I opened up in CRX/DE to locate where my policies are stored
/conf/project_name/settings/wcm/policies/component_name/policy_randomNumber
(2) I saw about 8 title policies there for title from my previous attempts/experimentations, all with unique uuid but with the same name "WKND Title" and the same cmp-title-underline config. I believe this is the root cause of the symptoms described above. Essentially I had 8 policies to switch on and off and that might have confused AEM quite a bit.
(3) I deleted all 8 "WKND Title" polices. Had to restart local AEM instance to have this change in effect.
(4) After I rebooted local AEM instance, I cleaned up cmp-title-underline from the Page Policy (see my previous posts above to understand why I have to do this extra step) to have a clean slate, then added cmp-title--underline for the title component.
(5) Things start to click. I got the underline applied just on the specific title that should have it. In the screenshot below h1 title only.
Update: I used a hacky way to partially solved the problem: checked out the style-system-solution branch, used mvn goals to build and deploy that code base, then I got the style icon / paintbrush. When I switched back to style-system-solution branch, the style icon is not gone. I hoped this would solve the whole issue so that I could at least move on to the next chapter, but like I said, it only partially helped: the style icon is available now with "Underline" as an option in the drop-down, but selecting it does nothing. The underline effect is still not applied.
Correct answer by
Problem solved and this is how-to:
(1) I opened up in CRX/DE to locate where my policies are stored
/conf/project_name/settings/wcm/policies/component_name/policy_randomNumber
(2) I saw about 8 title policies there for title from my previous attempts/experimentations, all with unique uuid but with the same name "WKND Title" and the same cmp-title-underline config. I believe this is the root cause of the symptoms described above. Essentially I had 8 policies to switch on and off and that might have confused AEM quite a bit.
(3) I deleted all 8 "WKND Title" polices. Had to restart local AEM instance to have this change in effect.
(4) After I rebooted local AEM instance, I cleaned up cmp-title-underline from the Page Policy (see my previous posts above to understand why I have to do this extra step) to have a clean slate, then added cmp-title--underline for the title component.
(5) Things start to click. I got the underline applied just on the specific title that should have it. In the screenshot below h1 title only.
I applied the underline style in the Page policy setting and now can see the desired underline style on the Page level, meaning that all the titles now have an underline. The title component's policy still isn't doing anything, meaning I couldn't add the underline just to the title level and now I can't remove the underline added by the Page, either. This tells me that _title.scss is working fine for the Page level only, something is wrong on the title component.
If the title component is working for anybody here, could you please share a screenshot of your title component configuration (http://localhost:4502/crx/de/index.jsp#/apps/core/wcm/components/title/v2/) so that I can do a side-by-side comparison?
Below is mine:
