How do I apply custom CSS to a page in AEM 6.3? | Community
Skip to main content
brendanf9753525
brendanf9753525
Level 4
June 8, 2017
Solved

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

  • June 8, 2017
  • 8 replies
  • 24045 views

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

    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 kautuk_sahni

    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

    8 replies

    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe Employee
    June 9, 2017

    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.

      Feike_Visser1
      Adobe Employee
      Feike_Visser1Adobe Employee
      Adobe Employee
      June 9, 2017

      Here some doc links on clientlibs:

      Using Client-Side Libraries

      AEM Client Libraries explained by example

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      June 9, 2017

      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
      smacdonald2008
      smacdonald2008
      Level 10
      June 9, 2017

      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
      brendanf9753525Author
      Level 4
      June 9, 2017

      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

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity ManagerAccepted solution
      Community Manager
      June 12, 2017

      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
      brendanf9753525
      brendanf9753525Author
      Level 4
      June 12, 2017

      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
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        June 13, 2017

        brendanf9753525

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

        Happy learning.

        ~kautuk

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...