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] fond article transparent
  • bonsoir, 
    j'ai cherché si ce topic existait , je n'ai pas trouvé.

    Voila ma question: est-ce possible de mettre le fond de l'article transparent mais pas totalement, genre blanc opaque. c'est un code couleur spécial ? est-ce possible? 

    Merci et bonne soirée.
  • Bonjour, 
    Il faut utiliser ce genre de code, mais je ne me souviens plus où : 
    ; -moz-opacity: 0.9; -webkit-opacity: 0.9; -o-opacity: 0.9; -ms-opacity: 0.9; opacity: 0.9;
  • ah d'accord merci ! mais comment savoir ou le mettre?
  • Sos quelqu'un sait ou le mettre?
  • Bonjour,

    Tu désire juste en fond d'articles ou pour tout le fond blanc actuel (articles, entête/bannière, modules/widgets [la petite colonne de droite], ...) ?
  • Bonjour ! Je voudrais juste en fond d'article ^^
  • Alors ça complique un peu lol, je vais regarder (et tester), mais je sais déjà qu'il va falloir alors changer à plusieurs endroit dans le code du blog
  • ah daccord je suis désolée du dérangement ...
    sinon si c'est plus simple on peut rendre opaque aussi la colonne de droite
  • Tu ne me dérange pas, sinon je ne serais pas ici à offrir mon temps libre pour proposer d'aider ;)

    Bon alors, je prends ta proposition de mettre tout en "opaque" et par la suite on adaptera au fur et à mesure si besoin ;)

    Je t'invite en tout premier lieu à faire une sauvegarde de ton code actuel :
    Donc tu vas sur :
    Gérer => Thème.
    De là tu clique sur Configurer et ensuite sur HTML

    Sur la page qui s'ouvre (à gauche) tu as plein de codes... c'est là dedans que tu devras procéder aux changements.

    En premier, tu clique gauche devant 
    <!DOCTYPE html>
    (Tout en haut )

    Fais un Ctrl a (pour tout sélectionner) ... tout devient souligné de bleu
    poursuis avec un Ctrl c (copie tout ce qui est en bleu)
    Ouvre le bloc-notes et fais un Ctrl v (ça colle tout le code)
    Enregistre (en fichier texte [txt]) en donnant un nom

    Voilà ton code html-css-twig actuel est en sécurité sur ton terminal et en cas de bêtise tu as une archive :)

    Pendant ce temps je prépare ma réponse pour aller travailler dans le code ;)

  • Ok ^^
    C'est enregistré!
  • Donc, ensuite dans le code "HTML" (qui en fait contient du html, du css et du Twig) recherche la ligne :
    .content {background: #FFF; margin: 0 auto; padding: 0 30px; position: relative; width: 970px;}

    Elle est au début... Pour trouver facilement :
    Tu clique gauche devant  <!DOCTYPE html> et cette fois tu fais un Ctrl f
    Dans la petite fenêtre qui s'ouvre (Search for) tu mets :

    .content

    et la petite flèche te guidera direct sur la ligne

    Et tu corrige la ligne pour avoir :

                .content {background-color: transparent; /* alternative solide */ 
                background-color: rgba(223, 223, 223, 0.5); /*Mozila*/
                /*if IE lte IE 8*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF, GradientType=0);
                margin: 0 auto;
                padding: 0 30px;
                position: relative;
                width: 970px;
                }

    L'opacité est réglé ici avec une couleur blanche et à moitié (50%) transparent (il est possible de changer ET la couleur qui est rendue transparente ET le degré de transparence)... Peut-être la prochaine étape :)


  • Merci c'est presque parfait, comment augmenter l'opacité? (un peu moins transparent disons 70%)

    EDIT: j'ai cours demain , je finirai les modifications et je dirai si c'est bon, 
    Merci beaucoup d'avance en tout cas :):)
  • Alors il faut bouger/changer à trois (3) endroits

    .content {background-color: transparent; /* alternative solide */ 
                background-color: rgba(223, 223, 223, 0.5); /*Mozila*/
                /*if IE lte IE 8*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF, GradientType=0);
    /...


    Le 0.5 en 0.75 et 
    les (deux) 80 en C0 (<= le "0" est un Zéro et pas la lettre "O" [la forme "ovale" aide à reconnaître en cas de doute ;) ])
  • Bonsoir,

    Au passage, passe tes images sur le générateur de coin arrondi (sélectionne "transparence" sur le générateur) ci -dessous:
    http://www.roundpic.com/
  • ah merci c'est génial :D
    Merci pour votre aide et passez une bonne semaine :):)
  • Avec plaisir ;)

    (entre utilisateur tu peux me tutoyer [même si je suis un "vieux machin" :\"> ] , mais c'est pas obligé non plus ;) [c'était peut-être aussi adressé à deux personnes])

    Belle soirée :)