Joomla Templates Club 406,261 posts

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#204412

I am using the Uber default template on Joomla 3.3.6 (not updating to Joomla 3.4 until Joomlart indicates it is ok to do so).

The h1 font size is too big and I would like to make a global change from 56px to 26px.

I tried to change the size with the following code:

h1 {
font-size: 26px;
}

and also

h1, .h1 {
font-size: 26px;
}

but was unsuccessful.

I tried to make the change in uber/css/custom.css and then in uber/local/css/template.css .

I noticed the default sizes in template.css for h1-h6 are 56px, 45px, 32px, 24px, 16px and 14px respectively, how do I make changes to all the sizes?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#561959

It’s odd that the custom.css option isn’t working (just tried it myself within your site files).
I wonder if it’s a browser cache issue.

In any case, you can always modify the core template rules, within file path —> /templates/uber/css/template.css


h1, .h1 {
font-size: 56px;

}

h2, .h2 {
font-size: 45px;

}

h3, .h3 {
font-size: 32px;

}

h4, .h4 {
font-size: 24px;

}

h5, .h5 {
font-size: 16px;

}

h6, .h6 {
font-size: 14px;

}

SOME of the various headings throughout the site have their own classes – which you can try to add as “font-size” property to in effort to override the base class.

1 user says Thank You to TomC for this useful post

1. daveburstein

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#562028

It is very strange that custom.css and uber/local/css/template.css do not override the core files (all cache has been switched off from before i posted the issue), perhaps something to look at before the next Uber update as amending the core files will need to be repeated each time I move to a new version of Uber.

I switched CloudFlare to Development mode for a final test with the same result and have now taken the only available option at this time by amending the core files as you suggested:

H1 from 56px to 32px

H2 from 45px to 28px

H3 from 32px to 24px

H4 from 24px to 20px

H5 and H6 are unchanged.

The adjustment has fixed my problem (thank you for suggestion) and hopefully a core file override will be available at some future date.

1 user says Thank You to Richard A for this useful post

1. TomC

[Richard A Friend Richard AJoin date: January 2013Posts: 190Downloads:19Uploads:14 Thanks: 35 Thanked: 18 times in 2 posts]

#562340

Update ref my last post

I have adjusted the font sizes to a slightly smaller value now as it works much better with other components:

H1 from 56px to 26px (from 32px)

H2 from 45px to 24px (from 28px)

H3 from 32px to 22px (from 24px)

H4 from 24px to 20px (no change)

H5 and H6 are unchanged.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#562674

Glad you were able to find a solution that works for you.

All the best with your continuing site development. 🙂

[Author]

Posts