Edit H1 title font size, on homepage only? [Archive]

JCP_91

08-22-2016, 10:57 AM

Hi, does anyone know how to change the font size of the h1 title, on the homepage only? I am using one of the VB5 default themes. I want to make the title module on the homepage small but keep it the same size on the rest of the pages? Is there a specific homepage file I can edit? It would be great if someone could share how to do it.

Thank you! :)

shimei

08-22-2016, 07:49 PM

Hi, does anyone know how to change the font size of the h1 title, on the homepage only? I am using one of the VB5 default themes. I want to make the title module on the homepage small but keep it the same size on the rest of the pages? Is there a specific homepage file I can edit? It would be great if someone could share how to do it.

Thank you! :)

Which one? Aren't there several H1s on the homepage of Vb5?

http://www.seoreviewtools.com/html-headings-checker/

You may want to include a link to your site and specify, because every module's title in Vb5 is h1. If your site in question is in your signature...

To change them all. In additional_css change, add the following but change the below font size to your desired size:

.module-title h1 {
font: normal 10px 'ralewaysemibold',sans-serif;
}

JCP_91

08-23-2016, 12:01 PM

Thanks for the reply!

Yes there are multiple H1s. I only want to change the font of the "Page Title" module, on the homepage only?

Is this possible to do? Thanks :)

noypiscripter

08-23-2016, 02:00 PM

Every page has a unique CSS class in the body tag in the format of pageXXX where XXX is the page id. You can use that in your CSS to distinguish the homepage.

I'm just on my phone at the moment I can't post the exact CSS to use.

shimei

08-23-2016, 04:07 PM

Every page has a unique CSS class in the body tag in the format of pageXXX where XXX is the page id. You can use that in your CSS to distinguish the homepage.

I'm just on my phone at the moment I can't post the exact CSS to use.

How do you find the page id on every page Glenn? I can find the individual widget id of the module but I can't find the page id?

Would appreciate maybe step by step instructions. For example, F12 in Firefox.... then....

Enjoy,
William

noypiscripter

08-23-2016, 04:28 PM

Right click > Inspect, then look for <body> tag. It has a class "pageXXX".

For example, in my site (http://vbmods.rocks/), the homepage pageid is 1, so the body tag has page1 class. To change the font size for the page title on homepage, the CSS would be:

.page1 .page-title-widget .module-title h1 {
font-size: 30px;
}

JCP_91

08-24-2016, 10:06 AM

Thanks, works perfectly!

SPVB

01-01-2022, 11:27 PM

Worked perfectly for me too! Thank you so much!