Change Style and Color
Introduction
CE Phoenix Cart is designed to look great out of the box but looks can be changed however you want, to suit your brand and stand out from the crowd.
The styles of every element are assigned in the code of CE Phoenix Cart, as well as in the code of Bootstrap, which ensures everything looks great on every size of device.
However, CE Phoenix Cart gives you ultimate control to override styles with your own.
This is done in one file named user.css (note the special file type .css - it is a Cascading Style Sheet) by using the following.
Elements are the basic building blocks of a webpage, representing content and structure such as headings, paragraphs, images, buttons etc.
Classes are labels assigned to elements to apply the same styles or behavior to multiple elements.
Styles determine how these elements look, including color, size, spacing etc. Styles can target elements via classes or directly.
User.css
The user.css file is found in /templates/default/static/
Open it with a file editor to see instructions:
Please don't edit the original of this file. Instead copy into a template and edit the copy.
Check the template you have set in Configuration → My Store → Template Selection to see if the file already exists there, for example, /templates/yourTemplate/static/.
If it does not exist, make a copy and upload there.
Your browser cache will need to be refreshed to see style 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
Elements
Elements and their assigned classes can be found in CE Phoenix Cart files.
Alternatively, to easily identify an element, use developer tools that are include in browsers, for example Google Chrome is used here.
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 panel opens on the right of the screen.
Elements should be already be selected in the toolbar - click on it if it is not.
Click on Inspect icon (box/arrow) in top left of the developer tools panel - it will turn blue - or just Control+Shift+C on your keyboard.
Click on an element, for example, the breadcrumb, to see this on the store page:
The element will then also show highlighted blue in the top part of the developer tools panel. Classes assigned to the element can be seen there.
Styles assigned to the element and to classes assigned to it can be seen in the lower part of the developer tools panel.
Classes
In this example, in the screenshot above (top panel), see the element, <ol> (just for information, <ol> is an Ordered List element), has been assigned the classes, breadcrumb bg-transparent px-0 mb-1
Also see (lower panel), one style shows:
.bg-transparent {
background-color: transparent !important;
}
This means a style of background-color with a value of transparent is targeted to elements assigned with the class bg-transparent.
This means the style will target all elements that been assigned with the class bg-transparent.
See that when targeting classes in CSS, a point/period precedes the class, like, .bg-transparent
Styles
Override the style set in the previous example above, to change the background color of the element.
Targeting the class bg-transparent will affect all elements that been assigned with the class bg-transparent.
The intention is to only target the breadcrumb so targeting must be more accurate.
This can be done in many ways with CSS.
Remember, files should always be backed up before and after any changes to them.
Presuming that the override template is being used, open /templates/override/static/user.css
Add the following to the file and save.
.breadcrumb.bg-transparent {
background-color: blue !important;
}
This means a style of background-color with a value of blue is targeted to elements assigned with the class breadcrumb and the class bg-transparent.
Your browser cache will need to be refreshed to see style changes.
The color value can be in different formats.
- If you want a simple color, just use a name. See 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 color 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 color.
https://coolors.co/ is a useful resource for ideas and inspiration for choosing color schemes for your website.
This is just a simple example for learning, it's not an advised change.
Learn more at:
https://www.w3schools.com/cssref/index.php
https://www.w3schools.com/cssref/css_selectors.php
CSS can be used in many more ways - read more at: https://css-tricks.com/almanac/
The styles and colors of some elements can be changed when editing the module in Admin.
See Change Layout
Many Addons and Extensions available in the CE Phoenix Cart Addons Library
If help is needed, support is available in the CE Phoenix Cart Support Forum
Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
