[CSS] Mettre un "corner backgroung" en png
Aide Css
Créations de Thèmes
Visiteur
Boosteur Inactif
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é :
<!--START module rss du Wiki-->
<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>
<!--END module rss du Wiki-->
<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>
<!--END module rss du Wiki-->
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
giliam Membre non connecté
Booster Mortier
-
Booster Mortier
- Voir le profil du membre giliam
- Inscrit le : 27/12/2008
Et KONA a raison, je trouve ça plutôt sympa sur ton site.
Et je suis content que tu aies enfin trouvé la solution à ton problème.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie