Basel: How modify Heading Style?

Hello, thank you for the wonderful theme. It is a real pleasure to work with it.
How can I modify a Heading style (Heading 5) for the text block?

I would to like to do the following changes to Heading 5:
– change colour to color:#C41E3A;
– add an underline, to show it is a clickable link

Thank you very much for your help.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for the warm feedback about the theme.

You can change the font color and size by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/documentation/basel/

Here is the screen which shows how to change the color of the text and heading in the text block: https://gyazo.com/f642853bdc1d5515b05eb7cf90bd60d8 and https://gyazo.com/3884988a3682a922e85ec665d897e158 and https://gyazo.com/fdeeec6616a6399c5d3a761135837c85

Best Regards

Hello, thanks very much for your response! You are so helpful.

I have read documentation for the Advanced Typography, and saw your videos, but I cannot find a way to change Heading 5 in Advanced Typography and I do not have a possibility to change colour and add underline to Header 5 in the Text Box setting :))) what am I doing wrong?

In the Advanced Typography rules, I cannot select <h5> from the list https://imgur.com/a/uS35vzh

I want to make a “Global” change of the h5 because I use it to describe Component Products of a “Product Set”. I have many Product Set pages, each of them with six Component Products, and it will be very time consuming to go to each one and change colour every time.

In the Text Box Setting, I do not have a possibility to change colour and add underline to Header 5, as you show on the videos. https://imgur.com/a/vyAUff1

Can you please help, is there a way I can change the Header 5? 🙂

Hello,

The Advanced typography provides the option to insert a custom selector. Taking into consideration your intention to assign the underlined style to H5, you need to assign a class to the text block as shown https://gyazo.com/a7f96038be647c615d25ea0dfae55b75 then provide page URL with such block and I will provide custom CSS.

This custom CSS would be applied to all text blocks where the custom class has been inserted and which have an H5 title.

Best Regards

Thank you. I created reference to new class .iw-h5 https://imgur.com/a/uQQH8iD
If you can give me a custom CSS for a claass .iw-h5 this would be great!

Here is what I am trying to achieve:
H5 modified as
color: #c41e3a;
text-decoration: underline;
text-decoration-color: #e0e0e0

Similar to what you did here https://imgur.com/a/HM2E4WP , but with red (#c41e3a) colour of the text.

Hello,

Here is the code:

.single-product-content #tab-description .iw-h5 h5 a{
	color:#c41e3a;
	display:inline-block;
border-bottom:1px solid #e0e0e0;
}

Have a look at the screen, it would look nice only if the heading is one line https://prnt.sc/pm2l62

There is the option to make like this: https://prnt.sc/pm2lgw, in this case, it is not possible to make text in one color and underline in another one;

Here is the code:

.single-product-content #tab-description .iw-h5 h5 a{
	color:#c41e3a;
text-decoration:underline;
}

Take the variant you like. You need to add the code to the Theme Settings > Custom CSS. Besides you need to insert the class iw-h5 into the text block. This code would work only on the product page. If you need this style anywhere else, provide page URL.

Best Regards

Thank you! – I modified a little bit to be a:hover, now it looks really sweet https://imgur.com/a/NGkSpmt
the topic can be closed – thank you for your helpful advice :))

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts