Sites Web : Personnalisation avancée des CSS de SoyezCreateurs avec SkelEditor - SoyezCreateurs - SPIP-Contrib

Publié le lundi 3 mai 2010

⇒ https://contrib.spip.net/SoyezCreateurs-1237?tri_articles=titre

La documentation sur le squelette SoyezCreateurs disponible sur la zone. Un squelette conforme aux bonnes pratiques en matière d’accessibilité, (…)

Personnalisation avancée des CSS de SoyezCreateurs avec SkelEditor

Juin 2012, Par Alencar, RealET — Squelettes, SPIP 2.1, Hors sommaire

SoyezCreateurs permet un configuration simple des couleur de votre site, ainsi qu’un large choix d’organisation des éléments.

Mais cela peut ne pas vous suffire. Avec le plugin SkelEditor, vous pourrez éditer les fichier squelette pour faire de la surcharge CSS et ainsi augmenter les possibilités !

Sans SkelEditor, c’est bien !

Voici un site non configuré (dont le nom à été flouté) sous SoyezCreateurs.

Un site SC à peine configuré

Avec le système de configuration de couleurs et d’organisation du squelette, nous pouvons facilement arriver à ce résultat.

Mais malgré les possibilités native de SoyezCreateurs, tous n’est pas modifiable. Ainsi, après avoir épuisé les possibilités du squelette, il reste la solution de SkelEditor.

Avec SkelEditor, c’est mieux !

Une fois l’installation faite, l’éditeur de squelette apparait dans le menu de votre espace privé. Avec SoyezCreateurs, ce dernier vous permettra d’éditer le fichier stylessoyezcreateurs_perso.css qui permet de faire de la surcharge CSS sur votre site.

Si celui-ci n’est pas présent dans la liste de l’éditeur, créez un nouveau fichier et nommez le « stylessoyezcreateurs_perso.css ». Veillez à ce que ce dernier soit présent dans le sous dossier « images » afin que SoyezCreateurs puisse le retrouver et l’intégrer dans vos pages. [1]

Une fois fait, il vous suffit de l’éditer pour insérer vos règles CSS personnaliser. Vous pouvez utiliser Firebug, un addon de Firefox, afin de rendre votre tache plus facile.

Il ne vous reste plus qu’a enregistrer le fichier et à recalculer le cache de la feuille de style, généralement avec un lien du type :

Un petit exemple de ce qu’on peut faire avec une surcharge CSS

Nous en étions la :

Après une journée de travail basé uniquement sur des surcharge CSS, j’ai obtenue se résultat :


[1] Pour déplacer un fichier, utiliser l’outil « Renommer » de SkelEditor. vous pouvez également envoyez des fichiers tel que des images.

SoyezCreateurs permet un configuration simple des couleur de votre site, ainsi qu’un large choix d’organisation des éléments. Mais cela peut ne pas vous suffire. Avec le plugin [SkelEditor->3396], vous pourrez éditer les fichier squelette pour faire de la surcharge CSS et ainsi augmenter les possibilités !

Sans SkelEditor, c’est bien !

Voici un site non configuré (dont le nom à été flouté) sous SoyezCreateurs. Avec le système de configuration de couleurs et d’organisation du squelette, nous pouvons facilement arriver à ce résultat. Mais malgré les possibilités native de SoyezCreateurs, tous n’est pas modifiable. Ainsi, après avoir épuisé les possibilités du squelette, il reste la solution de SkelEditor.

Avec SkelEditor, c’est mieux !

Une fois l’[installation->https://www.spip.net/fr_article3396.html] faite, l’éditeur de squelette apparait dans le menu de votre espace privé. Avec SoyezCreateurs, ce dernier vous permettra d’éditer le fichier stylessoyezcreateurs_perso.css qui permet de faire de la surcharge CSS sur votre site. Si celui-ci n’est pas présent dans la liste de l’éditeur, créez un nouveau fichier et nommez le « stylessoyezcreateurs_perso.css ». Veillez à ce que ce dernier soit présent dans le sous dossier « images » afin que SoyezCreateurs puisse le retrouver et l’intégrer dans vos pages. [1] Une fois fait, il vous suffit de l’éditer pour insérer vos règles CSS personnaliser. Vous pouvez utiliser [Firebug->http://getfirebug.com/], un addon de Firefox, afin de rendre votre tache plus facile. Il ne vous reste plus qu’a enregistrer le fichier et à recalculer le cache de la feuille de style, généralement avec un lien du type : http://monsite.com/spip.php?page=stylessoyezcreateurs.css&var_mode=calcul

Un petit exemple de ce qu’on peut faire avec une surcharge CSS

Nous en étions la : Après une journée de travail basé uniquement sur des surcharge CSS, j’ai obtenue se résultat :

→ Lire la suite sur le site d’origine…


Notes

[1Pour déplacer un fichier, utiliser l’outil « Renommer » de SkelEditor. vous pouvez également envoyez des fichiers tel que des images.

Revenir en haut