Design particulier

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • #16
    Re : Design particulier

    Hello,
    Je mets ici la procédure pour créer un fichier CSS que je t'ai indiqué dans l'autre forum, cela peut servir à d'autres

    Avec le template Protostar comme de nombreux autres templates, il est possible de créer un fichier CSS personnalisé qui est lu en dernier de sorte que ses styles aient priorité sur les autres, cela permet par exemple de modifier les styles par défaut du template.

    Dans ton cas, il serait donc possible de créer ce fichier et d'y mettre la partie CSS de ton code (celle encadrée entre les balises "styles") comme le suggère plus haut Lomart, cela éviterait de devoir activer dans le profil JCE la prise en charge des CSS dans la zone de l'éditeur.

    Pourquoi il vaut mieux charger un fichier CSS ?
    Quand tu ajoutes du CSS dans la partie rédaction, le code est chargé à chaque affichage de la page, alors que lorsqu'il est dans un fichier .css il est mis dans le cache du navigateur et n'a ainsi pas besoin d'être chargé à chaque fois.
    Dans ton cas, ce n'est pas très important car ce code n'est pas très long.

    Je t'explique quand-même le processus, car comme je le dit plus haut, créer ce fichier permet de modifier les styles par défaut du template, comme par exemple de supprimer la petite ligne de couleur bleue (par défaut) qui est en haut de page.
    Je te propose cet exemple comme exercice

    Le principe est de créer dans le dossier "templates/protostar/css" un fichier nommé "user.css". A savoir que le nom de ce fichier est propre au template Protostar, en général il se nomme plutôt "custom.css".
    Il est possible de créer ce fichier depuis l'administration du site, mais il faut pour cela que le dossier "css" du template soit en droit d'écriture ; tu peux le vérifier par "Système -> Informations système -> Permissions des dossiers", si le dossier "Template" n'est pas indiqué "Modifiable", il faut alors avec un logiciel FTP appliquer au dossier "css" le droit CHMOD 777 (ce chiffre peut parfois changer selon l'hébergeur).
    Si tu as un droit d'écriture sur ce dossier, suis les étapes suivantes et n'hésite pas à regarder les captures plus bas qui te résume le processus...

    1. Clique sur "Extensions -> Templates -> Templates", puis sur "Protostar Détails et fichiers", cela affiche la liste des dossiers du template.
      Clique ensuite sur le bouton en haut nommé "Nouveau fichier", cela ouvre une fenêtre popup (voir captures ci-dessous).
    2. Clique à gauche sur le dossier "css".
    3. Dans le champ "Nom du fichier", indique "user", puis choisis dans la liste déroulante l'extension "css" et clique sur "Créer".
    4. Une fois ce fichier créé, il te faut l'éditer.
      Clique à gauche sur le dossier "css" pour afficher son contenu puis sur le fichier "user.css", cela ajoute deux boutons dans la barre des boutons : "Enregistrer" et "Enregistrer & Fermer".
    5. Dans la zone d'édition qui s'affiche à droite, colle le code suivant puis clique sur "Enregistrer & Fermer", tu pourras constater qu'il n'y a plus de barre bleue en haut de page.
      Code:
      body.site {
         border-top: none;
      }

    Liste des dossiers du template
    Cliquez sur l'image pour l'afficher en taille normale

Nom : ajout_style_css_01-03.jpg 
Affichages : 1 
Taille : 30,5 Ko 
ID : 1806150
    La fenêtre popup de création de fichier
    Cliquez sur l'image pour l'afficher en taille normale

Nom : ajout_style_css_02.jpg 
Affichages : 1 
Taille : 18,3 Ko 
ID : 1806151

    Pour ton cas, sur le même principe, il te faudrait coller la partie CSS de ton code en éditant ce fichier user.css
    Voilà, j'espère que cela te sera utile un jour, sinon ce le sera sans doute pour quelqu'un d'autre
    Dernière édition par sarki à 17/04/2017, 22h48
    Support FR de l'éditeur JCE: télécharger JCE en français, aide & forum - www.sarki.ch/jce

    Commentaire


    • #17
      Re : Design particulier

      Bonjour Sarki
      Merci de ce long et fort pédagogique développement sur la manière de créer ce css personnalisé ; je n'en attendais pas moins de ta part ! Je n'ai fait que le survoler et le mettrait en oeuvre bientôt pour testes
      Cependant j'ai osé pendant le we inclure le code de lomart dans le css d'origine du template (ayant préservé l'original bien entendu).
      Mais je me pose la question suivante : en l'incluant dans chaque article qui le requérait je pouvais jouer sur la taille, l'espacement... et autres propriétés des blocs.
      Si ce code est chargé une fois via le css du template; je ne pourrai plus jouer sur ces éléments non ? Et cela serait alors un peu pénalisant (pour moi).
      Cordialement
      Noël

      Commentaire


      • #18
        Re : Design particulier

        Si ce code est chargé une fois via le css du template; je ne pourrai plus jouer sur ces éléments non ? Et cela serait alors un peu pénalisant (pour moi).
        Eh oui, c'est pour cela que je laissais le choix
        Ensuite, il est possible d'avoir les 2 :
        - les règles générales dans le fichier CSS
        - les adaptations pour l'article entre des balises style
        comme cela, on a un rendu peut-être pas parfait mais c'est un départ
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #19
          Re : Design particulier

          Envoyé par lomart Voir le message
          Eh oui, c'est pour cela que je laissais le choix
          Ensuite, il est possible d'avoir les 2 :
          - les règles générales dans le fichier CSS
          - les adaptations pour l'article entre des balises style
          comme cela, on a un rendu peut-être pas parfait mais c'est un départ
          Merci de confirmer ce que je pressentais ! A mon tour de faire les choix en fonction de vos avis conjugués !
          Cordialement et bonne semaine
          Noël
          Pas mis en résolu. mais cela ne saurait tarder !

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X