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.
Solved! Go to Solution.
Views
Replies
Total Likes
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
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
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
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.
Do you know what css I can write to get into the Teaser's Title.
Best Regards
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