CSS of Magento themes

Question

I added a theme to Magento and would like to change the background and some other things through style.css. I make the modifications, only it doesn’t work. Someone knows why?

The CSS I’m opening is found in "skin/frontend/default/Theme-001/css".

Answer 1

Magento and its settings

You need to make sure that Magento is sending the correct theme CSS file. It may seem basic, but it happens with some frequency, especially in cases where we use various themes.

Confirms in the settings that the desired theme is chosen:

admin → System → Design → Themes → Skin

or check the code on your .phtml.

If you are including your file from a template, checks if the URL is built as follows:

href="<?php echo $this->getSkinUrl('css/nome-do-ficheiro.css')?>"

^{Credits for the section "Magento and its settings" for the user @Davidl in this answer in the SOEN.}

---

Browser cache

When you make a change to a stylesheet and after updating the page the change in question is not highlighted, it is usually related to caching and you need to tell the browser to collect the file again.

Therefore, assuming that:

• If applicable, the changed file was successfully uploaded to the server;

• File actually exists and is being loaded:

  If the file exists in skin/frontend/default/theme-001/css as indicated in the question, the same can be opened in the browser if you apply the rest of the path to the same:

  http://www.meu-site.com/skin/frontend/default/theme-001/css/style.css
  └──────────┬───────────┘└─────────────────┬────────────────┘└───┬───┘
             ↓                              ↓                     ↓
    domínio ou localhost          caminho para o ficheiro       nome
      consoante o caso              a começar onde está          do
                                 o index.php ou index.html    ficheiro
                                                              alterado
  

  ^{the full path to the css file you are changing starting at the root of the project, usually where the index.php or index.html preceded by the domain.}

You can tell the browser to pull all the files from a page again by using the keys Ctrl + F5 that instead of regular page updating will effectively force the collection of all document attachments (css, scripts, images, etc.).

---

Considerations to be taken into account

When changing styles, sometimes they have no effect because they are being declared with higher priority in another style sheet or in the same but elsewhere.

It all depends on how they are declared in the style sheet and the position of that style sheet in the Markup.

---

View page source code

Another way to assess if the changes are in the file being used on the page you are viewing, or if it is being used at all has already been mentioned by @Sergio in the comments:

You can use shortcut keys to open the source code of the current tab:

• Firefox: Ctrl + U
• Chrome: Ctrl + U

• Safari: Ctrl + U

  Note that in the case of Safari the programmer’s menu must be enabled:

  • Safari menu Advanced Preferences;
  • Mark "Display programmer menu in menu bar".

• Internet Explorer: Ctrl + U or in the new versions alt + v + c