Depuis que j'ai changé mon fond d'écran, j'avais dans l'idée d'en mettre une partie dans les colonnes, pour avoir la même texture un peu partout...
J'avais commencé hier soir (enfin, dans la nuit de Jeudi à Vendredi), sans résultat, puis j'avais laissé de coté, en me disant que je m'y recollerais plus tard...
Et là, tout à l'heure, après les films de ce soir (j'ai loupé Volcano, tiens, sur Ciné Premier, j'ai vu que la fin, mais pas grave, ils le rediffuseront bien...), je bascule la télé sur MCM Pop, et l'idée me vient de me remettre à la modification de ma skin (oui, je sais, je suis têtu !!)...
Premier problème qui se pose (je l'avais constaté au premier essai), j'ai une skin très pauvre en CSS (ce qui est normal, elle est issue de la Duplo, qui à l'origine ne possède pas beaucoup de CSS, contrairement aux autres skins...), ce qui n'arrange pas mes affaires...
En effet, il est préférable de modifier quelque chose dans les CSS que dans une skin comme la mienne où tout est défini par des tableaux (avec les balises <table>.... </table> et ses sous-éléments <td>... </td> et <tr>...</tr>)...
C'est même relativement facile à comprendre : dans une skin, plusieurs éléments de la mise en page peuvent se référer à un seul élément de la feuille de style CSS (plus besoin de répéter les opérations), alors qu'avec <table>, on doit impérativement répéter les opérations, ce qui complique un tantinet les choses...
Bref, chez moi, la feuille de style CSS se résume à ça :
<style type="text/css">
<!--
body {
background: url(<SITE_URL>/images/BigBrother_1.jpg) fixed;
}
.calendar {font-family:georgia; font-size:11px
}
.calendarDayOfWeek { font-family:georgia;font-size:9px;
}
.calendarDay {font-family:georgia;}
.calendarDayLinked {background-color:#FFFF88 }
.calendarDayToday, .calendarDayTodayLinked { font-weight:bold; background-color:#002EB8 }
A:link { text-decoration: none;font-family:arial, verdana, sans-serif;font-style:italic;font-size:15px;font-weight:bold;}
A:visited { text-decoration: none;font-family:arial, verdana, sans-serif;font-style:italic;font-size:15px;font-weight:bold;}
A:hover { text-decoration:none; color:red; font-family:arial, verdana, sans-serif;font-style:italic;font-size:15px;font-weight:bold; }
A:active { text-decoration: underline;font-family:arial, verdana, sans-serif;font-style:italic;font-size:15px;font-weight:bold;}
TD { font-family:arial;font-size:16px; }
P { font-family:georgia;text-align:justify; }
.texte { font-family:georgia;font-size:18px; }
.txt1 { font-family:georgia;font-size:17px;color:#<smartcolor texte>; }
.txt2 { font-weight:bold;font-family:georgia;font-size:17px;color:#<smartcolor titrearticle>; }
.txt3 { font-family:arial;font-size:14px;text_indent:20px;font-weight:bold;color:#<smartcolor texte>; }
.txt4 { font-family:arial;font-size:14px;color:#<smartcolor titrecadre>; }
.txtss { font-family:arial;font-size:14px;font-weight:bold;color:#<smartcolor soustitre>; }
abbr, acronym, .help {
border-bottom: 2px dotted red; cursor:help;
}
blockquote {margin-left:15px;
padding-left:10px;
border-left:1px solid #FFCC33;
}
cite {margin-left:15px;
padding-left:10px;
}
td>li {
list-style-type: none;
}
-->
</style>
Et il n'y a rien dans la feuille de style qui se réfère aux blocs, je dois donc tout modifier dans la partie "smartblocks definitions", qui est conçue uniquement en tableaux... (bonjour le mal de crâne !!) :-)
Malgré le fait que ça ne soit pas une partie de plaisir, je m'y attaque tout de même... Sachant que dans un tableau, les couleurs sont définies par "bgcolor=...", je sais que c'est ça que je dois rendre "inactif" (exemple ci-dessous) :
<define_macro name="left_start">
<table width="185" bgcolor="#<smartcolor cadre>" cellpadding=1 cellspacing=0 border=0>
<tr><td><table width="100%" bgcolor="#<smartcolor fondbloc>" cellpadding=2 cellspacing=0 border=0>
</define_macro>
<define_macro name="left_end">
</table></td></tr></table></td></tr></table>
<br>
</define_macro>
<define_macro name="left_title">
<tr><td bgcolor="#<smartcolor fondtitrecadre>" align=center><font color="#<smartcolor titrecadre>" face=arial><b><arg name="title"></b></font></td></tr>
<tr><td><table width="100%" bgcolor="#<smartcolor fondbloc>" cellpadding=0 cellspacing=0 border=0>
</define_macro>
Bref, après de multiples essais, je vais finir par comprendre comment le tout fonctionne (je ne suis pas un pro en html, je le répète...)
Supposons que je rende inactive la couleur de fond des blocs, qui est repérée par "bgcolor=<smartcolor fondbloc>", ça marchera, mais, comme c'est un tableau, la couleur de fond sera automatiquement remplacée par la couleur du cadre, repérée elle par "bgcolor="<smartcolor cadre>"... Donc, j'ai pas d'autre choix que de désactiver les deux couleurs, et de faire apparaitre autour de mes blocs une bordure, à laquelle je donnerai la couleur du cadre... Compliqué ?? Disons tiré par les cheveux, oui, mais je n'ai jamais dit que l'html était simple, je m'en suis aperçu tout seul !! ;-))
Il faut savoir que dans un tableau (<table>), la couleur de fond est TOUJOURS représentée par "bgcolor"... Donc, si nous avons deux "bgcolors" dans deux tableaux se superposant (1 pour la couleur du cadre et l'autre pour la couleur de fond), si je désactive la couleur de fond, la couleur du cadre, elle, sera toujours là !!
La seule soluce, comme je l'ai dit, est de faire apparaitre une bordure "border=1" et de lui attribuer la couleur du cadre (bordercolor=<smartcolor cadre>)... et c'est ce que j'ai fait !!
Mes blocs apparaissant désormais en transparence sur l'image de fond d'écran, il était assez facile de leur attribuer à eux aussi une image de fond (la même texture que j'ai repiquée sur l'image de fond) en rajoutant à ma balise <table> l'attribut style="background:url(<SITE_URL>/images/url_texture.jpg)"
Ca paraît simple, expliqué comme ça, mais quand on teste, c'est loin d'être évident au premier abord !!
Finalement, la modification de mes blocs donnera ceci :
<define_macro name="left_start">
<table width="185" bgcolor="" cellpadding=1 cellspacing=0 border=0>
<tr><td><table width="100%" bgcolor="" cellpadding=2 cellspacing=0 border=1 bordercolor="<smartcolor cadre>" style="background:url(<SITE_URL>/images/BigBrother_uniforme.jpg)">
</define_macro>
<define_macro name="left_end">
</td></tr></table></td></tr></table>
<br>
</define_macro>
<define_macro name="left_title">
<tr><td bgcolor="<smartcolor fondtitrecadre>" align=center><font color="#<smartcolor titrecadre>" face=arial><b><i><center><arg name="title"></center></i></b></font></td></tr>
<tr><td bgcolor="">
</define_macro>
Et comme j'ai des blocs à gauche et à droite, la modification des blocs de droite sera identique à celle-ci, + la modification de ma boîte "Ceux que je préfère" que j'avais rajoutée directement dans la skin... 3 modifications en tout, mais le résultat est là, et je suis content de moi !! :-)
Toutefois, j'ai fait en tout 2 grosses modifications, que j'ai sauvegardées...
J'ai toujours ma skin d'origine, avec les fonds des blocs sans texture, j'ai la même mise en page, mais complètement transparente, et celle que vous voyez actuellement... et je peux passer de l'une à l'autre sans difficultés, mais pour l'instant, seules celle-ci et celle d'origine (je me comprends) sont installées... La skin complètement transparente, je la mettrai un petit peu plus tard... ;-)
Bon, là, je suis content de moi, je peux aller me coucher tranquille... A tout à l'heure...
Mots-clés : Technique, Informatique
