Adobe Experience Manager Sites & More

Report · 10/15/15

Hi,

As explained in the Excercise 5.5 of student work book, i created a new design under Tools>Designs>Training Design. After that i copied the static.css and images folder from Geometrixx demo design. Followed the same instruction to set my newly created design into my page, by going to PageProperties from side kick and refered my design under Advance Tab. But the page is not applied with any style or color, and more over if i change the design entry to "/etc/designs/geometrixx" in Advance Tab then also no change being noticed.

Let me know what could be the reason. Should i mention any Css entry to JSP or anywhere inside the page component?

regards

smacdonald2008 · 10/15/15

The best way to learn Designs as part of creating an AEM web site is to follow this article:

https://docs.adobe.com/docs/en/cq/5-6-1/howto/website.html

See this section:

https://docs.adobe.com/docs/en/cq/5-6-1/howto/website.html#Setting up the Design

(I personally recommend going through the entire article).

View solution in original post

smacdonald2008 · 10/15/15

The best way to learn Designs as part of creating an AEM web site is to follow this article:

https://docs.adobe.com/docs/en/cq/5-6-1/howto/website.html

See this section:

https://docs.adobe.com/docs/en/cq/5-6-1/howto/website.html#Setting up the Design

(I personally recommend going through the entire article).

pakram · 10/15/15

Sriram Sundararajan wrote...

Hi,

As explained in the Excercise 5.5 of student work book, i created a new design under Tools>Designs>Training Design. After that i copied the static.css and images folder from Geometrixx demo design. Followed the same instruction to set my newly created design into my page, by going to PageProperties from side kick and refered my design under Advance Tab. But the page is not applied with any style or color, and more over if i change the design entry to "/etc/designs/geometrixx" in Advance Tab then also no change being noticed.

Let me know what could be the reason. Should i mention any Css entry to JSP or anywhere inside the page component?

regards

Not sure what book you are following, but a few things don't add up. (But I am also not an expert) Designs are to be located under /etc/designs/projectName You mentioned "tools" so it threw me off. If you did create the file in the /etc/designs folder did you create the "Training Design" as a page and not a folder? It's a little counter intuitive but the project "Training Design" actually needs to be created as a page and not a folder.

Opkar_Gill · 10/15/15

Hi,

you mentioned you have student work book for version 5.5, what version of AEM are you trying the examples this on?

Regards

Report · 10/15/15

Hi All,

Thanks for your reply. This is what i did from the scratch, i will explain you step by step.

1. Created a template called myTemplate, and pointed the Resource Type as "training/components/page/myTemplate"

2. After wards i created a page rendering component under "training/components/page/myTemplate". And did the following changes in myTemplate.jsp

<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%>
<html>
<head>
<title><%= currentPage.getTitle() %></title>
<cq:include script="/libs/wcm/core/components/init/init.jsp" />
<style>

       body {
       padding: 0;
       margin: 0;
       background-color:lightgray
       }
       h1 {color:blue}
   </style>
</head>
<body>
   <h1>hellow u r here</h1>
</body>
</html>

3. When i create a page based on that template, on opening that page the style sheet is applied and i can see the color for body tag and h1 tag.
I am happy :) now i want to use the design template.

4. I went to tools, under design i created a new page (design template)
inside that i copied the images folder from existing Geometrixx Demo design
and a new style sheet called static.css. inside that style sheet i copied the below code took it from my myTemplate.jsp mentioned in step 2
       body {
       padding: 0;
       margin: 0;
       background-color:lightgray
       }
       h1 {color:blue}
And removed the inner style sheet from myTemplate.jsp

5. Again i opened the same page mentioned in step 3 i am not seeing any style or color, ofcourse because i removed the inner style sheet. i clicked the page properties and went to Advanced tab. There i searched for my new design template in design section and mentioned it there.
Now i expected the page to be refreshed and populate my style, but unfortunately it didn't happen.

Advice me what did i miss her?

smacdonald2008 · 10/15/15

Another way to handle style is to place CSS in a clientlibs folder. I have used that more than design. I have never had issues placing CSS into a ClientLibs node and referencing that in the JSP.

Report · 10/15/15

Hi,

Could you tell me, what structure should i follow while placing the .css file inside clientlib. I tried to create a folder inside clientlib, but it is not allowing me to copy the static.css. After i place it, should i mention the design path something similar to this "etc/clientlibs/myTemplate" inside PageProperties>advance Tab>design text field.

smacdonald2008 · 10/15/15

See this article - it talks about how to use CSS in a clientlibs folder:

https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

Notice the blue web client - driven from an example CSS. See how we handle the Site CSS file.

Adobe Experience Manager Sites & More

Design is not reflecting for a page?

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe