Design is not reflecting for a page? | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

Design is not reflecting for a page?

  • October 16, 2015
  • 7 replies
  • 2009 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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). 

7 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

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
pakram
Level 2
October 16, 2015

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. 

O
Adobe Employee
ogillAdobe Employee
Adobe Employee
October 16, 2015

Hi,

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

Regards

A
Anonymous
October 16, 2015

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
smacdonald2008
Level 10
October 16, 2015

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. 

A
Anonymous
October 16, 2015

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
smacdonald2008
Level 10
October 16, 2015

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. 

Terms & ConditionsAccessibility statement

Loading footer...