Koushik Mukherjee - XM Cloud & Sitecore 10 Certified Developer

  In my previous  blog , I discussed on  how  to apply rules to the elements and how to implement theme . In the current blog, I'll discuss on Style a component, an elements and customize the theme . In XM Cloud Components , themes are managed in the Styles builder, allowing you to apply them to components with a single click. In a previous blog, I explained that themes consist of pre-built elements and style rules, designed to simplify the styling process by applying multiple styles at once. How to Style a Component Using a Theme: In the Components library, select the component you want to style. In the Components builder, locate the version you want to style and click Current theme in the top-right corner. In the right-hand panel, under the Themes tab, select the theme you wish to apply. The component will now be styled according to the chosen theme. Customizing a Theme You can tailor a theme by selecting alternative styles for certain categories of elements. This is possible o

  In my previous blog , I discussed on h ow we can add basic style and rules in Sitecore XM Cloud Components style library. In the current blog, I'll discuss on how  to apply rules to the elements and how to implement theme. Applying Style Rules to Elements in XM Cloud Components Once you have added the basic styles (colors, fonts, graphics, and breakpoints) to your  Styles library  and bundled them into style rules, you must specify which style rules can be applied to specific elements. This ensures that only on-brand and curated style options are available in the  Styles library , which will be used in the  Components builder . Custom CSS styles can also be added to elements for greater flexibility. Add a Text Element Style Text elements come with six default collections: Heading 1 , Heading 2 , Heading 3 , Heading 4 , Heading 5 , and Paragraph . Each text element is automatically assigned the corresponding HTML tag (e.g., adding a text element from the Heading 1 collection assi

  Welcome back to our XM Cloud Component Builder series blog. In my previous blog of this series I discussed about how to create a component using XM Cloud component builder. In this blog we will begin with understanding what the Sitecore XM Cloud Components style library. The Styles library and builder of XM Cloud Components is a design system that manages the styles of all components and their versions and ensures visual consistency across all your digital properties.  Define basic styling: In  XM Cloud Components , style design begins with defining the  basic category , which includes fonts, colors, graphics, and breakpoints. Fonts: You can define and select fonts to maintain consistency and readability across your website. To add a font to the Style library, follow these steps: In the Styles builder , click Fonts in the left pane. At the top of the page, click Add font library . In the Font type field, choose either Google or Custom fonts based on your requirements. For custom