Personnaliser css scolaspip

De Wiki Dane (ex wikitice)
Aller à : navigation, rechercher

Sur cette page, on propose des règles CSS permettant de personnaliser davantage son site ScolaSPIP (pour SPIP3).

Pour plus d'informations sur ScolaSPIP, voir les pages suivantes :

Comment faire ?

1ère solution

Dans ScolaSPIP Couleurs, un champs permet d'ajouter des règles css.

2nde solution

Dans votre site SPIP, créer (s'il n'existe pas) en FTP un dossier squelettes.

Créer un fichier nommer perso.css que vous placerez dans le dossier squelettes en FTP. Ajouter les règles css souhaitées dans ce fichier.

Règles

Couleurs et images de fond

Mettre tout le fond de la page en blanc :

html body #page{background-color:#fff;background-image:none;}

Changer la couleur de l'arrière-plan :

html body {background-color:#F8F8FF;background-image:none;}

Mettre un fond blanc seulement dans le contenu :

#contenu{background:#fff;}

Mettre un fond blanc seulement dans le contenu des pages articles :

.page_article #contenu{background:#fff;}

Définir un fond de page statique

html body { background-image:url(IMG/fond1_clair.jpg); background-attachment:fixed;}

Définir la couleur de fond du cadre qui contient les derniers évènements

.droite .evenements{background-color:#E99DE8;}

Définir la couleur de fond des cases actives du mini calendrier (et la bordure) :

body #calendar .ui-state-highlight a{background:#ff0000;border-color:#00ffff;}

Définir la couleur de fond des cases actives au survol (hover) du mini calendrier :

body #calendar .ui-state-highlight a:hover{background:#0000ff;}

Changer la couleur du terme « sommaire » dans le menu vertical :

h2.bouton_sommaire {color:#ffcc00;}

Polices (couleurs, tailles)

Changer la couleur de la police dans le cadre qui contient les derniers évènements

.droite .evenements a{color:#000000;}

Centrer les intertitres SPIP (générés par {{{...}}}) et diminuer la taille :

body h3.spip{font-size:1.4em;text-align:center;}

Dispositions

Si vous n'utilisez pas la troisième colonne (pas d'agenda, de listes d'événement, de mosaïque)

.page_sommaire .gauche{width:100%}

Si vous n'utilisez pas les brèves vous pouvez supprimer la colonne latérale :

.page_rubrique .gauche {width:100%}
.page_rubrique .droite {display:none}

Site élastique (pas de largeur fixée)

Ajouter les 3 règles :

html body #page{width:95%;max-width:1260px;min-width:900px;}
html body #conteneur,html body #entete .accueil,html body #menuhorizontal.menu{width:100%;}
html #menuhorizontal .menuder{width:80%}

La largeur de la page sera alors proportionnelle (avec une limite de 1260px ici maxi)

Autres détails

Dans le bloc des « Site à la une », afficher les sites les uns sous les autres (par défaut, ils se mettent les uns à coté des autres) :

body #navigation #site_menu ul li{display:block;text-align:center;}

Centrer les social tags :

body div.socialtags { text-align:center; }

Supprimer le bouton "maison" à gauche, dans le menu horizontal

#nav .menu-liste .menu-entree.home{display:none;}

Modifier la taille et la place des boutons flottants en haut de page

body #spip-admin{font-size:9px;right:35%;}

Masquer l'information « Dernier ajout ... » dans les pages de rubrique

.page_rubrique .cartouche span.published { display : none;}

Choisir la couleur des onglets (onglet actif et onglets inactifs)

html body .dynamic-tab-pane-control .tab-row .tab.selected, .dynamic-tab-pane-control .tab-page { background: none repeat scroll 0 0 #CCCCFF; }
.dynamic-tab-pane-control .tab-row h2.tab.selected { background: none repeat scroll 0 0 #CCCCFF; }