Indexhibit: modifier le thème par défaut
Posté par L. dans HTML & CSS, Restes du Monde du Web, tags: indexhibit, thèmesC’est donc dans le dossier /ndxz-studio/site/ que se trouve les deux thèmes donnés par défaut ‘sample‘ et ‘eatock‘. 1 thème = 1 dossier
Ces thèmes contiennent les feuilles de styles css, et pour l’un d’eux un index.php pour construire la présentation des expos. comme ceux de wordpress qui contiennent les templates générant les pages consultables d’un blog, 1 expo équivalent à un post:
Changer de thème
Le fichier README contient une note où Vaska nous rappelle que pour pouvoir modifier le thème du site, on doit d’abord choisir le « mode Avancé » dans les règlages de l’admin, puis sélectionner le thème voulu avec la boîte juste dessous:
Pour utiliser un autre thème existant il suffit de placer son dossier sur votre serveur (par ftp) dans le dossier /ndxz-studio/site/ , pour que son nom apparaisse dans la liste de choix. (Pas d’espaces, pas d’accents, pas de smileys et que des minuscules…dans le nom du répertoire-thème °!)
Pour modifier soi-même le thème par défaut et créer ainsi un habillage original il vaut mieux enregistrer une copie du thème [sample] renommée ([my_sample]), dans laquelle on pourra faire des bêtises.
Modifier le menu.
Par défaut le menu s’affiche selon ces critères, définis et modifiables dans le fichier style.css:
/* pour tout le texte*/
body { font-size: 10px;
font-family: Verdana, sans-serif; }
/* pour les liens*/
a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }
/* le div du menu et sa liste de lien */
#menu { width: 215px; overflow: auto; top: 0; bottom: 0; left: 0; position: fixed; height: 100%;
background-color: #fff; }
#menu ul { list-style: none; margin: 0 0 12px 0; }
#menu ul li.section-title { text-transform: uppercase; }
En modifiant les valeurs spécifiées pour ces selecteurs vous pourrez déjà personnaliser l’apparence du menu: sa largeur ou sa position ligne 12 , sa couleur de fond ligne 13 …
Si on modifie les 9 premières lignes, c’est l’aspect de tout le texte et tous les liens du site qui sera altéré.
Pour modifier les liens du menu sans changer l’aspect du texte affiché dans les expos, il faut se servir du selecteur de la liste ligne 14 ou bien créer le sélecteur
#menu li a {}
dans la feuille de style…
Mettre un logo au-dessus des liens
La première manip’ qu’on a envie de faire pour personnaliser son site, et c’est prévu par les balises panier du moteur, puisque le « menu » se structure en fait en 2 div imbriqués: div#menu > div.container > ul
Il est assez facile alors de mettre votre logo au fond du div#menu, et de décaler le container de la liste en fonction de sa hauteur:
#menu{
background-color: transparent;
background-image: url('../img/logo.gif'); /* url de l'image */
background-repeat: no-repeat;
background-attachment: fixed top left;}
#menu div.container{
margin-top: 150px; /* un peu plus de la hauteur du logo ?*/}
Ligne 3: placer votre logo dans le dossier ndxz-studio/site/img/ plutôt que dans votre thème vous permettra de le rappeler avec des thèmes différents.
Se présenter à Google comme un grand
Pour que votre galerie soit référencée selon vos préférences, il faut ajuster certaines balises dans le header de la page générée… Allons voir ce qu’il se passe à ce niveau dans le fichier sample/index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <title><%title%> : <%obj_name%></title>
Pour mieux parler de vous aux robots du net, vous pouvez ajouter et compléter les balises suivantes entre la ligne 5 et la ligne 6:
<!-- balises meta pour Google et ses copains --> <meta name="Description" content="une description courte de votre site" /> <meta name="Author" content="le nom de l'Artiste Exposant" /> <meta name="Keywords" content="plusieurs, mots, clés" /> <meta http-equiv="Content-Language" content="fr" />
+ Tant qu’à modifier ce fichier, profitez-en pour traduire les quelques mots « en dur » comme l’expression « Built with… » à la ligne 41 du fichier index.php du thème sample.
Articles (RSS)
hello. qqn saurais me dire comment on rend le menu transparent? Merci
dans le css tu mets:
background: rgba(255,255,255,0.7);
« le 255, 255, 255, c’est la couleur RVB, le 0.7 c’est l’intensité de la transparence.
comme sur ce site: http://www.ronitmirsky.com
Bonjour,
Je cherche à modifier le menu mais lorsque je suis dans le fichier style.css rien n’est modifiable. J’ai bien activé le “mode Avancé” et « eatock » dans les règlages…
Quelqu’un a-t-il une idée d’où ça peut venir?
merci