Accueil Tutoriels webmasters Agir sur la feuille de styles CSS sans éditer le site en CSS
Agir sur la feuille de styles CSS sans éditer le site en CSS
Niveau :
expert
- Catégorie : Design du site - Publié par demo le 27/08/2008
E-monsite permet deux modes d'édition graphique de son site : le premier simplifié via des formulaires et un second, réservé aux experts, l'édition de la feuille de styles CSS.
L'inconvéniant si on choisi le mode CSS c'est qu'il faut tout faire en CSS : il est impossible de revenir en mode formulaire, sinon toutes les modifications CSS seront perdues.
Nous allons voir dans ce tutoriel comment manipuler les CSS tout en restant en mode formulaire.
1Rendez-vous sur la page "Zones éditables"
Sur la zone membre, allez dans Configuration > Zones éditables
Vous pouvez également y accéder directement en cliquant sur ce lien : http://www.e-monsite.com/manager/configuration?p=zoneseditables
2Repérez la zone éditable "Balises META supplémentaires ou..."
Sur la page Zones éditables, allez directement au dernier champ d'édition : Balises META supplémentaires ou code javascript à insérer entre <head> et </head>.
Cette zone permet d'ajouter le contenu que vous souhaitez entre les balises <head> et </head>.
Attention, n'y ajoutez pas de code html, de texte brut, etc.
Cette zone est destinée à afficher uniquement :
- des codes javascripts (quand on vous donne un script à placer entre <head> et </head>)
- des balises META (autres que keyword et description déjà générées automatiquement)
- des styles CSS
3Ajoutez les styles
Dans cette zone éditable, vous pouvez à présent rajouter les styles dont vous avez besoin.
Pour cela, placez vos styles entre les balises <style> et </style>.
Par exemple, pour définir un style de lien :
<style>
a.monstyle { font-size:15px; color:#ff9900; font-weight:bold; text-decoration:none; }
a.monstyle:hover { font-size:15px; color:#000000; font-weight:bold; text-decoration:underline; }
</style>
Vous pourrez ainsi, en mode HTML, créer un lien reprenant cette class :
<a href="http://www.e-monsite.com" class="monstyle">E-monsite.com</a>
Autre exemple, définir un style de titre :
<style>
p.montitre { font-size:20px; color:#c0c0c0; margin-top:15px; }
</style>
En mode HTML, vous indiquerez la class "montitre" sur le paragraphe du titre de cette manière :
<p class="montitre">Titre du paragraphe</p>
4Autre méthode, modifier un style pour une rubrique
Si vous souhaitez modifier un élément de la feuille de styles CSS uniquement pour une rubrique de votre site, il existe une méthode. Cette méthode n'est pas conseillée car pas valide W3C, mais elle fonctionne.
Il vous suffit d'insérer en haut ou en bas de votre rubrique en mode HTML votre code CSS entre les mêmes balises <style> et </style>.
Par exemple, si vous souhaitez changer l'image de fond d'écran pour une rubrique, indiquez ceci :
<style>
body {
background-image:url('http://www.e-monsite.com/fond.png');
}
</style>
Bien sur, remplacez http://www.e-monsite.com/fond.png par l'url de votre image.
Ce tutoriel n'a pas pour vocation de vous apprendre à manipuler le CSS, mais uniquement de vous indiquer comment en utiliser sans avoir à tout éditer en CSS.
Avant de vous lancer là dedans, je vous invite à apprendre les bases du CSS afin de ne pas faire d'erreur.
Ainsi, je vous invite à consulter ces deux sites web :
http://www.cssdebutant.com/
http://css.alsacreations.com/
Enfin, attention à la manipulation des balises <style>, comme pratiquement toutes les balises HTML ces balises doivent être refermés (</style>) sous risque de générer des erreurs d'affichage sur votre site.
Commentaires
Posté par franc7 - le 03/09/2008
Bonsoir SVP je me suis tromper de manipulation, j’ai toute mes rubriques, sauf que je n’ai pas la page principale pour rentrer dans mon site. Je l’ es pas perdu mais j’arrive pas à la faire fonctionner ! Dans META, je me suis tromper de manipulation excusez m’en. SVP Monsieur faite que la page ( site de Franc7 entrez ) me soit réparé, et mise en fonction, je la vois mais elle ne s’active pas , je n’arrive pas a la faire redémarrer. Avec votre gentiesse Monsieur aidez moi svp. Passez une bonne soirée merci a vous pour votre aide. Repérez la zone éditable "Balises META J4ARRIVE PAS JE SAIS PAS LE FAIRE.
Posté par liloukiss - le 25/10/2008
Bonjour,
Si j'ai bien compris, les débutants (comme moi) qui ne savent pas faire du CSS et qui veulent avoir un design plus joli ne peuvent pas c'est ça ?
Est ce q'on peut mettre un Kit Graphique ? C'est ce que je voulais faire.
Posté par targetmarketing - le 28/01/2009
Posté par wolfenstein-mp - le 20/04/2009
Lu je voulais savoir si on peut mettre sur notre site un Kit graphique trouver sur des sites specialisé pour sa ! Merci
Posté par franc7 - le 02/05/2009
Je voudrais stopé cette musique constante que l'on entand sur toutes mes rubriques comment faire SVP? Aidez moi elle me saoul en +je sais meme pas comment elle est apparut sur mon site 
Posté par similitude - le 25/05/2009
oui on peut mettre un kit graphique tout fait, suffit de le telecharger et de changer le champs CSS
ps: quelqu'un saurais comment connaître les dimensions de son site?
Posté par creuziercomitedesfetes - le 13/07/2009
peut-on mettre un diaporama dans l'entete du site ?merci de répondre si vous savez comment faire.
Posté par brac - le 02/08/2009
[b][/b][i][/i][u][/u][quote][/quote][center][/center][url][/url][img][/img]
Posté par lopez-cotelle-production - le 06/11/2009
Peut on mettre du flash sur le site ? je suis en version Pro !
Ajouter un commentaire :
Veuillez vous connecter afin de poster un commentaire sur ce tutoriel.
