Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How do I apply custom CSS to a page in AEM 6.3?

brendanf9753525
Level 4
Level 4

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.

1225936_pastedImage_4.png

1225935_pastedImage_2.png

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

desktop_exl_promo_600x100_gdrp.png

1 Accepted Solution
kautuk_sahni
Correct answer by
Employee
Employee

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

View solution in original post

8 Replies
Feike_Visser1
Employee
Employee

First: no source-editor in AEM for HTML or CSS....

What you need to do is to include your custom-css in a clientlib, then we the clientlib gets rendered it will also use the custom-css.

kautuk_sahni
Employee
Employee

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

smacdonald2008
Level 10
Level 10

In the Lazybone article - we talk about how to add a CSS to a editbale template:

Add a Basic Stylesheet to the Template

You can use Experience Manager's grid feature to set these two Layout Container components into a two column layout. In order to do this task, you must include a CSS stylesheet into the template which has the appropriate styles to support the grid system.

To start, open the Page Information drop-down menu from the top tool bar (the icon looks like three sliders) and select Page Design. This lets you specify the policy for the page (whereas before you had to specify for a particular component).

.....

brendanf9753525
Level 4
Level 4

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/

1226720_pastedImage_18.png

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.

1226627_pastedImage_14.png

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.

1226628_pastedImage_16.png

Thanks again for all your wonderful help.

Brendan

kautuk_sahni
Correct answer by
Employee
Employee

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

brendanf9753525
Level 4
Level 4

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

kautuk_sahni
Employee
Employee

brendanf9753525

This Community is always there to help you. And Would like you to also help others.

Happy learning.

~kautuk