I've created a website in AEM and created a design for that website. Initially the design included a folder with images and a css file called static.css. When I specify the cq:designPath on a node in my website's content, the static.css file gets included automatically (/etc/designs/mywebsite/static.css); AEM also tries to include another file (/etc/designs/mywebsite.css). If the static.css file doesn't exist, it will NOT get included, but the mywebsite.css file gets included ('ed to) regardless of whether or not it exists. The documentation I have found (see here) suggests that you can include any number of css files in your design, but when I try to add addition css files to the /etc/designs/mywebsite/ folder, none of them get included. Am I missing something here? Should all the css files under /etc/designs/mywebsite/ be included in the site, or is it intended that only /etc/designs/mywebsite.css and /etc/designs/mywebsite/static.css are included automatically and any additional files need to be included manually?
- 13,085
- 13
- 76
- 99
2 Answers
The .css extension on the design node invokes a servlet (/libs/wcm/core/components/designer/designer.css.java) which dynamically generates CSS based on various nodes from the design's jcr:content node into CSS.
When a content author switches to design mode (WCMMode=Design), the edit dialogs save to the either the currently-applied design or the default (/etc/designs/default) design's jcr:content node. The template used to create the page, along with the path of the component being edited will determine the path under the jcr:content node where the design settings are saved.
For instance, if you edit an out-of-the-box parsys component you will see an option to editing the "Cell Padding"
If you enter a CSS padding value into the text box and click OK, the value will be saved to a div.padding property at the following location:
/etc/designs/mydesign/jcr:content/mytemplate/par/section[div.padding="30px"]
The servlet will then render the following in the design CSS:
.mytemplate .par div.section {
padding: 8px;
}
The class that actually converts the nodes to CSS is the CSSWriter in the cq-wcm-core jar.
For more information, see a similar question I asked a while back:
In Adobe AEM, how does the parsys component inject styles into the design css file?
Just a short correction. Actually it is not: /etc/designs/mydesign/jcr:content/mytemplate but instead /etc/designs/mydesign/jcr:content/my_page_component
That means if two pages have different templates but share the same page rendering component, then they will share the same design configuration and their components will write at the same location in Design Mode.
- 37
- 4