Quick start guide to working with styles for a new theme
This chapter combines the topics aiming to help you to quickly start working with styles of your custom theme:
- Simple ways to customize a theme’s styles
- Simple style changes with client-side LESS compilation vs. server-side
High-level steps to create a theme and change styles
- Set your Magento application to the developer mode.
- In the file system, add a new theme inheriting from Magento Blank or Luma.
- Apply your theme.
- Decide which CSS compilation mode you will use. Compilation modes are described in the following topics:
- Detailed description: Styles debugging
- Practical illustration: Simple style changes with client-side LESS compilation vs. server-side
- Customize styles. To learn how, check out the following sources:
Why do you need to create a custom theme?
Magento provides two themes out of the box: Blank and Luma. If Magento is installed with sample data, the theme applied after installation is Luma. If no sample data is installed, the Blank theme is installed by default.
Luma inherits from Blank, which contains all the basic functionality and styling required for a theme.
You can use either Luma or Blank for your storeview, if there is literally nothing you want to change in their design.
But if there is something you want to improve, the only recommended way is creating a new theme. It can inherit from Blank or Luma so you can preserve all you need, and change or add whatever is required.
Making changes in the Magento out-of-the-box themes is a bad idea, because can result in your changes being overwritten during upgrade.