L’essentiel de ce que vous permet ce système de template :
- Vous pouvez choisir et changer toutes les couleurs de votre site à tout moment sans éditer le moindre fichier,
- Vous pouvez créer et modifier votre entête grâce à un plugin fourni dans l’interface d’administration, cela vous débarasse du soucis de création de logo qui est souvent casse-tête,
- Vous pouvez choisir des polices typographiques pour les titres des différentes sections pour egayer votre site,
- Vous gérez simplement, par ajout de mots clés, les onglets affichés dans votre navigation horizontale,
- Vous choisissez le coté ou se situe la navigation verticale,
- et enfin, vous pouvez déterminer les dimensions (largeurs) des colones de votre site.
Voici quelques exemples de ce que vous pouvez obtenir :
A savoir sur ce squelette :
- Valide et testé sur : SPIP 1.9.2 d
- Auteur : Gilles TRAN
- Licence : GPL
- Utilisation : Débutant, Intermédiaire
- Surcharge Core : fichier Extra
Le squelette easysqueletting utilisent la librairie javascript jQuery pour afficher les arrondis, grâce au plugin « jCorners », ainsi qu’un news-slider pour afficher les derniers articles en page d’accueil, grâce au plugin « jFlow »
Pour faire fonctionner ce squelette, il vous faut installer 3 plugins :
- champs homonymes : qui vous permettra de gérer l’intitulé de vos onglets,
- CFG : pour gérer toutes les variables d’affichage pour la feuille de style dynamique,
- easysqueletting : le plugin qui couplé à CFG pemet le choix de toutes vos couleurs, typos,...
Notez de plus qu’il vous faut configurer SPIP de façon à pouvoir générer des images typographiques et des vignettes. Pour cela il faut se rendre sous : Configuration >> fonctions avancées >> choisir GD2.
Créer vos onglets
- Pour créer vos onglets vous allez devoir créer un nouveau groupe de mots-clés nommé : « mise en page »
- Puis créez un mot nommé : « onglet » (cet intitulé doit être respecté)
- Adjoindre ce mot-clé aux rubriques que vous voulez voir apparaitre dans vos onglets
- Editer la rubrique pour remplir le champs « Nom Onglet » nouvellement créé grâce au plugin champs homonymes, cela vous permet d’avoir un intitulé plus court pour le texte de votre onglet,
- Profitez en pour remplir le champs « Nom Court » disponible pour les rubriques, articles, brèves et sites. Ce champs sera utilisé dans le fil d’ariane vous permettant ainsi d’avoir des fils d’ariane plus courts
Upload et pré-configuration de ce système de template
- Téléchargez le zip, décompressez et uploadez les deux repertoires « squelettes » et « plugins » à la racine de votre site SPIP
- Validez les 3 plugins (configuration >> plugins) puis
- Rendez vous sur la page de configuration d’easysqueletting (configuration >> CFG >> Easy Squeletting)
Choix des couleurs, largeurs, typos et arrondis
Vous êtes maintenant sur la page ecrire/ ?exec=cfg&cfg=easysqueletting, vous disposez ici de plusieurs listes dépliantes pour chaque zone de configuration.
Afin de faire simple voici des captures d’écran d’un exemple de configuration pour chacune des caractéristiques de configuration du site.
Cliquez sur « Couleurs générales et arrondis ». Maintenant il vous faut remplir les cases, pour les couleurs vous pouvez cliquer sur la case « modifier » adjacente à chaque champs pour utiliser le sélectionneur de couleur. Il est bon de savoir que ce sélectionneur de couleur fonctionne mieux sous Firefox
Attention : Si vous essayez de prévisualiser votre site en cours de configuration, il vous faudra bien penser, après chaque modification de la page de configuration, à :
- Vider le cache de SPIP et
- Vider le cache de votre navigateur pour voir les modifications
Mise en garde : pensez à bien valider le formulaire, voir même à le valider après chaque étapes pour ne pas risquer de perdre votre configuration après un choix laborieux des couleurs.
Voici un aperçu de ce que vous pourriez obtenir après votre choix de couleurs :
- Choix première couleur et deuxième couleur :
- Choix des dimensions du site
Remarque : vous pouvez ici choisir le coté d’affichage de la colonne de navigation.
- Choix des typos
Remarquez ici que vous pouvez spécifier 4 typos différentes : La première pour le texte de l’entête, la deuxième pour sa baseline (sous-titre), la troisième pour les titres des cadres de la colonne de navigation et la dernière pour les titres de la colonne de contenu
- Choix des réglages pour les différentes typos du site
Entête
Baseline
Colonne de navigation
Colonne de contenu
Attention notez aussi : Pour voir apparaitre des articles en page d’accueil dans les deux cadres du haut il faut :
- Que les articles soient publiés
- Qu’ils aient un logo, sinon cela n’affichera rien...
Vous êtes maintenant fin prêt pour visualiser votre tout nouveau site et si demain vous voulez changer de thème de couleurs pour votre site vous pourrez le faire en quelques secondes.
Discussions par date d’activité
94 discussions
Bonjour,
Voilà, après mon problème d’onglet, j’ai essayé d’installer sur free le squelette mais maintenant je me retrouve avec un autre problème d’affichage voir ci-joint. J’ai lu et relu la notice X fois et je ne vois d’ou vient le pb. J’ai bien renommé mon répertoire en « squelettes » et activer gd2.
Quelqu’un peut m’aider svp.
Merci d’avance
Frédo
@fdecaux :
Je ne vois pas de squelette installé, je ne sais pas quel bug d’affichage tu rencontres, peut-être as tu décidé de le désinstallé ? tiens moi au courant si je peux t’aider
++
Répondre à ce message
Le squelette est’il d’ors et déja compatible spip 2.0 ou dans le cas contraire pensez-vous l’adapter.
Merci
@marcello :
Le squelette n’est pas compatible avec SPIP 2.0 il utilise des plugins tels que champs homonymes qui ne sont pas exploités de la meme façon avec SPIP 2.0
Pour le reste il me semble que ca ne devrait pas poser de problème, je ferais donc peut-être une mise à jour dès que je trouve le temps
Répondre à ce message
Bonjour à tous,
Voilà, je suis novice dans spip et tut ce qui va autour. J’ai donc cherché un site complet et easy-squeletting m’a tout de suite séduit.
J’ai donc suivi la procédure d’installation en local et tout c’est bien déroulé correctement.
Toutefois, j’ai juste un soucis d’affichage avec les onglets qui ne s’affichent pas. J’ai beau relire la notice et refaire pas à pas et cela ne fonctionne tjrs pas. j’ai beau cherché dans les commentaires précédent je ne trouve rien à ce sujet. Quelqu’un pourrait m’aider ?
Frédéric
Répondre à ce message
Bonjour, depuis mardi 2 décembre j’ai un problème d’affichage de mon site avec le squelette easysqueletting ... les couleurs ont disparues, la présentation aussi il ne reste que les différentes rubriques, sous rubriques et articles les uns en dessous des autres... pouvez vous m’aider ?
Répondre à ce message
Pour essayer de comprendre si vous comprenez quelques chose voici le code de mon styles.css dans squelettes.
#titrepage padding:10px 0 0 10px ;
#contderniersarticles border:1px solid #CCC ;
#derniersarticles img.spip_logos float:left ; margin-right:10px ;
#derniersarticles h2 font-weight:14px ;
#dernierscontrol padding:1px ; border:1px solid #CCC ;
#dernierscontrol .jFlowControl height:54px ;
#dernierscontrol .jFlowControl border:1px solid #CCC ; margin-bottom:1px ;
#dernierscontrol .jFlowControl:hover border:1px solid #999 ; background-color :#FFF ;
#dernierscontrol .jFlowControl img float:left ; padding:2px ; margin-right:5px ;
.dernierssuite a padding-top:5px ; font-size:11px ; text-decoration:underline ;
#dernierssites margin-bottom:10px ;
#dernierssites li padding:10px ; text-align:justify ;
#dernierssites li:hover background :#F9F8EC ;
#dernierssites li b.sitetitre color :#7F211B ;
#dernierssites li a, #dernierssites li a:hover text-decoration:none ;
#dernierssites li img float:left ; margin-right:10px ; padding:2px ; border:1px solid #CCC ;
#dernierssites fieldset border:none ;
#dernierssites legend color :#7F211B ; padding:5px 0 ; font-weight:bold ; cursor:pointer ;
#dernierssites legend:hover text-decoration:underline ;
#dernierssites label display:block ;
#dernierssites input, #dernierssites textarea width:250px ;
#dernierssites p.spip_bouton input width:auto ;
.invisible position:absolute ; top :-3000em ; height:1% ;
#contenucont padding:5px ;
#hierarchie padding:0 0 5px 5px ;
#titrepage, #content padding:10px 10px 0 10px ;
#content padding-bottom:10px ;
.contautre padding:5px 0 ; margin-bottom:10px ;
.contautre .spip_logos float:left ; margin-right:10px ; padding:2px ; border:1px solid #CCC ;
.contautre h3.spip padding:5px ; font-weight:bold ;
.contautre p.credits text-align:right ; padding-right:5px ; padding-bottom:10px ;
.contautre p.spip padding-bottom:5px ;
.subautre, .subsites padding-bottom:10px ;
.subsites li img float:left ; margin-right:10px ;
img.typosite margin-bottom:10px ;
#titrepage h2 img.typosite margin-bottom:0 ;
p.toggle padding-top:10px ;
.subsites a text-decoration:none ;
.subsites a:hover b text-decoration:underline ;
.formulaire_site fieldset border:none ;
.formulaire_site fieldset legend display:none ;
.formulaire_site p padding-bottom:5px ;
.formulaire_site p label display:block ;
#navigation li li background:none ;
#navigation li li a display:block ; padding-left:10px ; height:25px ; line-height:25px ; background:none ; padding-left:15px ;
#navigation li li a:hover color :#FFF ; background:none ; padding-left:15px ;
#navigation a.curr font-weight:bold ;
.message ul, .message li, .formulaire_ecrire_auteur ul, .formulaire_ecrire_auteur li display:inline ;
.message fieldset label,.formulaire_ecrire_auteur fieldset label display:block ; float:left ; width:180px ; text-align:right ; padding-right:10px ;
.message fieldset.previsu background-color :#FFE097 ;
.message fieldset.previsu p, .formulaire_ecrire_auteur fieldset p padding:10px 5px ;
.message fieldset.previsu input background-color :#FF9900 ;
Merci
@alexcool
Au regard de ton installe, il me semble qu’il vaudrait mieux que tu configure tous les champs du plugin easysqueletting de façon à ce qu’on y voit plus clair, par exemple tu ne sembles pas avoir défini de largeurs sur tes colonnes, pour les fonds méfie toi aussi il peut y avoir des couleurs dans les onglet couleur 1 , couleur 2 etc...
Mais avant tout le premier conseil serait de bien remplir tout les champs pour partir sur quelque chose de plus clair
Bon courage
Répondre à ce message
berinfo pour le logo du site c’est dans la config générale de SPIP.
Est-ce que styles.css gère tout l’affichage ? Existe-t-il d’autres fichiers qui le gère ? Visualisation toujours horrible de mon site.
Répondre à ce message
Essayant avec IE mon site je vois que l’affichage est un petit peu mieux disons qu’on arrive à lire mais toujours ces bandes horribles.
Sous Firefox en revanche une véritable horreur. On arrive pas à lire aucun article.
Pourquoi ces différences ? Peut-on y remédier ? Comment comprendre les feuilles css ? Ou trouve t-on les fichiers à modifier pour corriger l’affichage de mon site ?
On lit sur des articles ailleurs une fois faut corriger dans squelettes, une autre fois dans dist, encore ailleurs c’est admin_styles.css, et autres parts c’est styles.css bref faut jamais modifier les autres fichiers mais faut à chaque fois modifier des fichiers différents. Au final faudrait tout modifier et rien modifier en même temps et croiser les doigts pour que la magie opère. Comment se dépatouiller avec tout ça qui est contradictoire ?
SVP HELP ME !
Répondre à ce message
Pourquoi j’ai un fond noir sur mes articles alors qu’aucune couleur n’est configuré en noir.
Je précise que j’ai rentré les même codes couleurs et les même paramètres en tout point dans la configuration. N’ayant rien à la couleur noire pourquoi j’ai du noir sur mon site ?
J’ajoute avant l’installation de easysqueletting rien n’était sur fond noir. Ce n’est que depuis son installation. Comment en changer cette couleur ? Pourquoi fait il des bandeaux mal placés aussi ? J’ai rien touché et c’est tout moche.
Répondre à ce message
En fait j’ai des bandes noir et des fonds noir qui s’affiche je voudrais savoir quoi faire pour en modifier la couleur, voire les supprimer car je n’en voit nullement l’utilité vu comment ils sont placés.
Si vous pouvez m’aider svp.
Répondre à ce message
J’ai tout configuré comme ci-dessus mais mes article apparaissent sur fond noir horrible écrit en presque noir donc illisible. Quand je sélectionne un article pareil celui-ci s’affiche sur fond noir écrite en noir.
Or dans les paramétrage il n’apparait jamais la couleur noire. Pourquoi c’est donc noir ?
Voyez-donc par vous même.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |