User Tools

Site Tools

Edit CSS

Often, merchants want to adjust appearance of their shop just slightly, like changing a color or making some text smaller or larger.

To get this, one doesn't need an entire new theme, one can edit the CSS of the existing theme.

Where to Find CSS Files

Like-named CSS files can override each other. CSS files related to modules can exist in three places:

  1. themes/<theme name>/css/modules/<module name>/
  2. modules/<module name>/views/css/
  3. modules/<module name>/

Each CSS file about to get loaded gets searched in the above order. (3) is deprecated, but still used by many modules. (2) is where module developers should place their idea of proper CSS. (1) is where a theme can override (2).

Files in (2) get replaced by module updates. If a file in (1) is present, the one in (2) gets ignored. If the theme should (or you want to) override (2), but there is no overriding file in (1), create one. Starting with a copy of the one in (2) is a good idea.

Finding the File to Edit

That's a bit trickier.

In Firefox, right click on an element and select Investigate Element. This will open the Web Developer console at the bottom of the page and highlight the element in question.

Look at this element to find out which CSS classes or which identifier it uses. Having such an identifier, it's a matter of a multi-file search. Like

grep -rn <identifier> modules themes

Such a search can result in many hits or none at all. At this point one needs a bit of inspiration to get the right spot.

edit_css.txt ยท Last modified: 2018/07/27 11:34 by Traumflug