Font are too big at frontend & backend (Cassiopeia & Atum)

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
gio4000
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sat Nov 29, 2008 11:30 am

Font are too big at frontend & backend (Cassiopeia & Atum)

Post by gio4000 » Wed Aug 02, 2023 3:18 pm

Hi,
i am new to Joomla4. At frontend (template Cassiopeia) & backend (template Atum), the font are too big for the whole website : body, header, menu, title, etc ... How to make it smaller ??

i try to set at cassiopeia (after create user.css) , following this : viewtopic.php?t=998841

Code: Select all

:root {
  --body-font-size: 0.9rem;
}
the text is better (smaller), but the article title, menus, menus item, etc is too big. how to change this ? if i click at inspect at my browser, i see "template.min.css" . then i try to edit it, but it seems too complex for me ... (please see attachment). any idea to solve this ??

And how to do the same thing to atum template at backend , because the font are very big too ...
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1681
Joined: Tue Jun 30, 2020 12:17 pm

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by Pavel-ww » Thu Aug 03, 2023 7:49 am

gio4000 wrote: Wed Aug 02, 2023 3:18 pm if i click at inspect at my browser, i see "template.min.css" .
Hi. You not need to edit template.min.css. Never edit the core files of the template. Right in browser Dev Tools change the values of CSS properties you need, copy result CSS code from there and paste into your user.css file. This action will override the code wich comes from template.min.css

For backend template (Atum) create and use user.css the same way as for frontend template (Cassiopea)
1.jpg
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31097
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by Per Yngve Berg » Thu Aug 03, 2023 10:15 am

There is an Option to adjust the font-size in most browsers.

Adjust to match the screen size of the computer.

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 471
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by Mr. Wimpy » Thu Aug 03, 2023 10:17 am

Before randomly changing font-sizes of core templates:

1. Have you looked at your website with a different browser?

2. Did you (accidently) zoom in in your browser?
Can be undone by pressing CMD+0(zero) / CTRL+0

Although #2 might not be the case, because it would have increased the fontsize for "Toggle Menu" too.

I could recreate your screenshot by increasing the fontsize for just the main menu list.

Can you open the inspector in your browsers dev-tools and select
<ul id="menu12" class="nav flex-column main-nav metismenu">
This is the main menu list.
And then post a screenshot of the styles used for that element.

gio4000
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sat Nov 29, 2008 11:30 am

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by gio4000 » Fri Aug 04, 2023 3:48 am

Pavel-ww wrote: Thu Aug 03, 2023 7:49 am
gio4000 wrote: Wed Aug 02, 2023 3:18 pm if i click at inspect at my browser, i see "template.min.css" .
Hi. You not need to edit template.min.css. Never edit the core files of the template. Right in browser Dev Tools change the values of CSS properties you need, copy result CSS code from there and paste into your user.css file. This action will override the code wich comes from template.min.css

For backend template (Atum) create and use user.css the same way as for frontend template (Cassiopea)

1.jpg
Hi Pavel-ww, Per Yngve Berg & Mr. Wimpy,

First of all, thank you very much for your reply, ideas & clues.

*) Regarding adjusting font size at my browser, or using other browser, i think it has its own weakness. and yes, i got problem with my old eyes, and my "reading (+) glasses" help me much, so i set the font bigger at my browser.
i use this browser to see other websites without problem with current setting, and using joomla3 css setting also gives good result.... So, i think it will give an extra work for visitor (including the editor/publisher of the website) to adjust their browser later, each time they visit the website, if the setting i let it like this.

*) About NOT changing the core css file, ok ... thanks a lot for this. this will reduce future upgrade problem, i did not think about this before ...

*) i tried to do a "trying & error" with user.css file , this below is just example & and it works great !!

Code: Select all

:root {
  --body-font-size: 0.9rem;
}

.metismenu.mod-menu .metismenu-item {
  font-size: 0.7rem;
  line-height: 1.5;
}

.card-body {
  font-size: 0.7rem;
}

.h2, h2 {
  font-size: 0.9rem;
}

.h3, h3 {
  font-size: 0.8rem;
}

Thanks again for your clue ...
Best Regards, gio

gio4000
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sat Nov 29, 2008 11:30 am

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by gio4000 » Fri Aug 04, 2023 7:03 am

Mr. Wimpy wrote: Thu Aug 03, 2023 10:17 am Before randomly changing font-sizes of core templates:

1. Have you looked at your website with a different browser?

2. Did you (accidently) zoom in in your browser?
Can be undone by pressing CMD+0(zero) / CTRL+0

Although #2 might not be the case, because it would have increased the fontsize for "Toggle Menu" too.

I could recreate your screenshot by increasing the fontsize for just the main menu list.

Can you open the inspector in your browsers dev-tools and select
<ul id="menu12" class="nav flex-column main-nav metismenu">
This is the main menu list.
And then post a screenshot of the styles used for that element.
Hi Mr. Wimpy,
the result of Atum template inspect is below (please see attachment). At the right side, i can see ".main-nav {" .
and as i change like this, the result is strange like 2nd screenshots.
note: This image is taken after i directly updated that "main-nav" at inspect css area.

Code: Select all

.main-nav {
  font-size: 0.5rem;
  padding: 0;
  width: 10rem;
}

But, after i put it to "user.css" & save that file at backend & refresh my browser, the result is going back like before (not changed at all - please see 3rd image)... the location of file is under "‎.../media/templates/administrator/atum/css/user.css"

note: i just put it under ":root" block & later move it to above ":root", but same result ...

Code: Select all

:root {
  --body-font-size: 0.7rem;
}

.main-nav {
  font-size: 0.5rem;
  padding: 0;
  width: 10rem;
}

You do not have the required permissions to view the files attached to this post.

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 471
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by Mr. Wimpy » Fri Aug 04, 2023 10:24 am

From what I can see, the css looks normal.

I don't think setting fontsizes is the solution here.
Because the weird part is that some text is bigger and other text seem to look normal.

- Using a different browser can tell us if this is related to your usual browser or if this is related to the website.

- What fontsize have you set in your browser?
- Have you cleared the cache?
- What did you do before you noticed the bigger fontsizes? Where they ever correct?
- Do you use addons that increase fontsizes? (of certain elements, like nav or h1-6? (not sure if they exist, though))

gio4000
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Sat Nov 29, 2008 11:30 am

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by gio4000 » Sat Aug 05, 2023 6:21 am

Mr. Wimpy wrote: Fri Aug 04, 2023 10:24 am From what I can see, the css looks normal.

I don't think setting fontsizes is the solution here.
Because the weird part is that some text is bigger and other text seem to look normal.

- Using a different browser can tell us if this is related to your usual browser or if this is related to the website.

- What fontsize have you set in your browser?
- Have you cleared the cache?
- What did you do before you noticed the bigger fontsizes? Where they ever correct?
- Do you use addons that increase fontsizes? (of certain elements, like nav or h1-6? (not sure if they exist, though))
Hi mr.Wimpy,

for comparison and debugging, i installed J4.3.3 and J3.10.12 from scratch, and J3 fonts is much better (please see attachment for font comparison, using same browser & setting). i am no so sure, J3 use fixed pixel for font ... or rem, or ...??

about your questions:
*) i am using FireFox 116, i think it is the last version.
*) my font size is big: 28, but i think it is not the problem. with same setting, i can see the small fonts at joomla3 (front end & back end)
*) no addons for increasing fontsizes ...
*) this website is upgrade from J3.10.12 , and i got some problem after upgrading to J4.3.3 , example:
viewtopic.php?f=812&t=987857&start=30#p3697675 ,
viewtopic.php?f=812&t=1003022&p=3698163#p3698163

*) CLEARING CACHE => yes ... may be this is the solution ... thanks.
after clearing cache it seems to work...

so, there are much css setting to be changed ... still need time for that ... but at least the problem is solved temporary.

*) one question:
is it possible to use J3 css for J4 , so i do not need to check each page one by one ??

Best Regards, gio
You do not have the required permissions to view the files attached to this post.

JimHomyak
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Sun Jun 19, 2022 6:37 pm

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by JimHomyak » Sat Jun 08, 2024 7:47 am

Great topic! If I sit here and ctrl+mouse-wheel my browser magnification from 100% down to 67% then my entire Atum backend looks fantastic. Reminiscent of J3.10 days. So where and how can I set some atum or atum_child user.css to make the entire Atum backend about 67% as large as the typical 1em = 16px?

how about something like this?

one-fell-swoop {
everything: 67%
}

Back in the day, with Beez3 I could select my font size as a front-end user with that nifty size selector, which sadly fell by the wayside.

JimHomyak
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Sun Jun 19, 2022 6:37 pm

Re: Font are too big at frontend & backend (Cassiopeia & Atum)

Post by JimHomyak » Sat Jun 08, 2024 6:33 pm

Tried all of the above. Still not able to glam-slam Atum back down to decent sizes globally. With browser set to 100% magnification most all sites look well proportioned. Pop back over to Atum, and the whole thing IS GIANT AND WIDE AND ALL SCREEN CONSUMING. With the browser set to 80% we are acceptable on Joomla... but of course too small for other sites. Why am I complaining? I got a 27" screen too.

This stuff really matters a lot! Especially when you are busy and have to keep turning all your columns off and on to be able to see everything at a glance. In the screen shots above, I see the same problem. One looks large as life. The other looks like 75%.

Of course when you mouse-wheel your magnification in one browser tab, all those other tabs change right along with you.


Post Reply

Return to “Templates for Joomla! 4.x”