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

Teaser Component Title I would like to Center

Avatar

Level 1

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.

 

 

1 Accepted Solution

Avatar

Correct answer by
Employee

 

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 solution in original post

3 Replies

Avatar

Employee

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.htm... 

 

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

Avatar

Level 1

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.
MarkKilroy_0-1673029040362.png

 

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

Best Regards

Avatar

Correct answer by
Employee

 

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