Editable/dynamic template style system


 Hello everyone,

In this post we will see style system for editable template. Basically a template-author can select css style from available style on page/component once the css is present in the client library. developer write the css and keep it in client library now template-author can use the style as per their requirement. Template-author can decide and achieve any style from available styles they want to apply on page. Template-author and developer can define the behavior of the component or page.

Before proceeding please go though the editable template blog Editable template (rjaem.blogspot.com)

we have 2 types of style system.

Page level style system

Component level style system

Page level style system: this style will get apply on body tag of the page. for example, we add the any font color, font family or font size on page level style system it will get applied on the template body so it will apply on the all the fonts available on the page. We should use page level policy for background image or background color like css where we need to have a common css styling all over the page.

follow below steps apply Page policy on template

Go template Structure mode--> Page Information-->Page policy --> Styles tab--> Allowed Style : Enter the below details in this section.

we can have multiple styles under one page policy for that we have to give add allowed style in policy for the style we want to add.

Allowed Styles : Group name for styling, the same name will appear on page in Styles popup.
Styles: This Click Add --> 2 empty boxes will appear left box is for style name and right box is for css class. style name will appear on page under allowed style and css class has to be present in client library.
we can see the same in below screenshots.





Component level Style system: This style will get apply on the particular component where we have added the policy.
Note: Component need to have design dialog to get style system for it.
Follow below steps to apply component level Style system --> Go to template in structure mode--> go to layout container where you have allowed the component --> click on Policy icon of the component --> Styles tab --> Enter the same we do for page level style system.
Go to page -->you can see the brush icon on component -->On click of brush icon you see the style options what you have added from component policy.
we can select multiple style for component that we need to check Style can be combined checkbox while creating policies.
CSS is loading from client-base.css, I am adding the client library on template page policy.
style.css
.style-green-background{ background-color: #11a836; } .style-red-background{ background-color: #e02a3b; } .font-style-normal{ font-style: normal; } .font-style-italic{ font-style: italic; } .font-style-oblique{  font-style: oblique; } .text-decoration-underline{  text-decoration: underline; } .text-decoration-line-through{ text-decoration: line-through; } 
css.txt
style.css
KEEP EDUCATING YOURSELF!!!!

Comments

Post a Comment

Popular posts from this blog

AEM in docker

Image
 Hello Everyone, In this post we will see how we can run our aem server from docker. Before that why we really need docker, whenever we have a new team member, they will struggle for project setup. Now imagine we have a set up file we can share with any new member who is joining our team. They simply can start their work without wasting time on set up or we can directly start giving KT, so using docker we can achieve this we can create a docker image and we can share the image with team members. What is docker image ? A Docker image is a lightweight, standalone, and executable package that contains everything needed to run an application, including the application code, libraries, dependencies. Everything in one image. How to create docker image ? 1st get docker installed on your machine/system docker toolbox is deprecated so use docker desktop software.  You might face some challenges while installing and starting docker. Install docker desktop Enable h
Read more

Sling API vs JCR API

Hello Everyone, AEM is a Web Application Developer based on content. Technology stack of AEM contains both Sling and JCR. What is Sling and JCR  When and how to use sling api and jcr api What is Sling and JCR  Sling: AEM is built using sling, a web application framework based on REST principles. Sling uses a JCR repository, such as Apache Jackrabbit, or in the case of AEM, the CRX Content Repository, as its data store. It deploy the application in the form of OSGi bundle. JCR (Java Content repository) : Basically a place where the content/data is stored. You can store data as nodes and node properties i.e content repository is hierarchical and represented as a tree structure. When to use sling or JCR Sling : In the most cases it is recommended to use the sling api. The higher-level API(Sling) is faster to write and far more readable and maintainable in the long run. Even if performance is really needed if we compare both the API the difference will be few mill
Read more

Creating or finding .M2 folder

Image
If you are setting up your system for first time, you have installed java set path variable for java and maven both. You checked both are installed successfully but if .m2 & repository both folder are not there in then do the below things. open Command promt run the below command mvn help:evaluate -Dexpression=settings.localRepository It will help you to find the location of .m2 if someone has changed. Also if there is no folder created it will create .m2/repository folder under C:\Users\{user}\ If you run this command for first time it will download repository so it will take some time. That's it and your folder is created. After repository creation make sure you are giving the same path in setting.xml localrepository   <!-- localRepository    | The path to the local repository maven will use to store artifacts.    |    | Default: ${user.home}/.m2/repository   <localRepository>/path/to/local/repo</localRepository>   --> KEEP EDUCAT
Read more