Custom.css style not loading in editor Preview mode.

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 Offline

Official support hours

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

Please create a new Ticket and we will get back to you as soon as we can.

#107574 Custom.css style not loading in editor Preview mode.

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 Thursday, 29 April 2021 16:52 BST

Monday, 26 April 2021 09:48 BST

wintercorn

I'm using shaper_helixultimate and have copied the template custom css to a file named custom.css in the templates folder. The template css box is now empty.

The editor preview doesn't show the front-end styles when editing a K2 item.

I've cleared the cache repeatedly.

CSS path is : templates/$template/css/custom.css

Any suggestions?

Thanks.

Monday, 26 April 2021 16:27 BST

Ryan

What are the contents of the custom.css file?

Please post a link to your site front-end.

Ryan Demmer

Lead Developer / CEO / CTO

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

Monday, 26 April 2021 16:29 BST

wintercorn

custom.css contains the css which would normally go via the template options.

Front end : https://www.fashionsfinest.com/

Monday, 26 April 2021 16:32 BST

Ryan

custom.css contains the css which would normally go via the template options.

It appears to be missing quite a lot.

With the Editor Styles option set to Template CSS Files, the editor should be able to detect and load the correct files for your template.

Please try JCE Pro 2.9.6 RC3 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

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

Monday, 26 April 2021 16:36 BST

wintercorn

Looks better but still not pulling in the correct body font which should be 'Oswald', sans-serif;.

Monday, 26 April 2021 16:41 BST

Ryan

That is because the font is loaded externally by the template and not via a css file, so it isn't loaded by the editor. In this case, create an editor.css file in the template's css foolder and add the following to it:


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

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

The editor will then automatically load this editor.css file.

Ryan Demmer

Lead Developer / CEO / CTO

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

Tuesday, 27 April 2021 09:58 BST

wintercorn

I've done that and it didn't load the correct font. However when I edit (plugins/system/jce/css/content.css) and add the body font, it does. I assume that this will be overwritten upon update and isn't a long term fix though?

Tuesday, 27 April 2021 10:31 BST

Ryan

change the contents of the editor.css file to:


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('bootstrap.min.css');
@import url('template.css');
@import url('presets/default.css');

body{font-family: 'Oswald', sans-serif;font-size: 16px;font-style: normal;}
h1{font-family: 'Oswald', sans-serif;font-style: normal;}

Ryan Demmer

Lead Developer / CEO / CTO

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

Tuesday, 27 April 2021 10:38 BST

wintercorn

And that looks like it works. Thanks! 😃

Wednesday, 28 April 2021 11:55 BST

hundenarr

Hi,
it seems that I have a similar problem. I don´t mind about the used font in editor preview mode. But I need some custom css classes for formatting content. Especially the "insert caption" option for images. There was a list of css classes from the template. I used this list for years with JCE Editor and applied a custom class for formatting font of the caption. But since the last JCE updates the list is not being offered anymore.

I tried to use the editor.css solution, but without success. Any other idea to use custom css classes from rocktettheme template?
URL: https://hunde-ferienhaeuser.de/nordsee/reg/emsland.html

Wednesday, 28 April 2021 12:20 BST

Ryan

Please try JCE Pro 2.9.7 Beta 3 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

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

Wednesday, 28 April 2021 15:01 BST

hundenarr

I tried JCE Pro 2.9.7 Beta 3, but still there are no custom.css styles in editor preview mode. And no ustom css classes for image caption.

Wednesday, 28 April 2021 16:06 BST

Ryan

I used this list for years with JCE Editor and applied a custom class for formatting font of the caption. But since the last JCE updates the list is not being offered anymore.

Are you using a custom.css file? Where is the file located?

Ryan Demmer

Lead Developer / CEO / CTO

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

Thursday, 29 April 2021 07:41 BST

hundenarr

Yes, custom file is a scss file. It is located here: template/rt_citadel/custom/scss/custom.scss

Thursday, 29 April 2021 07:48 BST

wintercorn

I'm still getting notifications about new posts from this thread despite unsubscribing. Any suggestions on how to stop them?

Thursday, 29 April 2021 12:19 BST

Ryan

[quotePost id="107660"]I'm still getting notifications about new posts from this thread despite unsubscribing. Any suggestions on how to stop them?[/quotePost]

I have manually deleted the post subscription, so hopefully you won't see this notification! :)

Ryan Demmer

Lead Developer / CEO / CTO

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

Thursday, 29 April 2021 12:20 BST

Ryan

[quotePost id="107659"]Yes, custom file is a scss file. It is located here: template/rt_citadel/custom/scss/custom.scss[/quotePost]

The file must be a css file, located in the template/rt_citadel/custom/css-compiled/ folder.

Ryan Demmer

Lead Developer / CEO / CTO

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

Thursday, 29 April 2021 13:19 BST

wintercorn

[quotePost id="107662"][quotePost id="107660"]I'm still getting notifications about new posts from this thread despite unsubscribing. Any suggestions on how to stop them?[/quotePost]

I have manually deleted the post subscription, so hopefully you won't see this notification! :)[/quotePost]

Just got two of them 🙁

Thursday, 29 April 2021 13:46 BST

hundenarr

So the css file has to be template/rt_citadel/custom/css-compiled/custom.css

Thursday, 29 April 2021 14:00 BST

Ryan

[quotePost id="107671"]So the css file has to be template/rt_citadel/custom/css-compiled/custom.css[/quotePost]

It's the compiled custom css file, so in your case it is templates/rt_citadel/custom/css-compiled/custom_13.css

But this should be detected and loaded by JCE.

Ryan Demmer

Lead Developer / CEO / CTO

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

Thursday, 29 April 2021 14:48 BST

hundenarr

I created an editor.css file in the template's css foolder and added the following to it:


@import url('template/rt_citadel/custom/css-compiled/custom_13.css');

But nothing changed. Or did I get something wrong?

Thursday, 29 April 2021 16:52 BST

Ryan

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.