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
  • feenienailsfeenienails
    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.
  • BrigadesBrigades
    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;
  • feenienailsfeenienails
    ah d'accord merci ! mais comment savoir ou le mettre?
  • feenienailsfeenienails
    Sos quelqu'un sait ou le mettre?
  • Vger TeyeMEVger TeyeME
    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], ...) ?
  • feenienailsfeenienails
    Bonjour ! Je voudrais juste en fond d'article ^^
  • Vger TeyeMEVger TeyeME
    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
  • feenienailsfeenienails
    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
  • Vger TeyeMEVger TeyeME
    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 ;)

  • feenienailsfeenienails
    Ok ^^
    C'est enregistré!
  • Vger TeyeMEVger TeyeME
    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 :)


  • feenienailsfeenienails
    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 :):)
  • Vger TeyeMEVger TeyeME
    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 ;) ])
  • Mehdi.Mehdi.
    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/
  • feenienailsfeenienails
    ah merci c'est génial :D
    Merci pour votre aide et passez une bonne semaine :):)
  • Vger TeyeMEVger TeyeME
    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 :)
Rédiger un commentaire