Skip to main content
MarkKilroy
Level 2
January 5, 2023
Solved

Teaser Component Title I would like to Center

I would like to write a custom style value to Center the Title in the Teaser Component.  I do not see an example of this.

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
nitesh_kumar-1
nitesh_kumar-1Accepted solution
Adobe Employee
January 6, 2023

 

You are right, the CSS style classes are set at the parent level, but you can make use of inheritance while writing the CSS to pick the specific element.

 

For instance, you can specify the selector for picking up the title, for instance, you can set the style class the template like "cmp-teaser-title-centre", and use this selector in CSS to pick the title which is in H2 with the default class name "cmp-teaser__title". That would ensure that aligning only affects the title.

 

So your CSS might look like this.

.cmp-teaser-title-centre .cmp-teaser__title{
  text-align: center;
}

 

hope this helps!

 

Regards,

Nitesh

View in thread

3 replies

nitesh_kumar-1
Adobe Employee
nitesh_kumar-1Adobe Employee
Adobe Employee
January 6, 2023

Hi @markkilroy 

 

There are two ways:-

 

1.) You can write/add a custom style in clientlibs and add it to the template editor, which would enable authors to apply it to the component. See the example here

https://experienceleague.adobe.com/docs/experience-manager-65/authoring/siteandpage/style-system.html?lang=en 

 

2.) If you want the title to be aligned center always, then write your styles in the clientlibs which is deployed with your project by picking up the HTML element selectors from the teaser component.

 

Hope this helps

Regards,

Nitesh

Translate
    MarkKilroyAuthor
    Level 2
    January 6, 2023

    I previously had read and used the page that you mentioned.

    The Teaser is a bit different because the Title is a component inside of the Component.  I have not been able to make a style for the "Teaser Title"  I made this style but this ends up Centering all of the content.

    .cmp-teaser__title_aligncenter {
        text-align: center;
    }
     
    Here is an image where the Title is centered but the Text is centered as well.

     

    Do you know what css I can write to get into the Teaser's Title.

    Best Regards

    Translate
      nitesh_kumar-1
      Adobe Employee
      nitesh_kumar-1Adobe EmployeeAccepted solution
      Adobe Employee
      January 6, 2023

       

      You are right, the CSS style classes are set at the parent level, but you can make use of inheritance while writing the CSS to pick the specific element.

       

      For instance, you can specify the selector for picking up the title, for instance, you can set the style class the template like "cmp-teaser-title-centre", and use this selector in CSS to pick the title which is in H2 with the default class name "cmp-teaser__title". That would ensure that aligning only affects the title.

       

      So your CSS might look like this.

      .cmp-teaser-title-centre .cmp-teaser__title{
        text-align: center;
      }

       

      hope this helps!

       

      Regards,

      Nitesh

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...