SOLVED
How do I apply custom CSS to a page in AEM 6.3?
Hello all,
I'd like to learn how to create and apply custom css stylesheets to my pages, and have been poking around all day without much success. I haven't found many tutorials on this, many of the creating websites tutorials have you import already created CSS into your project but I haven't seen anything on how to do it yourself.
I created an editable template and applied it to the new page using this tutorial: Creating an Adobe Experience Manager project using Lazybones. I didn't see anything for a 'next step' of how to apply some css to my elements and stylesheets.
So far I've been trying to get it through CRDXE Lite and the GUI interface in AEM. I tried setting the CSS string on the jcr:content and also tried in the root node of my first-page, and it still showed up as my-aem-project.css (which does not exist in CRDXE Lite strangely enough). Looking through the interface didn't get me anywhere either and I didn't see any first-page.html anywhere to add it in the head myself either.
Can anybody point me in the right direction for how to apply my own CSS to a page? Is this even possible when using an editable template? Bonus points if anyone can also tell me if there is a "source" editor to directly edit HTML through AEM and CSS apply classes to specific tags.I'd also like to edit the HTML directly if possible.
Thanks,
Brendan
1 Accepted Solution
Correct answer by
The first tutorial had me create a project with .....
KS:- You can create nodes manually or by using some templating language like lazybones or Archetype.
They kind of create a minimal node structure for you. Though you can reate it yourself as well.
Why are the templates being stored in different places?
KS:- /config ones are editable templatePage Templates - Editable
/Apps are static template Page Templates - Static
I'd like to use my first template that I created in /wcm/templates
KS:- Create template in /apps http://www.aemcq5tutorials.com/tutorials/create-a-template-in-adobe-cq5/
Add Components to Template
KS:- http://www.aemcq5tutorials.com/tutorials/aem-create-a-website-in-cq5/
~kautuk
Kautuk Sahni
Please have a loot at this article :- Adobe Experience Manager Help | Creating your First Adobe Experience Manager 6.3 website
As mentioned by Feike, go through AEM Client Libraries explained by example
// We can have a global JS/CSS file and also component specific JS/CSS file.
1. Create a clientlib” node of type “cq:ClientLibraryFolder“
2. Add a property to every “clientlib” node called “categories” of type String[] with the single value of “myproject.components” (to get a String[] type click the “Multi” button).
3.
Create following files inside of your “clientlib” folder of “MyFirstComponent”:
first.css
.firstContainer {
margin-top:10px;
}
first.js
/*
* This is the comment of the function
*/
function getNameFirst() {
// return the name
return "some value";
}
js.txt
# mentions all the JavaScript resources of the ClientLib
first.js
css.txt
# mentions all the CSS resources of the ClientLib
first.css
Now the setup of the ClientLib is finished we can invoke the ClientLibs in your page components. When you are using a JSP you can use cq:includeClientlib . In case you are using the HTML Template Language (HTL), you can use the data-sly-call to invoke the ClientLib. In this article HTL will be used for the examples.
We start with putting the following into the <head> element of our page:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />
<sly data-sly-call="${clientlib.css @ categories='myproject.components'}" />
<sly data-sly-call="${clientlib.js @ categories='myproject.components'}" />
I hope this helps.
~kautuk
Kautuk Sahni
Hi all,
Thanks for your awesome answers/help, I've learned alot about working with AEM now. I've successfully created three components with CSS/JS support for my AEM instance. However, I'm a bit confused in a few places.
I've looked through both of these tutorials and created a template/page using this one https://helpx.adobe.com/experience-manager/using/aem_lazybones.html
Creating an Adobe Experience Manager project using Lazybones
I've also followed this one
Adobe Experience Manager Help | Creating your First Adobe Experience Manager 6.3 website
and created my three JS/CSS components with this one
http://blogs.adobe.com/experiencedelivers/experience-management/clientlibs-explained-example/
But they are all doing a bit different things when working with templates and pages and it was a little confusing to follow.
The first tutorial had me create a project with lazybones, as well as a template and a page, and the template is stored in /conf/my-aem-project/settings/wcm/templates, while the second tutorial wants me to create a template from scratch and put it in /apps/my-aem-project/templates/.
Why are the templates being stored in different places? Is there any difference between putting them in either location? I could see both from the AEM template interface. However, I was curious as one of the tutorials has you put your allowedPaths to /content(/.*)? to reach the newly created components, which would be a different path if i used my first template in the /wcm/templates folder. I'd like to use my first template that I created in /wcm/templates if possible.
Secondly, I was able to create the three necessary CSS/JS components and their following clientLib properties. They look like this and are located in /apps/my-aem-project/components/structure/
I wanted these components to be able to be added to my already existing test-template. Is there an additional step I have to do to do that? Is it in the allowedPaths variable, and what would the path be since it is in a different location? I set up my test template to have the allowed paths look like this.
But I didnt have any luck finding the components to add. Is there another step I need to take to allow my newly created components to be added to my template so I can test them and see the newly added CSS/JS? I can't find them through the AEM layouting interface.
Thanks again for all your wonderful help.
Brendan
Correct answer by
The first tutorial had me create a project with .....
KS:- You can create nodes manually or by using some templating language like lazybones or Archetype.
They kind of create a minimal node structure for you. Though you can reate it yourself as well.
Why are the templates being stored in different places?
KS:- /config ones are editable templatePage Templates - Editable
/Apps are static template Page Templates - Static
I'd like to use my first template that I created in /wcm/templates
KS:- Create template in /apps http://www.aemcq5tutorials.com/tutorials/create-a-template-in-adobe-cq5/
Add Components to Template
KS:- http://www.aemcq5tutorials.com/tutorials/aem-create-a-website-in-cq5/
~kautuk
Kautuk Sahni
Hi Kautuk,
Thanks for your help! I got my custom css/js loaded 
For anyone who needs an example, this is the cq:includeClientLib tag that I used in my .jsp file. This was after following the AEM Client Libraries explained by example tutorial from earlier.
<cq:includeClientLib categories="my-aem-project.all" />
And I couldn't see my components origianlly because i needed to add them to a group through the components tab in AEM. They were showing up as .hidden as their group so I changed them to general and they showed up successfully.
Brendan
This Community is always there to help you. And Would like you to also help others.
Happy learning.
~kautuk
Kautuk Sahni
