How to Force Website to Show user.css Changes
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.
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:
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
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
PROTECTED BY COPYSCAPE ANTI-PLAGIARISM