Headline Default Class

Support
#1

My goal is to change the font size and color for all Headline elements (Text and Subheadline) within a section - is this possible via CSS?

Is there a default class similar to “x-columns”? I currently have about 15 headlines within a section, so I’m trying to avoid having to go into each element and create a class.

TIA

#2

Hello @anishnagar,

Thanks for asking. :slight_smile:

Well, there is no need to add CSS class to each and every Headline element. You can add a class to the section and then make the necessary changes.

  1. Inspect the section and under Customize > Setup > Class add the class name.
  2. Add following CSS under X/Pro > Theme Options > CSS:
.section-headline .x-text-headline h1 {
    color: #ddd !important;
    font-size: 2em !important;
}

In above CSS code section-headlineis the class name that I have assigned to the section. Along with that please replace class name as per your requirement. Above code will change the font size and color for H1 tag. In case you are using a different heading, please replace the same in code.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Thank you for the help and quick response @Prasant. Is there a catalog or library with the default classes for Pro elements? Or is the only option to inspect the webpage via the browser dev tools?

#4

Hi There @anishnagar

We have some predefined classes and guides on our knowledge base section.

For specific customizations, you can always assign a CSS class and add your custom CSS rules into your Pro -> Theme Options -> CSS area.

Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.