Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JCE icones + fontawesome with Astroid 2.6.3 #263

Closed
marionlep opened this issue Dec 13, 2022 · 16 comments · Fixed by #261
Closed

JCE icones + fontawesome with Astroid 2.6.3 #263

marionlep opened this issue Dec 13, 2022 · 16 comments · Fixed by #261
Labels
bug Something isn't working SOLVED!

Comments

@marionlep
Copy link

I have a problem with version 2.6.3 of Astroid. JCE icons are no longer visible in frontend and fontawesome either. I put back a 2.6.0 version and everything works perfectly... Can you tell me how to solve it please?
@Chacapamac
Copy link
Collaborator

Chacapamac commented Dec 13, 2022 •
edited

I just look at one of my websites with Astroid 2.6.3 and the last JCE Pro and it seem to be OK
Astroid versions
astroid

My JCE Editor Styles CSS Global configuration
Template-style

Result in frontend

jce

Note 1:
My Awesome import call in my JCE custom “editor_content.css” in JoomlaRoot > templates > astroid_template_zero > css
—> @import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

Note 2:
My JCE Profile Editor Layout Toolbar Theme is : Classic Touch

— Today, I’m pushing another website to 2.6.3 and check again.
— Do you see any errors in the console?
— What template are you using?

@marionlep
Copy link
Author

marionlep commented Dec 13, 2022 via email

@Chacapamac
Copy link
Collaborator

Chacapamac commented Dec 14, 2022 •
edited

@marionlep
Note: I’m still on Joomla 3 on these websites. You?

I forget to tell you that in my JCE Profile, I add my normal “editor_content.css” custom file in the normal Joomlaroot > templates > my_template_name > css
added to my JCE Editor Profile > Editor Parameters > Typography > Editor Styles this way...
editor-profile

• Without this custom file there and added the way I show, nothing work, I do not see any of the template formatting or my few editor specific css.

• My custom editor file is minimal as I use the Global Parameters above

@import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

/*:::::::::: SPECIFIC CSS to JCE EDITOR ::::::::::::::*/
/* Graf Spacer */
span.graf-spacer::after{
	content: "SPACER";
	font-size: 2rem;
	color : Gray;
}
span.graf-spacer{
	background-color: #edfac7;
}
span.graf-spacer.demi::after {
	content: "SPACER Demi";
}
span.graf-spacer.quart::after {
	content: "SPACER Quart";
}
span.graf-spacer.smallest::after {
	content: "SPACER Smallest";
}

The results in the Editor Window (backend/frontend) is really close to a WYSIWYG editor. I can see my custom typography and size (added by my custom scss file (in the media folder). My custom colors, the Awesome icons, everything.

In my case I find weird that I need to have this setup to make it work?
— I start a discussion with Ryan (JCE) to get more info here —> https://www.joomlacontenteditor.net/support/forum/112619-with-template-css-files-moved-to-the-%E2%80%9Cmedia%E2%80%9D-folder-when-using-a-%E2%80%9Cchild-template%E2%80%9D-ready-template,-jce-global-config-%E2%80%9Ctemplate-css-file%E2%80%9D-no-longer-show-css-in-editor

It always work flawlessly before the “Child Template” changes starting with Astroid 2.6.0 UP

@Giorgi625
Copy link

Giorgi625 commented Dec 17, 2022 •
edited

I have same problem. I have two template styles on one website.
Using Template One.
First style is used only on Homepage and it has problems with Fontawesome, I before used Fontawesome 5 icons in my module and it worked fine but after update I can not see my icons. problem is also with back to top button icon and + icons in menu to open submenu.
While icons work fine on another style which is set as default for all other pages.

You can check this page https://infozugdidi.ge
In menu 3rd and 4th items have squares at the end where should be +
Also module where is castle on background there are 9 block each of them have on top right corner area with white background where should be shown purple fontawesome icons but they are not shown while in source code there is everything correct.
I have set font-size in css but it shows 0x0 when I check in source code.
I do not used for this JCE, I created custom module so content in that module is written by me directly in php file.

@Chacapamac
Copy link
Collaborator

@Giorgi625
Weird
One thing I cannot see on your website is that I cannot see anything awesome loading.
You should see the CSS call to the Awesome fonts and the calls to load each awesome fonts groups
Like here on this website —> https://efoilsurf.ca/en/

Screen Shot 2022-12-18 at 11 38 32 AM

I cannot see any of these loading on your website?

I will take a look again...

@Giorgi625
Copy link

Yes you are right, I also can not see in network loading of fonts except one custom ttf font, but no fontawesome, but on other pages where I used another style of template there are two fonts loaded fa-brand and fa-solid which are pointed to all.css
So I do not understand why it loads on one style and does not on another.

@Giorgi625
Copy link

It was caused by minify feature of Astroid, when I disabled it, everything started to work fine.

@Chacapamac
Copy link
Collaborator

Minify is always tricky but as Awesome is a part of Astroid the Minify setting should not brake the Awesome fonts.
I mark it as a bug. —> @sonvnn
Good Day @Giorgi625

@Chacapamac Chacapamac added the bug Something isn't working label Dec 19, 2022
@sonvnn
Copy link
Member

sonvnn commented Dec 21, 2022

@Chacapamac @Giorgi625 @marionlep May you detail the issue via screenshot? I test Astroid Minify CSS with JCE Free and everything go well.
Please detail the issue will help me to find solution faster.

Thanks & Best Regards,
Sonny

@Chacapamac
Copy link
Collaborator

Chacapamac commented Dec 21, 2022 •
edited

Just as info, I make a small mistake (but still working) in the settings for JCE. I was at the same time in discussion with Ryan from JCE to clarify how to setup JCE to have a WYSIWYG view (with Awesome fonts) when in the editor window with templates using the new Joomla “Child Templates” like Astroid.

This is the way to set JCE Editor to have a WYSIWYG —————————————————————

When you update with Astroid Framework/Templates 2.6.0 UP (with the “Child Templates” ability)

• Move the JCE custom css file “e.g. editor_content.css” (or the name that you choose for it) normally in the Joomlaroot > templates > name_of_your_template > css folder to the Joomlaroot > media > templates > site > name_of_your_template > css folder

• Before that move, If you want to see the Awesome icons in your Editor. you should change any call for the Astroid local Awesome library from
@import "../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";
to
@import "../../../../../media/astroid/assets/vendor/fontawesome/css/all.min.css";

The configuration for JCE should be:
• JCE Global Configuration
Screen Shot 2022-12-21 at 9 44 57 AM

• JCE Editor > Profil in use > Editor Parameters > Typography > Editor Style
— Put Editor Styles to “Add”
Screen Shot 2022-12-21 at 9 49 45 AM

— There, also change the Custom editor CSS file(s) path from
Screen Shot 2022-12-21 at 9 50 59 AM
to the New Path
Screen Shot 2022-12-21 at 9 51 56 AM

media/templates/site/$template/css/editor_content.css

@sonvnn (You can use that in the Astroid Tutorials)

————————————————————————————————
Note If you want to see your custom fonts in your editor for a better WYSIWYG
Normally I use my custom scss to load my own custom fonts and bypass Astroid fonts settings. My trick is to put my custom fonts files in a folder inside my created “font” folder in the Joomlaroot > media > templates > site > name_of_your_template folder. By putting the fonts files in a folder the Astroid system doesn't see these fonts as possible “Custom Fonts” and not loading them.
The custom fonts are loaded by my custom.scss file by that type of calls:

///* Source-sans-pro 400 - regular - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/sourcesanspro/source-sans-pro-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Screen Shot 2022-12-21 at 10 08 24 AM

That way the custom fonts are loaded in the website frontend and also in JCE editor because the fonts calls become parts of the compiled css that are pickup by JCE (with the settings above).

The following have to be tested, but logically should work...
If somebody want to use the Astroid Framework Typography control and also see their custom fonts in the JCE Editor, they should put the custom fonts files loose in the “fonts” folder where Astroid Template Manager can use them as “Custom Font” and add the fonts calls to the custom JCE Editor CSS file(s) e.g. editor_content.css

• My only question here is if the editor_content.css is in the Joomlaroot > media > templates > site > name_of_your_template > css folder, if this setup will not load the custom fonts 2 times, one with the Astroid Custom Fonts Management and another time with the editor_content.css file ?
Not sure here. I will test and come back, because I realize that the same “double load” can also happen with the Awesome call in editor_content.css file.
If it so, maybe we can move the editor_content.css in a neutral place in Joomla where it is not pickup by the systems but still accessible by modifying the path to it in JCE Configuration.
I test that and come back.

@marionlep
Copy link
Author

marionlep commented Dec 22, 2022 via email

@Giorgi625
Copy link

This is when minify is off
minifyoff

This is when minify is on
minifyon

As you can see menu icons and back to top icon dissapear, also icons in module on white background dissapear.

@sonvnn
Copy link
Member

sonvnn commented Dec 24, 2022

Hi @Giorgi625 ,

May you send me your admin account? I will help you check it.

Thanks & Best Regards,
Sonny

@Giorgi625
Copy link

Hi @Giorgi625 ,

May you send me your admin account? I will help you check it.

Thanks & Best Regards, Sonny

I already send and mentioned you in another issue here when I sent it to your email.

@sonvnn
Copy link
Member

sonvnn commented Dec 29, 2022

Hi @Giorgi625

Sorry for late reply. Just busy for Year end. I fixed this issue in c8da125

I updated framework on your site. Please help me check it https://infozugdidi.ge/

Thanks & Best Regards,
Sonny

@Giorgi625
Copy link

Confirm, fonts load correctly now when Minify is Enabled. Thank you.

Merry Christmas and Happy New Year

@sonvnn sonvnn linked a pull request Dec 30, 2022 that will close this issue
Version 2.6.4 #261
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working SOLVED!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Version 2.6.4 templaza/astroid-framework
4 participants
@Chacapamac @sonvnn @Giorgi625 @marionlep