Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] Personnalisation des Snippets
  • Bonjour,
    Je suis en Legacy héritage de mon ccs suite à une migration récente de la V2 vers Kiwi
    Je souhaiterais dorénavant afficher les articles en "Snippet" mais quand je choisis l'option j'hérite d'une mise en forme d'un ancien thème V2, 
    j'avais personnaliser l'affichage de 'Top article' dans le CCS 
    et je souhaiterais qu'en Snippet l'affichage du haut des snippets soit identique,
    Comment faire pour reproduire la mise en forme du haut des articles (top article) pour les snippets

    Question complémentaire comment définir la taille de l'image et le nombre de caractères dans le résumé des articles ?

    Merci d'avance de votre aide,
  • Bonjour,

    tu a pas le choix

    en configuration, choisir l'option 'résumè en page d’accueil"

    pour toute personnalisation poussé il faut plonger dans le code kiwi
  • OK 
    Merci Medhi pour la réponse,
    Je vais essayer 
  • Bonjour,
    Afin de plonger dans le code Wiki comme préconisé et qui sera effectivement la solution,
    J'ai tenté de récupéré mon css migré afin d'y effectuer des modifications en suivant le post du FAQ ci dessous
    http://fr.forum.over-blog-kiwi.com/discussion/658/resolu-comment-recuperer-son-css-migre-afin-dy-effectuer-des-modifications#Item_21

    Mais des liens y étant manquant dans le post de référence 
    Je récapitule ce que j'ai compris
    pour récupérer mon ancien CCS
        </style>
        <link type="text/css" href="http://fdata.over-blog.net/99/00/00/01/csscombos/common-kiwi.css?kiwi" rel="stylesheet" />
        {% if Custom('ob_style_common') %}

    J'ai repris le code est tout copier/coller
    après </style> mais là ça marche pas

    Pouvez vous apporter de précisions sur la manipulation nécessaire pour mettre l'ancien feuille de style CCS dans les thèmes migrés Legacy afin de les modifier ?

    Merci d'avance 
    Caro CinéStarsNews

  • Bonsoir

    2 possibilités

     tu ajoute une ou plusieurs modification avant la dernière balise </style> de ton css actuelle

    cette balise </style> marque la fin du css

    exemple: changement de couleur, ajout de marge etc;........(de l'instruction css)

    ces modifications seront prioritaire sur toute les autres car en matière de css c'est la dernière instruction qui prime

    ou

    tu clique sur:

    http://fdata.over-blog.net/99/00/00/01/csscombos/common-kiwi.css?kiwi

    et tu copie/colle tout le code avant cette dernière balise </style> qui se trouve juste avant "head" et" body"

    penser à faire une sauvegarde du code avant toute modifications



    edit; en relisant le post, j'ai un doute sur la manipulation...iv oam ayant depuis fermé son tutorial


  • je suis sur legacy aussi et en fait quand je veux modifier quelques chose, j'ajoute juste l'instruction avant la balise style;..je n'ai pas touché a la feuille css externe

  • Merci Mehdi ton aide et celle de tout ceux de ce forum qui est précieuse 

    mais malgrès mes recherches et mes test j'aurais besoin d'une astuce dans le code concernant l'affichage des Snippets de la page d'accueil (que j'ai choisi via Configurer) qui comme vous pourrez le constater n'ont pas le même design qu'en affichage article complet
    Autrement dit Comment en Snippet en affichage sur la page d'accueil puis je avoir un tête similaire aux Articles (sans bande rose et sans pointillé noir)

    Dans la même série personnalisation des fameux "snippets" comment définir la taille sur la hauteur de l'image de couverture qui sera affiché
    et la couleur du lien "Lire la suite"
    En pratique je souhaiterais que le haut et le bas des snippets soit similaire à celui des articles

    Si quelqu'un peut m'aider, en fouillant bien dans le code je devrais trouver...Merci d'avance si quelqu'un passe par là et peut m'aider
    Caro CinéStarsNews

  • Bonsoir

    ta bande rose est la (border-top: 10px solid #fe28a7;)
    le pointillé:
    border-bottom: 1px dashed #d9d9d9;



    .infoExtrait {
        background-color: #363636;
        border-bottom: 1px dashed #d9d9d9;
        border-top: 10px solid #fe28a7;
        font-size: 16px;
        font-weight: bold;
        padding: 7px 0 4px 5px;
    }


    tu peux les suprimer en passant la bordure a 0 px au lieu de 10 pur la bande rose (pour le pointillé c'est le border-bottom a mettre a 0px)


    ligne modifié


    .infoExtrait {
        background-color: #363636;
        border-bottom: 0px dashed #d9d9d9;
        border-top: 0px solid #fe28a7;
        font-size: 16px;
        font-weight: bold;
        padding: 7px 0 4px 5px;
    }


    en fait tu va coller toute la ligne modifié avant ta dernière balise style (celle qui se trouve un peu au dessus de "head" et "body"

    tu oublie pas de cliquer sur "enregistrer"

    tu retrouvera ainsi facilement toutes les modifications que tu mettra au même endroit (avant la dernière balise </style>


    (le pointillé, tu le vire en mettant a 0 px le border-bottom)
  • pour le "lire la suite

    ajoute avant ta dernière balise style


    a {
        color: #fffafa;
        text-decoration: none;
    }


    tu change le code couleur de #fffafa; (un blanc cassé actuellement)
  • Bonsoir

    pour tes image en "snippet" ...sur ton résumé en accueil donc:

    cherche

    .imgExtraitCon {
        float: left;
        margin: 3px;
     
    }


    on ajoute une fonction width poour la largeur...et une "height pour la hauteur (arbitrairement j'ai mis 150 px large et 200 en hauteur)


    ce qui donne:


    .imgExtraitCon {
        float: left;
        margin: 3px;
        width: 150px;
        height: 200px;
    }

    ______________

    si tu trouve pas les lignes de code a modifier, tu les ajoute comme les autres avant la dernière balise </style>




  • Bonjour,
    Super un grand MERCI j'ai pu appliquer et personnaliser les modifications sur les "Snippets" de la page d'accueil grâce à vous,

    Reste 2 interrogations sur les snippets toujours
    Comment mettre en forme la partie en bas des Snippet (Publié par + Tag + Commentaire) comme en bas des articles ?
    et
    Pour définir le nombre Snippets affichés sur la page d'accueil 
    il est possible dans Configurer - Avancé - Articles par page est là on peut choisir une valeur 
    qui s'appliquera à la fois à la page d'accueil et au nombre d'aricle qui s'affiche à partir du menu/d'une catégorie ou d'un tag,
    Est possible quelque par de distinguer le nombre de snippets affichés sur la page d'accueil ? et le nombre d'article qui s'affiche lors de la consultation ou tag ou catégorie ?
    Merci d'avance
    Caro CinéStarsNews

  • bonjour
    cherche
    .plusExtrait {
        background-color: #7b7b7b;
        color: #d9d9d9;
        font-size: 10px;
        padding: 2px 5px;
        text-align: right;
    }

    tu met left a la place de "right"

    .plusExtrait
    {
        background-color: #7b7b7b;
        color: #d9d9d9;
        font-size: 10px;
        padding: 2px 5px;
        text-align: left;
    }

    pour le nombre de snippet dans configuration en effet;...on ne peut pas différencier le nombre actuellement selon l'endroit sauf a modifier certain code "twig" (les conditionnel If.........else;...dans ton code)

    le souci, c'est que peut de personne maitrise le twig...


  • Re-Bonjour,
    Donc ok pour le placement du texte en bas des snippets mais quoi mettre pour avoir les "tags" affichés en blanc gras comme en bas des article ?
    Cela a eu un impact aussi je crois sur la série de chiffres 1 2 3 4 5 6 7 8 9 10 qui permet de naviguer en entre les pages qui est en haut et en bas et qui est noir au lieu de blancs,

    Merci d'avance
    Caro CinéStarsNews

    203040506070809010> >>

  • en effet cela change la couleur de la pagination...il vaut mieux donc remettre en blanc....je n'ai pas trouvé pour le moment comment changer les couleurs séparément

    edit: j'ai trouvé
  • pour la pagination, on va ajouter une couleur..j'ai mis vert pour que tu visualise bien (2 bouts de code a modifier)


    .pagination a {
        background-color: #000000;
        color: #0dff00;
    }


    et

    .pagination {
        color: #0dff00;
        text-align: center;
    }

  • pour les tags du snippet (j'ai mis en jaune toujours pour' que tu visualise mieux les chagement...tu remet ta coueluer ensuite)

    .plusExtrait a {
        color: #ffb900;
        text-decoration: none;
    }