Placido-Shop

  How to modify style and colors

  See in this page :
Customize the CSS style of Placido-Shop
To go further in the modifications
About compressing CSS Files
Can I use my own style files ?

Modifying the appearance of Placido-Shop is very simple.

To modify the CSS, you only have to modify one file,
This is the CSS/shop.css file.
  Note : This file will never be updated to avoid overwriting your settings.

In the shop.css file you will find the body{ ... } tag where you can change the background image or
background color of your shop.

For example to change the background image of your site :
- Place your background image at the root of the img/ folder ex.: img/my-background.jpg
Then reference it in the body{ ... } tag of the CSS/shop.css file like :

 body { background: url(../img/my-background.jpg), no-repeat; ... }  

In the shop.css file, you will also find the selector :root{ ... },
here you can define all colors and font sizes of your application.

 /* * i. :ROOT vars -> use it like : * .my_text { * font-size: var(--text-large); * color: var(--color-text); * } */ :root { --color-title-shop: #329cb8; --color-theme: #129cb8; --color-text: #1a1a1a; --color-icon-global: #129cb8; ... }  

  The main elements of the application are configurable here.

The shop.css file takes precedence over all the other CSS files of the application as well as those of the libraries complementary.
  Note : You can override all other application (and libraries) CSS rules in this file.

The priority order of CSS files is as follows :
fonts.css > [Libraries].css > custom.css > api.css > single_product.css > payment.css > shop.css.

  Note : From version 2.2.3
the CSS of the fonts (CSS/fonts.css) and the payment form (CSS/payment.css) have been separated from the code.

  Now import your fonts from the CSS/fonts.css file.
This file will not be updated by the application.

  If you modify the CSS/payment.css file, remember to exclude it from updates.

  To go further in the modifications :

To take CSS editing a step further,
let's look at the files and folders in the CSS/ folder :

• apps/
  This folder contains the .css files of the libraries used.
  Place yours there for clarity.
• 1669865452-api.min.css
  Or a similar file, with different numbers.
  This file is the result of compressing all your .css resources.
  This file is used to render the .css code of the application when you use the compressed version of the site (Recommended).
• all.min.css
  This file is the Font Awesome icons .css file.
  By default, the application uses the latest version 5 LTS.
  Icon fonts are located in the webfonts/ folder at the root of the site.
• api.css
  This file manages the positions and dimensions of the elements by default.
    If you modify this file, remember to exclude it from updates.
• custom.css
  The custom.css file is a modified version of the famous W3.CSS library from
  w3schools.com see : w3.css.
    The difference between custom.css and w3.css is that in custom.css,
  all the "w3-" class prefixes have been removed from the original version.
  We chose this code base because it is easy to set up, light and efficient.
  Eg : To add wide padding, instead of entering the class "w3-padding-16",
  you enter the class "padding-16" instead.
  Some of these classes are overridden in the api.css file.
  You can also override these classes in the shop.css file.
• fonts.css
  This file is used to import your fonts.
  Reference your fonts there and call them via CSS's @import or @font-face rules.
  For example to use the "Open Sans" font from google Fonts,
  insert the following code in CSS/fonts.css :

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');  

    Note : This file will not be updated by the application.
• payment.css
  This file manages the style of the payment form page and the style of the credit card form.
    If you modify this file, remember to exclude it from updates.
• render_sale.css
  The render_sale.css file manages the styling of the sale summary page.
  This file is called dynamically by the templates/API/render_sale.html file.
  It is called by a <link> tag placed at the beginning of the code of the render_sale.html file.
    If you modify this file, remember to exclude it from updates.
• shop.css
  As mentioned above, this file manages most of your application's styles.
  Modify here at will the colors, the sizes of the icons, the buttons, the fonts of writings.
  This file saves a lot of time in customizing the style of the application.
    Note : This file will not be updated by the application.
• single_product.css
  This file manages the style of a product page.
  The styles supported here are :
  - The positions of the elements of the product page.
  - The layout of product images.
  - The style of the slideshow.
  - The style of the "Related products" part.
    If you modify this file, remember to exclude it from updates.

Consult the list of files not updated by the application,
here : Files not updated by the application.

  About compressing CSS Files :

  If you use the compression system on your website (recommended),
you will also a file like this in the CSS folder : CSS/1658005508-api.min.css"

This file was generated by the compression system and it is this file that will be taken into account by the browser.
If you are using the site's compression mode (recommended),
this will be the only file loaded by the application it will contain all style files referenced in the array
const CSS_RESSOURCES_TO_COMPRESS of the API/files_to_compress.php file.
Let's see the code to understand this:

Look at the <head /> part of the templates/BASE/base.html file,
this file contains the basic architecture of the application, the <!DOCTYPE html> file.
There are calls to style sheets framed by the mustaches website.css_compressed :

 <!-- CSS --> <!-- 2x{ ^website.css_compressed 2x} --> <link rel="stylesheet" href="CSS/apps/swiper-bundle.min.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/apps/toastr.min.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/custom.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/api.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/single_product.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/payment.css" rel="preload" as="style"> <link rel="stylesheet" href="CSS/shop.css" rel="preload" as="style"> <!-- 2x{ /website.css_compressed 2x} --> <!-- 2x{ #website.css_compressed 2x} --> <!-- ALL API + LIBS css compressed --> <link rel="stylesheet" href="CSS/{website.compress_prefix}-api.min.css" rel="preload" as="style"> <!-- 2x{ /website.css_compressed 2x} --> <!-- end CSS -->  

The "Mustache" templating system makes sure to display either all CSS resources or a .css file that looks like 1669865452-api.min.css.
Depending on whether the "compression" mode is activated or not.

Let's see how the application builds this .css file:
The system will fetch the list of files to compress from the array const CSS_RESSOURCES_TO_COMPRESS located in the API/files_to_compress.php file.
In this table we have listed the .css files necessary for the application.
The system loops through this array and minifies, compresses all resources referenced here into a single .css file.

 /* API/files_to_compress.php */ const CSS_RESSOURCES_TO_COMPRESS = [ /* APPS CSS TO COMPRESS */ ROOT.'/CSS/apps/swiper-bundle.min.css', ROOT.'/CSS/apps/toastr.min.css', /* API CSS TO COMPRESS */ ROOT.'/CSS/custom.css', ROOT.'/CSS/api.css', ROOT.'/CSS/single_product.css', ROOT.'/CSS/payment.css', ROOT.'/CSS/shop.css', ];  

This file is saved in CSS/ folder
it will look like : CSS/[UNIX timestamp]-api.min.css.

  Note : In development, use the uncompressed version of the site,
otherwise, you will not see your modifications appear.

Once the changes have been made, consider recompressing the application and clear your browser cache.

  Can I use my own style files ?

Of course you are free to write your own CSS files.

A simple way to import other .css files without worrying about updates is to import your .css files from
the CSS/shop.css file via the CSS @import rule.
Like that :

 /* in CSS/shop.css */ /* Using a string */ @import "navigation.css"; /* Or using a url */ @import url("navigation.css");  

  In a more technical way,
to add your own .css resources and benefit from the compression system,
follow this procedure (but we don't recommend doing that...) :

- Add your file in the CSS/ folder : ex. CSS/my-style.css.
- Add this file to the list of files to compress in the CSS_RESSOURCES_TO_COMPRESS table of the API/files_to_compress.php file.
- Reference this file using a <link /> tag in the <head /> part of the templates/BASE/base.html file,
between the {^website.css_compressed} and {/website.css_compressed} mustaches.
- Exclude the templates/BASE/base.html and the API/files_to_compress.php files from the update from your management interface because these files are affected by the update.

  Note : Files you create or add in the app are not affected by the update.

To know the list of files not updated by the application,
consult this page : Files not updated by the application.