Magento regroupe les fichiers CSS dans le dossier SKin de votre thème => skin/frontend/default/default/Css. Après une installation de magento, le CSS principal et boxes.css. Nous allons voir dans ce tutoriel, comment magento charge les fichiers CSS et comment rajouter un fichier CSS à partir d’un layout ou du back-office.

Comment magento charge les CSS

Après une installation de magento, les fichiers CSS principaux sont déclarés dans le block ‘head’ du layout page.xml

app\design\frontend\adidas\mon_nouveau_theme\layout\page.xml

Le layout page.xml définit les CSS à charger dans le block ‘head’.

Magento va chercher ces fichiers dans le dossier CSS de votre thème. Il contient plusieurs fichiers :
- un pour le menu,
- un autre pour écraser les paramètres des navigateurs reset.css,
- et d’autres pour l’impression et la correction des très célèbres beug d’Internet Explorer
- et le principal qui gère la plupart du design magento boxes.css. Vous pouvez rajouter d’autres fichiers.

Comme vous pouvez le voir sur l’imprime écran ci-dessus, les CSS sont ajoutés avec la méthode addCss :

les css à charger sont déclarés dans le block head du layout page.xml

Ajouter un fichier css pour toutes vos pages magento

Pour rajouter un autre fichier css qui sera actif pour toutes vos pages de magento, dupliquez cette ligne :

css/boxes.css

et changez le nom boxes.css par le nom de votre fichier CSS (exemple : monCSS.css). Rajoutez « monCSS.css » dans le dossier CSS de votre thème :

skin\frontend\default\default\css

Pour vérifier que votre fichier css est bien chargé, ouvrez une page, affichez le code source et faites une recherche de votre fichier (ctrl +f + monCSS.css).

Ajouter un fichier CSS pour une page spécifique

Vous pouvez ajouter un fichier CSS pour une page précise. Par exemple, pour la page contact. Pour cela, ouvrez le layout contact.xml et rajoutez ce code :

 
css/monCSS.css

Ajouter un fichier CSS à partir du back-office

Vous avez également la possibilité d’ajouter le CSS via le back office de magento dans la partie => Design personnalisé => XML de mise à jour d’agencement en ajoutant ce code :

 
css/monCSS.css

Liens complémentaires

Magento IE6, IE7 débeuger le CSS