Page 1 of 1

Global CCS File?

Posted: Tue Sep 23, 2025 2:59 pm
by peters
I do not know if this option even exists in WWB, but here goes my question.
I have a massive client project I have completed in WYSIWYG Web Builder, that has over 120 wepages. All is working great!
Client has come back to me to add css classes in so the pages, form areas, and buttons can be modified simply by changing the class reference on the object involved.
I had no problem creating the css classes and adding them into the webpages form areas and buttons. This all is working as it should.
I ran into one issue that is not related the WWB, but an option in WWB may resolve my issue.
My project name is called Pickups and the global css name is called Pickups.css
All my class css code now resided in Pickups.css
Most browsers actively cache external js and css files, so changing the class on say a button and regenerating also regenerates the Pickups.css file. However, most browser will actively go to the cached ccs file first even if there is a newer Pickups.css file on disk. I added a cache buster that adds a version datetime parameter on the end of the Pickups.css file. The code is shown below that I can add in the webpage Head tags:
<!-- Cache-busted CSS -->
<link rel="stylesheet" href="Pickups.css?v=<?php echo filemtime('Pickups.css'); ?>">

<!-- Cache-busted JS -->
<script src="HeadTagLoad.js?v=<?php echo filemtime('HeadTagLoad.js'); ?>"></script>
<script src="AutoLogout.js?v=<?php echo filemtime('AutoLogout.js'); ?>"></script>
<script src="ScheduleGPS.js?v=<?php echo filemtime('ScheduleGPS.js'); ?>"></script>
So the cache buster for the js files are ok, but thefirst one for the Pickups.css file is not and ends up confused.
I believe this is due the fact WWB by default adds before by cache buster code the following on every webpage . . .
<title>Home Base</title>
<meta name="generator" content="WYSIWYG Web Builder 20 - https://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Pickups.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">

So in effect when i check development Tools-Inspector in the browser I have 2 different version of my Pickups.css file being loaded.
I see Pickups.css Status 200
I see Pickups.css?v=1758636710 Status 200
Is there any way in WWB to get that unbusted version removed?
I have been looking all over the WWB in Options and ponder is there some obscure setting somewhere that does either 2 things:
1. Eliminated the global.css generated reference completely so only my ref is there
or . . .
2. Allows me to actual replace the WWB global css reference code line to be my own one with the ?v= parameter?

So as stated, maybe no such option exists, but I sure wanted to ask as this would resolve my double loading of 2 global.css files on every webpage and what I am running into is changing say a button background color and regenerating, the old color is showing. Even clearing the browser cache will not resolve this as it appears the browsers aggressively hold onto the css cached copies even with a browser cache clearing of all history. Id I delete the Pickups.css file and call up a form and allow the form to error out with: Pickups.css file not found! and the put the Pickups.css file back into the project folder then correct colors then appear. I just cannot do this with 100-150 users access the web-app whenever I change a color setting.
Any hits or ideas would greatly be appreciated!

Re: Global CCS File?

Posted: Tue Sep 23, 2025 3:22 pm
by Pablo
WWB has a built-in cache buster option for internal CSS.
If your project is named 'pickups.wbs' then it will generate a global style sheet with the name 'pickups.css'
So, if load an external file with same name then this will cause a conflict.

Re: Global CCS File?

Posted: Tue Sep 23, 2025 3:53 pm
by peters
Ok, but in my testing across Windows Edge browser, the Safari browser and Android stock browser, when I make a class color change and publish the page I still am getting the old colours. I find I get these results almost all the time. So when I added in my loading of Pickups.css and added the v=datetime parameter thing seem to now reflect the color change I made in the class.
I see in the generted WWB code the following on ever webpage:
<meta name="generator" content="WYSIWYG Web Builder 20 - https://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Pickups.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
I have placed my cache busting code after this code like a shown below:
<meta name="generator" content="WYSIWYG Web Builder 20 - https://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Pickups.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
<script src="jquery-3.7.1.min.js"></script>
<script src="wb.panel.min.js"></script>
<script>
$(document).ready(function()
{
$("#PanelMenu1").panel({animate: true, animationDuration: 200, animationEasing: 'linear', dismissible: true, display: 'push', position: 'left', toggle: true});
});
</script>
<!-- Cache-busted CSS -->
<link rel="stylesheet" href="Pickups.css?v=<?php echo filemtime('Pickups.css'); ?>">

<!-- Cache-busted JS -->
<script src="HeadTagLoad.js?v=<?php echo filemtime('HeadTagLoad.js'); ?>"></script>
<script src="AutoLogout.js?v=<?php echo filemtime('AutoLogout.js'); ?>"></script>
<script src="ScheduleGPS.js?v=<?php echo filemtime('ScheduleGPS.js'); ?>"></script>

So my reloaded v= seems to overwrite the first loaded version of the css file: <link href="Pickups.css" rel="stylesheet">
that is WWB's default generation.

How exactly does WWB automatically bust the cache?
From the look of the <link href="Pickups.css" rel="stylesheet"> line of code, this is just loading the plain ccs file name and with aggressive browsers they seem to load the cached version each and every time and not my regenerated version with say a color change on a button.
I also ran into JavaScript external files when changed the browser would still load the old, cached version. This is beyond the scope of WWB and has nothing at all to do with WWB, but the code I am using above for the .js files seem to resolve that issue as well.

So the fact I am loading a second Pickups.css file with a v= paramater, are you thinking this may cause a conflict?

I guess you can see where my mind was going. is there a setting somwhere that would allow me to hook into WWB and change the default global.css file and tack a v= paramater on it right internally?

If WWB has built in cache busting I have not been able to see how this is happening as my issue is loading the cached version. Is the some option in WWB to enable this?

Sorry to be so long winded, but I wanted to fully outline what I have going on here and what I have done so far!

Many thanks for your reply or options in advance!

Re: Global CCS File?

Posted: Tue Sep 23, 2025 4:55 pm
by Pablo
There is no need to update the code manually.
You can enable cache busting in Tools -> Options -> HTML

Re: Global CCS File?

Posted: Tue Sep 23, 2025 5:38 pm
by peters
Super,
I appreciate your quick reply. I did not even know that menu option existed. lol
Yep, that is what I was after and I have done it manually on a lot of projects use datetime stamp, but did not realize you have a v=counter setup internally in WWB to accomplish what I had always done manually.

Many, many thanks in advance!
Pete,