Themes CSS Magento

1

I added a theme in Magento and would like to change the background and some other things through style.css. I make the modifications, but it does not work. Does anyone know why?

The CSS that I'm opening is in "skin / frontend / default / theme-001 / css".

    
asked by anonymous 01.03.2014 / 23:58

1 answer

3

Magento and its settings

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.

Confirm in the settings that the desired theme is chosen:

admin → System → Design → Themes → Skin

or check the code in your .phtml .

If you are adding your file from a template , check that the URL is built as follows:

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

Credits for the "Magento and its settings" section for the @DavidL user in this answer in SOEN.

Browser Cache

When you make a change in a style sheet and after refreshing the page the change in question is not visible, it is usually related to cache and you have to tell the browser to collect the file again.

So assuming that:

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

  • The file does indeed exist and is being loaded:

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

    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 complete path to the css file you are changing starting at the root of the project, usually where the index.php or index.html is preceded by the domain.

You can tell the browser to pull all files on a page again using the ctrl + F5 keys that instead of the regular page refresh will actually force the collection of all the attachments of the document (css, scripts, images, etc.).

Considerations to take into account

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

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

View page source

Another way to evaluate whether the changes are in the file that is 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 the shortcut keys to open the source code of the current page:

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

    Note that in the case of Safari the programmer's menu must be active:

    • Safari menu → Preferences → Advanced;
    • Check "Show the developer menu in the menu bar".
  • Internet Explorer: Ctrl + U or new versions alt + v + c

02.03.2014 / 04:14