When you want to make some non-standard design changes (for which you can't find any settings in the theme admin panel) you can do it by adding custom CSS styles.

For simple CSS changes there's no need to create a custom sub-theme.

In this theme you can enable an additional CSS file called custom.css, in which you can override and extend the default styles of the theme. All the CSS styles added to this file will not be lost after upgrading the theme in the future.


To enable the custom.css file

  1. On the Admin menu, select System > Config > Theme Setup.
  2. Click the Custom CSS tab to expand it.
  3. Set Load Custom CSS File to "Enabled".
  4. Click the Save Config button.

To edit the custom.css file

  1. Using your favorite text editor (Sublime Text, Notepad++, etc.), open the custom.css file located in skin/frontend/intenso/default/css/ directory. If the file doesn't exist in your installation, you can safely create a new empty file named custom.css.
  2. Add your own code to override the default styles of the theme.
  3. Save and re-upload the file to your server.
If enabled, refresh the cache to see your changes on the front-end

How to find out which CSS styles to override?

How to find out which part of the theme's or Magento's CSS you need to override or extend? The best way is to use Firebug (an add-on for Firefox: www.getfirebug.com), Chrome Developer Tools (available in Google Chrome) or other similar tool.


Using Firebug or Chrome Developer Tools you can easily find the name of the Selector you need to edit in order to change the style of a particular element. For some style's property values, you may have to use the !important rule for them to work.
Firebug

Adding custom CSS rules to a specific language store view

If you have a multi-language Magento installation, you can add CSS rules for a specific store view using the locale code of the language as class name.


For example, lets say we want to increase the width of an element, but only for the French store view. We can use the locale code of that store view, which is fr_FR, as a class name. Just make sure to write the locale code in lower case letters and add a dot before it:

body.fr_fr .someclass {
    width: 4rem !important;
}

In some cases you may have to add the !important declaration to override normal specificity of some classes.


How to use CSS

Here you can find more information about CSS: