How to adjust default font size in JCE Editor 2.9.17 Joomla 4. Writings are not readable.

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

#109594 How to adjust default font size in JCE Editor 2.9.17 Joomla 4. Writings are not readable.

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Tuesday, 02 April 2024 20:08 BST

Friday, 26 November 2021 23:00 GMT

[email protected]

Dear Ryan,

I can't read what I'm typing in the backend.
The font size is too small in the Backend.
The font size is fine on the frontend using Cassiopeia.

Using Joomla 4 standard templates Cassiopeia and Atum.

Global Configuration / Site / Default Editor ... set to Editor – JCE
Components / JCE Editor Pro / Global Configuration / Editor Styles is Default ...
it uses Default JCE Editor Styles

How to find css file when F12 doesn't "Inspect" your area.

Templates/cassiopeia/css/editor.css
Templates/system/css/editor.css
componentns/com_jce/editor/libraries/css/editor.min.css

Where to modify text-size ?

Please advise

Saturday, 27 November 2021 11:36 GMT

Ryan

Components / JCE Editor Pro / Global Configuration / Editor Styles is Default ...

Set this to Template CSS File so the editor uses the template's stylesheets.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Saturday, 27 November 2021 15:22 GMT

[email protected]

Thanks. I will wait the full answer.

Set Components / JCE Editor Pro / Globak Configuration / Editor Styles ... to Template CSS

Administrator Templates / Atum Details and Files / css / template.css

root {
--body-font-size: 18pt; /* instead 1 rem; line 82 when each semicolon is entered */
}

Doesn't work

Article text size is still font-size 10 pt.

I will need 2.0X reading glasses for that.

Saturday, 27 November 2021 15:26 GMT

Ryan

Administrator Templates / Atum Details and Files / css / template.css

root {
--body-font-size: 18pt; /* instead 1 rem; line 82 when each semicolon is entered */
}

JCE does not load the admin template.css file, but the site cassiopeia template.css file - templates/cassiopeia/css/template.css

In this file, the default font-size is 1rem.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Sunday, 28 November 2021 16:04 GMT

[email protected]

Thanks, found it, it works

Thursday, 13 January 2022 13:45 GMT

[email protected]

Update Joomla 4.0.5 JCEPro 2.9.19-Beta7
Font Size in text area is standard 10pt.
It is too small to read without glasses.

System / Site Templates / Cassiopeia / CSS / Template.css

Line 08 :root {

--body-font-size: 1rem;

change into
--body-font-size: 18pt;
or into 2rem ... that doesn't work (anymore)

Attachments

Thursday, 13 January 2022 14:19 GMT

[email protected]

Solved.
You need to log out and log in again to see the effect.

Saturday, 23 July 2022 19:26 BST

joonchen

Hi there,

Can someone please describe a step-by-step solution for this? Creating or editing an article in the backend with template Autum 1.0 is difficult to read, specially with a high resolution widescreen monitor. I went to:

System > Administrator Templates > Atum Details and Files > Editor > /media/templates/administrator/atum > CSS > template.css (it says "Editing file "‎/media/templates/administrator/atum/css/template.css" in template "atum".) > changed "--body-font-size: 1rem;" to "--body-font-size: 18pt;" > logged out, logged in again, but no changes.

I don't want to edit the article from the frontend, only from the backend.

Joomla v4.1.5
Autum v1.0
JCE Pro v2.9.28

Thanks in advance!

Monday, 25 July 2022 11:01 BST

Ryan

@joonchen# - Clear your browser cache after making any changes to the template css files.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 25 July 2022 15:33 BST

joonchen

Yes, I already did that, but its still not working. Any other hint? Thanks.

Monday, 25 July 2022 17:09 BST

Ryan

@joonchen# - Please send me a login - https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 01 August 2022 10:21 BST

Ryan

@joonchen# If you want to change the font-size of the editor content only, and not have it affect the front-end content display, then you need to create an editor.css file in your template's css folder, and add the new font-size, plus import rules for the template's stylesheets. So in your case the contents of the editor.css file in templates/shaper_helixultimate/css/ would be:


@import url('bootstrap.min.css');
@import url('template.css');

:root {
  --bs-body-font-size: 18pt;
}

I have made this change on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 01 August 2022 10:25 BST

joonchen

This is brilliant, thanks Ryan! Superb support!

Friday, 29 March 2024 09:36 GMT

rolf2

Hi, I do not manage changing font-size. I followed instruction. I put this code


@import url('bootstrap.min.css');
@import url('template.css');

:root {
  --bs-body-font-size: 30pt;
}

in templates/shaper_helixultimate/css/editor.css I set global configuration to template CSS File and deleted browser cache but it doesn't work. 🙁 Please help. Best regards Rolf

Edited by rolf2 on 2024-03-29 09:39 GMT

Friday, 29 March 2024 11:13 GMT

Ryan

@rolf2 - This is working in my tests. Please send me a login - https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 01 April 2024 11:07 BST

Ryan

You have a custom.css file with a font-size style:


body, div, p {
  font-size: 1rem;
}

JCE loads the custom.css file for a template if there is one, and so this is overriding the --bs-body-font-size: 30pt; for most text.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 01 April 2024 11:37 BST

rolf2

Thanks so far. Can't it be switched off in the global configuration that JCE loads the custom.css? Or does there exist any workaround?

Tuesday, 02 April 2024 20:08 BST

Ryan

Can't it be switched off in the global configuration that JCE loads the custom.css? Or does there exist any workaround?

You've added it yourself in Editor Profiles -> Plugin Parameters -> Style Select, as a Custom CSS File for the Styles list. Therefore it is loaded into the editor.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.