Customising H1 etc tags

Hi Ruenel

Unfortunately this does not work even with the important tag.

I cant leave it like this but the code i used is below: -

.single-post h1, .single-post .h1 {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center !important;
}

is there some other code that is affecting this?

Hi @vancouverwithlove,

You could try this CSS code to center the h1 heading text.

.single-post h1, .single-post .h1 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    width: 100%;
}

Hope it will help your issue.

"Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer."

Thank you.

Great, this looks like it works! Thank you

You’re welcome!
It’s good to know that it has worked for you.

Hi Ruenel,

One more question - although this has worked really well for page and blog post titles, I’m still finding that both the titles of my Search Results, and the names of people leaving comments on my blog posts are huge. Any advice on how I can change these? Thank you!

Hi Elizabeth,

Normally, my advice on this would be to configure properly the Root Font Size under Theme Options > Typography, so you will have a responsive text throughout your site.

But since you can not re-configure this now as this will affect all the text on your site, you can add the custom CSS below to Theme Options > CSS area. But please keep in mind that we can not continue giving this type of customization as this might cause an issue/conflict on the future and we won’t be able to provide support for it.

/*search result title*/
.search-results .entry-title {
	font-size: 150%;
}

/*comments section text*/
#reply-title, .comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-rating label, .comment-form-comment label {
		font-size: 150%;
}

Feel free to adjust the 150% value, you can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial.

And use either %, em, or rem unit to your font-size so it will be responsive.

Cheers!

Thank you for the respond, I will try this.

Just to confirm the only reason we went into the custom CSS is because the relationship between the ‘Root Font Size’ and the the header tags was not adjustable. IE I set the font via Theme Options > Typography to the size I wanted but then the titles were too big.

If there is a better way to adjust this I would happily implement!

Also, I just tested and the comments code did not work but the search one did

Hello @vancouverwithlove,

You may have added the custom css incorrectly. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: How The Forum Works

Regards.

Thanks Ruenel, I’ll do this now.

Hi Elizabeth,

Please fix this:

That is a CSS comment so it should be wrap with /*comment here*/. More details here.

Also, you can use this tool for checking custom CSS.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache)

Hope it helps,
Cheers!

Thanks Friech,

I’ve made that change but it didn’t solve the issue unfortunately. Do you have any other advice?

Thanks.

Hi @vancouverwithlove,

I’ve checked the CSS code that my colleauges gave to you and they are working fine, which part of the request didn’t solve your issue?

Thank you.

Hi there,

The code for the comments font size is the part that didn’t work (the search results code worked).

Thanks.

Hi Elizabeth,

Same as Marc (@cramaton) I’m seeing on my end the custom CSS I provided being applied to your comment section.

Please clear all your caching features including your browser’s cache. Or try using the Incognito or private mode of your browser where there are no caching and browser add-ons involve.

Or maybe you’re referring to a different text in comment section, would you mind to clarify what/where is it?

Cheers!

Hi Friech

Thanks for responding, I checked the cache issue and you are correct those fields are working, however the previeous comments themselves are the issue. They are still very large

see example below:

Hey @vancouverwithlove,

That is the Comments area. The one my colleague is targeting is the Comments Form.

I’m going to provide one last code for this thread and if you need more font size edits, please consider using the official global responsive text feature of our theme which is the Root Font Size under Theme Options > Typography.

Below is the code you need to add to change the font size of the comments area. If you need to edit a specific text in the comment area, I’d recommend you learn CSS and also the usage of the browser’s element inspector. I’ve recorded a screencast for you to help you get started coding on your own.

ol.x-comments-list {
    font-size: 15px;
}

Again, if you need more theme customization guidance, you either need to learn CSS, consult with a developer, or avail of our One service where we answer custom development questions. We will not provide fixes and enhancements for the codes we provide in this forum as they are only meant to provide guidance to help users get started to code on their own.

If you’re not interested in coding, please kindly wait for future theme features like the Layout Builder which will allow users to create Archive and Single Posts Templates so no coding is required. See https://theme.co/content/status-report-june-02-2020

Hope that helps and thank you for understanding.

Hi Christian

Thank you so much for that screencast and taking the time to send us all of the code snippets. I really appreciate it.

I do just want to say though, that I want to use the tools that ThemeX includes (like the typography) but it doesn’t include the ability to change what the header fonts change to at different media sizes. And unfortunately as my CSS level is not high its hard for me to track down what needs changing.

Your documentation is really good, but was often hard to find what class’s and IDs I should be targeting (learning about the inspector is amazing, thanks again)

I really like themeX and would always recommend it to anyone, I also love how responsive the Themeco team is on the forums!

Keep up the good work

Elizabeth

Hi Elizabeth,

Thanks for the feedback, glad we could help,

Cheers!

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