How to Force Website to Show user.css Changes

From Phoenix User Guide
Back
FAQ Tips & Tricks


After making changes in /yourTemplate/static/user.css and saving, the changes do not show unless your browser cache is hard or forced to refresh or reload.

The website can be forced to load the new user.css.

Make a copy of /templates/default/includes/hooks/shop/siteWide/styleSheets.php and save it to /templates/yourTemplate/includes/hooks/shop/siteWide/

After

function listen_injectSiteStart() {

Insert

$css_version = '2021.0.8';

Change this line

$this->sitestart .= '<link href="' . $css_file . '" rel="stylesheet">' . PHP_EOL;

to

$this->sitestart .= '<link href="' . $css_file . '?ver=' . $css_version . '" rel="stylesheet">' . PHP_EOL;


2021.0.8 can be any meaningful versioning system you want.

Every time changes are saved in the user.css, update the version number in styleSheets.php and save.

Now the changes in user.css will show after a simple refresh and importantly, will show for a previous customer who might still have the old pages cached in their browser.


Example

Click on an image in the gallery on a product_info page, to see the default modal pop-up carousel.

Lightbox carousel before.png

The default Icon Arrows and Indicators display on the image and are white which may not suit a lot of stores.

Changing the style is done in the user.css file.

This can be done in different ways.

Add the following to user.css

/* target #lightbox parent so changes only applied to that carousel */
/* Add an offset grey shadow to icons so they show up */
#lightbox .carousel-control-prev-icon {
 filter: drop-shadow(-7px 0px rgba(0, 0, 0, 1));
}
#lightbox .carousel-control-next-icon {
 filter: drop-shadow(7px 0px rgba(0, 0, 0, 1));
}
/* Add left and right margin to give space for icons */
#lightbox .carousel {
 margin: 0px 50px 0px;
}
/* Change width and move icons into that space */
#lightbox .carousel-control-prev {
 width: 50px;
 margin-left: -50px;
}
#lightbox .carousel-control-next {
 width: 50px;
 margin-right: -50px;
}
/* Add grey background to indicators so they show up */
#lightbox .carousel-indicators li {
 background-color: #575757 !important;
}
/* Add bottom margin to give space for indicators */
#lightbox .carousel-inner {
 margin-bottom:50px;
}
/* Move indicators into that space */
#lightbox .carousel-indicators {
 bottom:-50px;
}

This will change the display to:

Lightbox carousel after.png



Construction.png
This page is in progress
Please visit again soon for additions and changes

Phoenix User Guide is a continuing work in progress.
If you have any suggestions for content correction, improvement or inclusion please email us:
Contact.png
not a clickable link to prevent spam

Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
If you have found it useful, please donate to the coffee pot!
Use this link to donate whatever you want.

Donate with Paypal

Code references are licensed under a Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
PROTECTED BY COPYSCAPE ANTI-PLAGIARISM