Difference between revisions of "Change Style and Colour"

From Phoenix Cart User Guide
Line 167: Line 167:
  
 
Learn more at:
 
Learn more at:
 +
 
'''https://www.w3schools.com/cssref/default.asp'''
 
'''https://www.w3schools.com/cssref/default.asp'''
  

Revision as of 06:33, 29 May 2022

Back
Setup Shop


CE Phoenix looks great just as it is but everything can be changed to how you want it.

To identify each element it is recommended to use developer tools that are include in some browsers, for example Google Chrome is used here.



All pages as displayed on the shop are comprised of many separate elements.

The styles of every element are defined in the code of Phoenix but they can all be redefined in one file named user.css - note the special file type .css - it is a Cascading Style Sheet.

This file is found in the top folder/directory of CE Phoenix prior to v1.0.7.8

From v1.0.7.8 this file is found in templates/default/static/

Open it with a file editor to see that it is empty for the user to enter their own style defines.

Any styles defined in user.css will override the Phoenix styles.

This file is never changed in updates so any changes you make will persist.

From v1.0.7.14, if you are making changes to this file, make a copy and upload to templates/override/static/ or whichever template you have chosen in admin.

Your browser cache will need to be refreshed to see the changes saved in user.css.

Internet search for how to perform a hard or forced refresh or reload for your browser.

Alternatively see How to Force Website to Show user.css Changes




Identify Elements

Chromeinspect1.gif


Try it out on the index (home) page of your website for example.

  • Right click page - click on Inspect at the bottom of the popup menu - or just Control+Shift+I on your keyboard - the developer tools pane opens on the right of the screen.
  • Elements should be already be selected in the tool bar - click on it if it is not.
  • Click on Inspect icon (box/arrow) in top left of tools pane - it will turn blue - or just Control+Shift+C on your keyboard.

Chromeinspect4.png

  • Hover the cursor over any part of the webpage and a popup will appear showing the element name and some styles defined for it.
  • For example, hover the cursor over the breadcrumb section of the webpage and you will see the following popup.

Chromeinspect1.png

  • For full details, click on the element and the element name will show highlighted blue in the top part of the tools pane.

Chromeinspect2.png

The element name will show as a class or id.

A class has a dot prefix e.g. (.classname) and an id has a hash prefix e.g. (#idname).

A class name is applied to elements that are used in many places whilst an id name is applied to one specific element.

In this example it shows:

<ol class="breadcrumb">...</ol>
  • The styles defined for the element will show in the bottom part of the tools pane.
  • In this case there is a list of styles defined:
.breadcrumb {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: .75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
   background-color: #e9ecef;
   border-radius: .25rem;
}

Note the format of the define is always element-name { style: value; }

Note that coding always uses U.S. spellings such as color and center.




Change Element Styles

  • Use the element name with the correct prefix to define a css style in the user.css file that will override the styles in the core files of Phoenix.
  • For example, to change the background colour of the element the following would be saved in the user.css file - change newcolour for the new colour code - include the !important which ensures the new style will override the core files if it does not work without it:
.breadcrumb {
   background-color: newcolour !important;
}


Finding a colour code is easy using the colour picker and Chrome can even show a preview of the colour change on your website before you make any change to the user.css file.

  • Click the colour square and a colour picker and colour changer will popup.

Chromeinspect3.png

  • Use the sliders to choose a new colour or click the "eye dropper" icon to choose a colour from your webpage.
  • The colour code will automatically show and a preview of the change will show on the webpage.
  • Colour codes can be in different formats.
    • If you want a simple colour just use a name - there are some built into the system but a long list you can use at https://www.w3schools.com/colors/colors_names.asp
    • Most commonly used are Hex Codes prefixed with a #
    • RGB codes control the Red Green Blue values of a colour and are useful by adding a fourth A(lpha) element which controls transparency - a value of 1 is opaque, 0 is transparent.
    • HSL codes are rarely used and control the Hue Saturation Luminosity values of a colour.


https://coolors.co/ is a useful resource for ideas and inspiration for choosing colour schemes for your website.




Other Styles

There are many styles that can be changed.

Most commonly used for examples:

 .element name {
    border: 1px solid blue !important; - this defines a border around the element 1px thick, solid and coloured blue.
    border-radius: .25rem !important; - this defines rounded corners on the border - rem is a unit of font-size defined for the whole site so if the font-size=16px, 1rem=16px.
    padding: 1rem !important; - padding is the space between the text and the border.
    margin: 20px !important; - margin is a space outside the border.
    font-size: 30px !important; - this defines the text size.
    color: blue !important; - this defines the text colour.
 }

To focus css styles on specific elements

Example:

Change the font size of Product Name on the product page.

On a clean install you will see that Product Name is displayed in a div with the unique class name cm-pi-name - you'll see this on the right of the screen using Dev Tools on your browser.

It is then displayed in a h1 tag with class="display-4" - it is display-4 that sets the font-size, font-weight and line-height - you'll see this bottom right of the screen.

Productname.png

So, to change the look of an element with the class display-4 but only within an element with the class cm-pi-name (so it only changes display-4 in Product Name and doesn't change display-4 everywhere on your site), put this, for example, in user.css:

.cm-pi-name .display-4 {font-size: 2rem;}

Which will then show like the screenshot below (after page reload) - see that the Product Name text has changed and see the change to user.css shown bottom right which has overridden the display-4 setting.

Productnamenew.png

Learn more at:

https://www.w3schools.com/cssref/default.asp


CSS can be used in many more ways - read more at:

https://css-tricks.com/almanac/


Previous Step Next Step


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

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