In this chapter, you will learn about Cascading Style Sheet (CSS) and how they are used in a PrestaShop theme. You will also learn about modifying the background colors of blocks and web pages, text fonts, text sizes, and the text colors. We will then cover how to modify block borders and their colors. We will also cover how to modify the paragraph. All through simple modifications to the CSS file.
To start with, if you simply follow the steps given in here, it is enough for you to modify the CSS files in PrestaShop. However, it is useful to learn about CSS to be able to apply the knowledge to other sections (pages) of your PrestaShop site, if required.
To be more precise, you will learn the following in this chapter:
- A little bit about Cascading Style Sheets
- The CSS files in PrestaShop
- Modifying the fonts, the text colors, and the text sizes
- Changing the background colors
- Modifying the border color of blocks
- Modifying the paragraph in the center column
Before we get to know the basics of the PrestaShop theme CSS file, we need to get to know the tool we will be using to modify and check our files.
At this stage, you would have used Firefox at least for browsing websites. It is useful to go deeper than using it for browsing, as Firefox comes with many web development tools that can be very handy for working on your websites.
Other than those Notepads or editors we mentioned in the previous chapter, we will have to download and get hold of a web developer's tool which can be either Firebug or Web Developer extension.
Note
Firebug can be downloaded from: www.getfirebug.com
Click on Install Firebug For Firefox. Alternatively, you can also download it from Mozilla's Firefox Add-ons site.
Install it, restart Firefox, and it is ready to use.
Another common tool for web development is the Web Developer tool, which can be used with Firefox and Google Chrome. It is also an excellent tool that can assist you in your theming work.
Note
The Web Developer extension can be downloaded from: http://chrispederick.com/work/web-developer/
Try saving the extension to your machine (by right-clicking or ctrl-clicking the download link and choosing Save Link As...) and dragging the saved extension into your browser window to start the installation.
You can use them both together or separately. Note that any changes you made
through the Web Developer tool or Firebug are only good for reviewing and editing
them to see the effect of your action. To make it work for your theme, you will have
to apply the changes to your global.css file and save it. This
can be done through an online editor through your cPanel or via FTP. If you are not
sure how to go about this, the process is elaborated in Chapter 6, Steps
for Creating Themes.
We will now look into the PrestaShop default theme, which is packed as standard theme in PrestaShop.