[CSS] Mettre un "corner backgroung" en png

Visiteur

Boosteur Inactif

Le 07/01/2009 à 10h15

Bonjour à tous,

Suite à un petit soucis que j'ai eu pour insérer un "corner backgroung en png", transparent dans un nouveau modules de news, que j'ai inséré (Dernières Documentations, rss du wiki) sans pour autant en perdre la couleur de fond ...

Je pensais le faire sans toucher le Css, et passer directement par le "news.tpl" qui se trouve dans :

"news/templates/news.tpl" en modifiant juste le codage des "news_container" (voir ci-dessous).

Caché :

<div class="news_container">

<div class="msg_top_l"></div>

<div class="msg_top_r"></div>

<div class="msg_top">

<div style="float: left;"><a href="http://chez-swan.net/wiki/rss.php" title="Rss forum"><img align="left" style="vertical-align:middle" src="http://chez-swan.net/templates/silver/images/rss.gif" alt="Rss" title="Rss" border="0" /></a> <h3 class="title valign_middle">Dernières Documentations</h3></div>

<div style="float:right">.:. <a style="font-size: 10px;text-decoration: underline;" href="../wiki/wiki.php" title="wiki">Documentations</a> .:.</div>

</div>

<div class="news_content">

<script type="text/javascript" src="http://chez-swan.net/cache/rss_wiki.html"></script>

<br>

</div>

<div class="news_bottom_l"></div>

<div class="news_bottom_r"></div>

<div class="news_bottom"></div>

</div>

Or cela ne s'avère pas possible ! Et ce matin, après avoir cogité au petit Dèj, J'ai fais des essais en locale via le css pour voir ...

J'ai enfin trouvé comment faire, mais cela à quand même un inconvénient mineur que je vous expliquerais plus bas...

Tout d'abord, comme je n'ai pas la science infuse en css ( c'est un vaste langage et j'ai pas la mémoire d'un éléphant !) je me suis aidée de cette page

Ensuite avec l'aide d'un outil de firefox, Firebug qui m'est très utiles pour faire les recherches css sur les pages web en direct, avec modification du css simulé.

Ce qui m'amène, à la partie de css à modifier pour que cela soit possible.

Qui se trouve dans "templates/NOM_DU_TEMPLATE/news/news.css"

( voir les commentaires dans le code, signalé en gris):

Code CSS :

 
.news_container{    
 /*--------------- J'ai rajouté la couleur de fond ---------------*/
    background:#D8D8D8  repeat-y left;
 /*---------------------------- END---------------------------*/
    width:96%;
    margin:auto;
    margin-bottom:20px;
}
.news_content{
/*----- J'ai rajouté le background avec les variables de position ----------*/
        background-image:url(images/backgroung.png);
        background-repeat:no-repeat;
    background-position:right bottom;
/*---------------------------- END---------------------------*/
    padding:6px;
    border-bottom:1px solid #D8D8D8;
        border-left:3px solid #A5A5A5;
        border-right:2px solid #A5A5A5;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
}

1) Si dans le .news_content, vous avez un "background: #D8D8D8" ou autres, ne le (les) supprimer pas, mettez le (les) en commentaire(s) le temps de faire vos essais.

2) On oublie pas de transférer, l'image "backgroung.png" dans "templates/NOM_DU_TEMPLATE/news/images/"

J'oubliais, l'inconvénient mineur ...

Pour un template, avec dirons nous : les angles arrondis sur les blocs/modules et en transparence, la couleur dans le .news_container sera légèrement visible derrière l'image des blocs/modules.

En attendant, c'est pas grand chose, mais si cela peux aider d'autres personnes... Voilà

@micalement Swan.

Édité par Visiteur Le 07/01/2009 à 10h58

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

Visiteur

giliam Membre non connecté