Forum Replies Created
-
-
Hi Abe,
Thanks for sending the screenshot. Well, this figures. I had a feeling this was malfunctioning on our site.
I’ve been pretty overloaded here the last 24 hours with other work. But I plan to start my conflict testing today. The good news is that I can test for this conflict and the loading delay issue at the same time. Perhaps we have plugin conflicts causing both problems.
I will get back to you with the results of my testing. Hopefully I can get this done within the next 24 hours.
I’ll be in touch!
~ Michael
Hi Abe,
I’m actually glad to hear that the switches look like they’re malfunctioning to you. This means there must be a conflict occurring somewhere, and now I can look for it. I would welcome some better working switches.
Btw, you forgot to attach the screenshot of how the switches should look.
….
I agree with you that the next step here to diagnose the loading problems is to start deactivating plugins one by one. I’ll be taking care of this shortly, likely tomorrow.
With a little luck I’ll have some answers this week as to what’s causing all of this.
I’ll be in touch…
~ Michael
Hi Abe,
Thanks for getting back to me about all of this…
First, regarding the theme’s option switches:
I have just attached a screenshot here that shows how the switches appear on my end. As you can see only one side of the switch is visible at any time. I’m not sure if this is by design, but I always prefer a switch that displays both sides, and indicates the one selected with a different color.
The more confusing aspect of this is that the on/off option displays the opposite of what it’s actually set for. If the option is set to “On” for example, than what you actually see is “Off.” I don’t know about you, but this is very counter-intuitive to me. Assuming you’re only supposed to see one half of the switch (as is in my screenshot), it would make more sense to see what the option is currently set for (and not it’s opposite).
I have a feeling that perhaps I’m not seeing this as its supposed to be. Please do let me know!
Regarding our much more serious css loading delay problem:
It may become necessary to let you into our site to look at this, but I’m not quite there yet. I’m developing a new platform here, and it’s best not to allow any third party access for now. Of course if I can’t solve this myself, I may be forced to let you in to help.
I have done some testing using this plugin:
https://wordpress.org/plugins/re-order-css-and-js-loading-order/I tried changing many loading orders, including having the child-theme css load first (ahead of the theme’s css). This made no difference. I’ve tried changing around the various scripts, and also no luck. It seems that no matter what order things are loaded in this problem persists.
I’ve also tried using the Timeline feature in Chrome’s inspector to narrow down the problem. You can clearly see the frames where the original css loads first, and then is later displaced by my custom css. But I haven’t been able to figure out the source of the problem with this tool.
The author of the plugin above said this sounds like a bad case of “Render Blocking.” I have noticed that this problem is present on every page of the website, even those without isotope post-grids (from visual composer). It looks like something in the background is causing the delay. The loading delay does vary as well, based on the size/complexity of the page, but it is there site-wide.
My next steps are to start deactivating plugins one by one to see if they are somehow the cause.
Are you sure you’ve never seen this before? You would only see it if you had heavily modified things (like in the header). This is why I asked you to test on your end with a large css override. All you would need to do is set something to hide in the header, or to be in a different position. Do this only with a css override in the child-theme. If you see a shift/delay on your end, this is indeed a theme related problem.
I’ll get back to you as I test further. Please be patient, as I am working on many things here at once. This is a serious problem for me though and I must get it solved no matter what.
My thanks again for your help and patience!
~ Michael
Hi Abe,
I agree, this is one strange issue, and right now it’s my single biggest concern on the site. I’m developing what is going to be a very high trafficked website, and this loading issue is a little scary because I don’t know the cause. I’ve never seen anything like this before.
I don’t know if you read all of my last posts, but I had installed a plugin that allows me to reorder any of the JS scripts or stylesheets. Right now this is my best bet for troubleshooting. I did try loading the child-theme css first (before the parent theme css), but it made no difference at all.
I think you’re correct that this may have to do with a script. The problem is that it’s like looking for a needle in a haystack. There’s a lot of scripts that could be causing this.
Did you ever try testing the css override I provided to see if you could duplicate this problem on your end? It would be helpful to know this, as that would tell me whether or not it’s something in the theme itself.
I’m going to get back to this issue starting early next week. I have something else I need to finish here first. If you can do that css test for me I’d appreciate it.
I’ll let you know what I discover here as well when I start testing. Just please give me a few days on this.
…..
P.S. I had this unanswered side question for you:
I noticed in all of theme settings that the on/off switches display the opposite of what they’re set for. In other words, if an option is set to “On,” you actually see “Off.” I’ve seen this kind of thing in other theme settings before. Is this by design, or is there some kind of problem on my site? I should also note that you can only see one half of the switch at a time (either on/off) depending upon how it’s set.
…..
Talk soon,
Michael
Hi Abe,
I hope you had a happy holiday!
Sorry for getting back to you so late. I’ve been pretty tied up with other matters these past few days.
I think we’re all done here with regards to Fontello. You did a great job resolving the speed/loading issues, and I’m really glad I was able to load in all the icons after all. I’m going to fix the displaced icons one by one with overrides. I wanted to customize most of the icons anyway. I’m also glad to hear all these changes will be included in the next theme update.
I’m going to set this ticket to resolved now. My thanks again for providing such great support!
P.S. It’s great being able to speak directly with one of the theme authors/founders. Thank you for making yourself available like this!
~ Michael
Hi Abe,
Please read my previous posts first…
I tried loading my custom css file first and was amazed to find this did NOT work. I really thought that would have made the difference, but it had no effect. Btw, I found this really neat plugin for easily changing the loading order or JS and CSS files without messing around with functions.php. If you want to check it out: https://wordpress.org/plugins/re-order-css-and-js-loading-order/
It will definitely be helpful to know if you can recreate my problem on your end. I’m going to continue testing here in hopes I can find the source of the problem.
~ Michael
Hi Abe,
Please read my previous post first…
I had a thought here as to a possible solution:
No matter what the cause of this delay is, perhaps the solution is simply loading my child theme css first, before the theme css. I am in a position to do this because I do use !important on literally every single class in my custom css. I’ve been using !important across the board for custom css for years and it’s always worked well for me.
Usually child theme css is loaded last so that one doesn’t need to use !important everywhere. But since I’m already doing this perhaps I should just load it first, before the theme css. This may even work better for speed since I will ultimately have so many overrides.
What do you think?
~ Michael
Hi Abe,
Before I respond to the topic of this ticket, I have a quick side question…
I noticed in all of theme settings that the on/off switches display the opposite of what they’re set for. In other words, if an option is to “On,” you actually see “Off.” I’ve seen this kind of thing in other theme settings before. Is this by design, or is there some kind of problem on my site? I should also note that you can only see one half of the switch at a time (either on/off) depending upon how it’s set.
….
Regarding the css delay issues:
Did you try the css override test with the code I supplied in my last post?
I just did my own test here using the Quick CSS feature in the theme options as you suggested. It made no different whatsoever. The identical delay problem occurred. I also confirmed that the Quick CSS was being rendered, and not my original override. Apparently it makes no difference whether the Quick CSS is used, or style.css in a child theme. On that topic, I do need to use a child-theme as I will ultimately have thousands of lines of custom css.
It would really be helpful to determine the cause of this if you can perform an override test on your side using the same css I supplied. If you don’t see this problem it may indicate another cause in my installation. I hate to think this is from a plugin, but at this point I won’t rule anything out. I have noticed here that the delay in the custom css loading isn’t the same for each page. The larger the page (more content), the longer the delay is. It really looks like the style.css in the child-theme just gets loaded too late.
I’d rather test this on my side and not provide access to the site for now. I’m developing a large-scale website that must remain private for the time being. I’m sure you understand.
….
Regarding hiding the mobile header for particular pages:
I just confirmed essentially what you said. The side menu is just an alternative responsive css feature for the header. Whether it is enabled or not, the header will always change responsively to display a mobile version of some sort.
This means I am back to square one, with using only css overrides to solve this problem. I can do this, but like all of my custom css there will be a delay problem. I need to get that solved or any custom css I use will show an unacceptable delay/shift.
~ Michael
Hi Abe,
My compliments on both your level of support and your work. I must ask, are you the actual theme author I’m speaking to?
The reason I ask is because I want to tell you that this is one of the finest and most well-designed themes I have ever used. I’ve assembled dozens of WordPress websites (both for myself and clients), and this theme has impressed me at every level so far. I’m also impressed by your support and the fact the person I am speaking with is correcting problems in the theme in real-time. I’ve never had that privilege before with any other theme support, and you have my thanks for it!
The good news:
Your changes to the icon generation logic in the admin menus screen completely solved that speed/performance issue. I tested this using the most extreme situation I could, which was to load in all 2,358 Fontello icons. I also tested this using a menu with many menu items (over 40 menu items). The menu loaded up extremely fast, despite the sheer number of icons. I also confirmed that all 2,358 icons were displaying properly (there wasn’t a single icon missing).
Few quick questions and points:
1. I trust that all of these changes we’ve made together will be in the next theme update?
2. When do you anticipate the next theme update being made public?
3. As a suggestion I think you should put an icon search in the admin menu screen so that people can look up icons either by their code or name. If you have a lot of icons loaded as I do, it’s difficult to find the one you’re looking for without a search. I think you should implement a search feature in all theme locations where you can choose an icon.
4. As I previously reported all of the original icons for the theme are disrupted/replaced when you load in a fresh Fontello export. I didn’t bother testing loading the old .json file and then adding all remaining icons. I think if you’re going to choose entire icon collections as I have you should be able to just load a fresh export.
I took a closer look at some of the icons that were swapped out, namely the ones used by BuddyPress in the account area (to select account sub-sections). It looks like there were some icon overrides used on these within buddypress.css. I’m assuming that’s a theme css file. Perhaps the icon codes simply changed since you first made the theme. That would by my guess.
I think my solution here is to just correct each icon one by one with my own css overrides. I trust that should be possible by simply replacing the “content:” code in the class right?
….
Once I correct the altered icons my problems with the fonts are all solved.
My thanks again for all of your help!
~ Michael
Hi Abe,
I just checked the loading order of the child theme css file, and it is being loaded last like you said. The only non-standard thing I did with the child theme was to change it’s name (the child theme folder name). But I made sure that style.css was correctly pointing to the child-theme folder. I haven’t had any issues with the child-theme at all, other than this strange delay.
This delay issue is a very serious problem. The more custom css work I do, the more pronounced and widespread this problem becomes. Literally everywhere I have custom css (especially hiding elements or moving them), you can see those changes kick in late, about a second after the page loads. I’ve never seen anything like it before on any other site I’ve built.
The css file of the child theme isn’t large (yet). I think I’m at about 1,300 lines. But I’ve had child theme css files as high as 7,000 lines without seeing this problem. There’s something else causing this. I’ve tried many things here to find the problem with no success. Have you seen this with other implementations of Kleo?
Here’s a test you can do on your end to replicate this…
Set the header to the style with the logo in the middle of the two menus. So there’s a primary and secondary menu. Then set the menus to be wider apart from the logo with this custom css in the child theme:
COPY CODE@media only screen and (min-width: 991px) { div#header div.navbar div.sticky-wrapper div.kleo-main-header.header-split div.container div.navbar-header { flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 70% !important; } }All you then need to do is see of the menus shift outward when loading the page. You would see them close to the logo first, and then shift outwards as the custom css kicks in. That’s exactly what is happening here. This kind of problem is happening everywhere I have custom css.
….
Regarding disabling the side menu / mobile header on specific pages:
Thank you for helping with this. You can understand why I’m trying to avoid more css overrides, considering the problem above. What I am trying to do is maintain the standard header on my entry pages (like login/register). In other words, I don’t want the side-menu button to appear, or the logo to shift to the left, and all the responsive changes that are occurring related to this.
If you’re wondering, I am only displaying our logo on our login/register page in the header. I managed to hide the primary/secondary menus without using css overrides (because of the above problem). What I did for that was create a WordPress menu with nothing in it, and then assigned it to that page. It worked very nicely. But I still need to prevent the mobile header features from occurring on those pages.
I hope that clears it up for you…
Thank you for all your help!
~ Michael
Hi Abe,
I’m up really late here, so I decided to respond to you tonight…
First, thank you for your patience dealing with these Fontello related issues. It is appreciated!
Regarding the speed/loading issues in the menus section of the admin:
I actually decided not to use icons in all of our sub-menus. This means that I no longer need to load huge numbers of icons. Frankly, I would have preferred to have many more icons available to choose from, but as you know this is causing severe loading problems in the menus screen. Until this is resolved I’m just loading a smaller number of icons, more limited to the ones I’m actually using. With that said, you should definitely complete your testing to verify what I’m saying is true. If this is something you can solve, that would be great and I’ll load more icons.
About the icons changing when loading a fresh import:
I’m sure you’re right that this has to do with changed css classes. That was obvious to me. But the question really is why? I can tell you that practically every single icon in the theme will be changed if you use a new Fontello export, and don’t load in the .json file used by the theme.
With that said, I’m going to load in the .json file from the theme first next time, and then try adding new icons as I need them. I also will be customizing many of the default icons from the theme. I assume this can be done with simple css overrides?
~ Michael
Thank you Laura! I really hope we can figure out this css delay issue. It’s a nasty little problem to have, especially on a site as large as I am building.
~ Michael
Hi Laura,
I appreciate your response, but I think you missed the point on both points…
Completely disabling all of the responsive changes that occur with the mobile switch (and it’s side menu) is actually quite complex with css alone. I am more than capable of doing it, but it will be rather inefficient. I would much rather have a way to disable the mobile switch from being active in the first place, but to limit that to a page of my choice. This should be possible from within functions.php. I’m a front-end developer and css expert, but do not know enough php to to figure this out on my own.
What I am trying to do is keep the standard header (no mobile switch, no side menu, and no responsive css changes associated with the mobile switch), but to limit this to a page(s) of my choice. I am using the side menu within the website, but must have it completely deactivated on entry-type pages (like my login/register page). As I said, doing this with css alone is going to be complicated and there are other problems as well (particularly the css overrides delay problem, please continue reading below).
….
Regarding the problems I’m having with my custom css overrides…
I think you’re misunderstanding what is occurring here. I don’t have any caching enabled on the site right now (because it’s in development). Usually I use WP Rocket, but I have it disabled for the moment. As for my web browser’s cache, I clear that 50 times a day while I work.
The problem here is that my css overrides within style.css of my child theme are not being executed before the page renders in the browser. I have lots of custom css, and many of those changes either hide elements completely, or relocate them. When I load the site my changes are not being rendered immediately. I see the original css first and then a moment later my custom css kicks in. For example, in the header I have set my left/right menus (I’m using the header format with the logo in the middle of two menus) a further apart from each other than the original theme’s css. When the page loads I first see the two menus in their original positions, and then a second later I see them shift outwards as my custom css is read by the browser. This is also occurring on elements that I have hidden with css, which briefly appear than disappear on the screen.
I’ve never seen anything like this occur with css overrides in a child theme. Usually by the time the page renders and is visible in the browser those overrides are processed and you don’t see the original css. But something in this theme is causing the child-theme css to render late. It’s not a plugin I’m using, or any form of caching. It’s something native to the theme itself.
I am aware this theme has some speed related features to it, and perhaps they are responsible. I simply do not know. But this is a serious problem as I can’t seem to use custom css without it causing visible shifts and flashes on the screen.
Please, elevate this ticket to a higher level if necessary. I must find the source of this css rendering delay, or I’m in big trouble here.
P.S. This is also partially why I don’t want to use css to deactivate the mobile switch and side menu features. If I do, you will see the header first in mobile mode for a split second, and then change back as the css overrides are processed. I hope you understand what I am trying to describe here.
~ Michael
Hi Abe,
Please read my above post first…
I found one other strange thing. When I loaded a fresh Fontello export (instead of using the original .json file and updating it), that all of the original fonts selected by the theme had changed. It’s as if the codes that identify each font changed, and as a result the incorrect fonts are being loaded. It doesn’t make sense to me why the font codes would have changed simply by using a new .json file.
I’m going to try now to just update the original .json file to see what happens. I’m also going to load a lot less icons this time.
~ Michael
Hi Abe,
I just implemented the patch, replacing the actual theme files. It wouldn’t have made sense to do this with the child theme anyway, since these files will be included in the next update.
I’m happy to report this corrected the problem. I loaded my original Fontello export which was including all their icons (all 2,358 of them). I’ve confirmed they all display within the menus section of the admin.
The only real problem left is the loading time. When using lots of icons it slows down the menu sections of the admin from working for a long time. It partially depends upon how many menu items are in the menu, but loading can take as long as a full minute! In that time the browser becomes completely unresponsive, and you have to wait before any menus can be edited.
I’ve also found that the website’s front-end is affected. Icons that I had hidden with css are now briefly flashing on the screen. I actually sent in another ticket about this problem in part. There’s something causing my css overrides to not render immediately on the screen. When the page loads it first loads without my alterations for a brief second, and then my child-theme css kicks in. This is causing lots of problems here with my customizations.
It looks like having more fonts loaded made this problem even worse in places where I’ve hidden icons. As I said, they now briefly flash on the screen before being hidden.
I may just cut down on the number of icons loaded, but I’m concerned about the css loading issue.
I’d appreciate your thoughts. Please see the other ticket I posted about this.
My thanks again for your help!
~ Michael
Oh, my bad… I see the attachment you provided. I’ll just correct the theme files directly since everything will be replaced with the next theme update. No reason to add these to the child theme, since it’s temporary.
I hope this works!
Please make sure the fix ends up in the next update…
I’ll let you know if this corrects the problem too.
~ Michael
Hi Abe,
I’m glad to have heard from you before the weekend!
Ok, so you’re saying that I’ve identified a legitimate bug in the theme? When do you anticipate the next theme update with a permanent fix?
For the temporary fix…
What I don’t understand is that I’m overriding all the parent-theme Fontello files right now by using my child-theme. Is there another way I can be overriding the parent-theme files?
~ Michael
Hi Abe,
I appreciate your help with this. At the moment this problem is delaying my project, as I’m trying to put together the entire header and menu system of the new site. I’m going to be using many icons in this menu, so you can see the problem for me.
Assuming we do figure this out, one thing that does seem to be lacking here is the ability to easily search the icons by keyword. Even the ability to search by the icon code would be helpful. I plan to have over 1,000 icons in this selection, so it really does need to be searchable/filterable. This would be a good idea for a theme update feature.
Talk soon and good luck with your testing!
~ Michael
Hello,
I just performed the following test…
I compiled a new set of Fontello icons using the original .json file from the theme to start. The original icon total is 465 (selected by the default theme). I went ahead and added the remaining icons from FontAwesome, Elusive, and Web Symbols. The new font total was 1,113.
After this I loaded the new files properly in my child theme, and then re-saved the theme options. I then checked to see if all the fonts were appearing when selecting for the front-end menus (in the admin). As before, a huge number we simply missing and showing blank spots.
I then cleared my browser’s cache and checked again. The same result happened, with missing icons. I tried re-saving the theme settings again, and then looked on last time and there was no change.
Of the 1113 icons that should be displaying, it doesn’t look like there’s even enough rows for that many. There are enormous numbers of blank spots showing, just as before. This proves that clearing the cache wasn’t the cause.
Another thing I noticed is a major slow-down in the loading of the menus screen in the admin. The screen initially takes longer to load the existing menus. But there’s a more annoying problem after they appear. You cannot select any of the menu items for about 30 seconds. They simply don’t react with the mouse. It looks like the browser is busy processing all of the icons on the back-end for some time. After about 30 seconds you can manipulate the menus as normal.
So really there are two problems here. The fact I can’t update the icons, and that the menus screen slows down and can’t be used for the first 30 seconds or so.
I’ve attached here the zip file I downloaded from Fontello, with the 1,113 icons. This includes all of the original icons for the theme.
I really hope you can figure out what’s going on.
~ Michael
Hello,
I actually cleared my browser’s cache several times yesterday. Believe me, I thought of all the obvious causes. I’m a developer working on a new site here.
I also have the latest version of Kleo installed, and even checked for that yesterday. I’m using version 4.1.6.2, which is the latest version according to ThemeForest.
I’m going to run one last test here this morning by adding a few more icon sets, and then specifically clearing my cache to completely rule that out as a cause.
If this doesn’t work I’ll send you over the files zipped up so you can test on your side.
Thank you for your help…
~ Michael
Hello,
One last update here on my testing… (please read all my earlier posts first)
I ran one final test where I loaded the original .json file from the theme into Fontello first. I then added only one new icon to see what would happen. Afterwards that one new icon was not displaying in the choices, and appeared as a blank space (just like all the earlier problems). I confirmed that it is the blank space that is the new icon I selected. Even more strange is that when I select the blank space that icon displays on the front end of the site correctly, despite the fact it is essentially invisible in the admin.
This is all very strange indeed, and I hope you can’t help me to solve it. There’s little point to using Fontello if I can’t easily add and use new icons.
Btw, you should really introduce a search feature into the icon selector (for the menus). It’s really impossible to find what you need without the ability to search for an icon by keyword.
~ Michael
Please read my above posts first…
One other discovery made during testing:
I’ve confirmed that the child theme implementation is not the cause of this problem. I tried temporarily replacing the files in the main theme to see if it would correct this, and it did not. It seems there is a more fundamental issue with loading lots of new icons.
I also find it interesting that the original selected icons for the theme all appear without any apparently missing.
~ Michael
