Transparence (changer opacité des couleurs)

[Oskiator]

Rappel du premier message :

Bonjour,

Je voulais savoir s'il était possible de changer l'opacité des couleurs du forum. Par exemple de rendre le fond noir semi-transparent (opacité 50%).

Mon forum est en phpbb2.

Merci d'avance !

Oskiator

[Oskiator]

Pas de problèmes, le voici : arcane-sanctum.forumgratuit.ch

Merci pour le temps que vous me consacrez.

[no_way]

Je vous en prie .
Si je comprends bien vous souhaiteriez le fond en noir avec une opacité du style 50% et c'est tout ?

[Oskiator]

L'idéal serait que je puisse moi-même modifier les couleurs et la transparence de n'importe quelle partie du forum à ma guise. Je devrais pouvoir me débrouiller avec ce que j'ai appris ici, il me reste plus qu'à comprendre comment rendre le fond transparent.

J'aimerais rendre transparent le fond noir et brun.

[no_way]

Ok je pense avoir compris:

Code:

.forumline,.forumline td[class^="row"]{
background-color:transparent;
}

[Oskiator]

Bonjour,

Merci, ça marche, mais cela crée encore un nouveau problème. En effet, si le background-color de .forumline est transparent, Le cadre et les séparations seront également transparente.
Comment combler ces trous ?

[no_way]

Ajoutez ce qui suit:

Code:

.forumline{
border-spacing:0;
}

[Oskiator]

Fantastique ! Merci beaucoup ! Il reste encore un petit problème minime, au niveau du remplissage de "qui est en ligne".

Sinon, pourriez-vous m'expliquer les lignes de codes suivantes :

Code:

.forumline,.forumline td[class^="row"]{
background-color:transparent;
}

et

Code:

.forumline{
border-spacing:0;
}

afin que je puisse comprendre comment ça marche ? (Si cela vous prend du temps, ne le faites pas, vous m'avez déjà énormément aidé).

[no_way]

Modifiez votre template <<viewonline_body>>:
remplacez

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="4">

par:

Code:

<table class="Qeel" width="100%" border="0" cellspacing="0" cellpadding="4">

puis ajoutez dans votre CSS:

Code:

.Qeel{
background-color:rgb(0,0,0); 
background-color:rgba(0,0,0,0.84)
}
.Qeel td[class^="row"]{
background-color:transparent;
}


Ceci devrait faire l'affaire.

.forumline,.forumline td[class^="row"]{
background-color:transparent;
}

Ce code-ci permet de mettre le fond transparent à tout élément ayant la classe <<.forumline>> assignée, ainsi qu'à toutes ses cellules lorsqu'elles ont une classe dont le nom commence par <<row>>, ça marcherait donc même avec une classe nommée <<rowlalaonestfoutus>> ^^

.forumline{
border-spacing:0;
}

Ce code-ci permet de redéfinir la valeur cellspacing en html définie dans:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="4">

[Oskiator]

Bonsoir,

rowlalala, ça ne marche pas ^^

Sinon, ce serait possible de remettre des séparations entre les différents forums ?

[no_way]

Bonsoir, pour les séparations entre les lignes, il faut supprimer:

Code:

.forumline{
border-spacing:0;
}

Vous retournerez donc avec le souci précédent à savoir des séparations transparentes.

Souhaitez-vous qu'on reprenne du début, et qu'en fait vous souhaitez que la classe <<forumline>> dispose d'une couleur de fond à admettons 50% d'opacité et que l'on fasse le complément couleur pour l'affichage des différents forums ?

Je ne vous cache pas que je ne comprends plus trop ce que vous souhaitez .

Pour votre qeel je ne vois pas les modifications que je vous ai demandé de faire, j'aimerais avoir le code de votre <<viewonline_body>>

[Oskiator]

Bonjour,

Serait-il possible de mettre des séparations d'une couleur (éventuellement opaque), sans que cela fasse une couche de fond ? Et de mettre des séparations partout sauf entre l'image et le titre du forum. Je pinaille un peu, mais si j'arrive à faire quelques petites améliorations, c'est toujours mieux =)





Voici le code du template. Celui-ci a bien été publié.

Spoiler:

[no_way]

Bonjour, essayez en ajoutant le code suivant à la fin de votre css:

Code:

.three-col tr:first-child td:first-child+td .forumline tr td.row1.over,.three-col tr:first-child td:first-child+td .forumline tr td.row2{border-left:1px solid black;border-right:1px solid black;
}
.three-col tr:first-child td:first-child+td .forumline tr td[class^="row"],.three-col tr:first-child td:first-child+td .forumline tr td[class^="cat"]{border-bottom:1px solid black;
}
.three-col tr:first-child td:first-child+td .forumline tr:last-child td[class^="row"]{border-bottom:none;
}

Edit: j'ai oublié de retirer la séparation entre l'image et le titre du forum, mais je n'ai pas le temps, je passerai ce soir.

[Oskiator]

Bonjour,

Apparemment, .row1 correspond aussi à une perdu du "Qui est en ligne", il y a donc quelques lignes en trop qui sont apparues.
Sinon, par curiosité, est-ce qu'il est possible de mettre une couleur transparente pour les séparations (j'ai vu que je pouvais modifier[code]{border-bottom:1px solid black;}
[code][/code]

J'ai supprimé le template et remis ce que vous m'aviez dit de mettre. Je remarque que l'espace transparent dans le QEEL apparaît seulement quand l'image du QEEL est plus grande que le texte.

[no_way]

Pour le Qeel c'est une erreur de ma part désolé, pour pouvez remettre la valeur par défaut de <<viewonline_body>>, remplacez dans votre gabarit <<index_body>>:

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

par:

Code:

<!-- BEGIN disable_viewonline -->
<table class="Qeel" width="100%" border="0" cellspacing="0" cellpadding="0">

Pour ce qui est des contours avec des couleurs partiellement opaques, c'est possible mais vous aurez de nouveau le souci avec une couche de couleur en dessous.

[Oskiator]

Merci.

Il reste juste un petit problème. Le row1 du .Qeel ne veut pas devenir transparent. J'ai bien mis cela pourtant :

Code:

.Qeel{
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.84)
}
.Qeel td[class^="row"]{
background-color:transparent;
}

[no_way]

En ce cas remplacez par le code suivant:

Code:

.Qeel{
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.84)
}
.Qeel td[class^="row"]{
background-color:transparent !important;
}

[Oskiator]

Génial ! Il reste plus qu'à enlever la séparation entre l'image et le titre du forum. J'aimerais aussi mettre une petite marge entre le texte du Qeel et l'image.

[no_way]

Remplacez :

Code:

.three-col tr:first-child td:first-child+td .forumline tr td.row1.over,.three-col tr:first-child td:first-child+td .forumline tr td.row2{border-left:1px solid black;border-right:1px solid black;
}

par:

Code:

.three-col tr:first-child td:first-child+td .forumline tr td.row1.over{border-right:1px solid black;
}.three-col tr:first-child td:first-child+td .forumline tr td.row2{border-left:1px solid black;border-right:1px solid black;
}

pour le Qeel ajoutez à la fin de votre CSS:

Code:

.Qeel td[class^="row"] span.gensmall{padding-left:10px;display:block}

[Oskiator]

Parfait pour le Qeel. Il y a juste la manipulation pour enlever la séparation qui ne marche pas encore.

Pour le moment, j'ai cela sur ma feuille de style :

Code:


.three-col tr:first-child td:first-child+td .forumline tr td.row1.over{border-right:1px solid black;
}.three-col tr:first-child td:first-child+td .forumline tr td.row2{border-left:1px solid black;border-right:1px solid black;
}
.three-col tr:first-child td:first-child+td .forumline tr td[class^="row"],.three-col tr:first-child td:first-child+td .forumline tr td[class^="cat"]{border-bottom:1px solid black;
}
.three-col tr:first-child td:first-child+td .forumline tr:last-child td[class^="row"]{border-bottom:none;
}

[no_way]

c'est normal je trouve encore ceci dans votre css:

Code:

.three-col tr:first-child td:first-child + td .forumline tr td.row1.over, .three-col tr:first-child td:first-child + td .forumline tr td.row2 {
border-left: 1px solid black;
border-right: 1px solid black;
}

que vous devriez remplacer par:

Code:

.three-col tr:first-child td:first-child+td .forumline tr td.row1.over{border-right:1px solid black;
}.three-col tr:first-child td:first-child+td .forumline tr td.row2{border-left:1px solid black;border-right:1px solid black;
}

[Oskiator]

Merci beaucoup, c'est parfait.

Pour cette page, c'est tout bon. Par contre,sur certaines pages, j'ai vu que des séparations étaient apparues un peu partout. J'ai réussi à modifier cela sur la plupart des pages en changeant les templates, mais pour je n'ai pas réussi à le faire pour certaines pages.

Tout d'abord, pour la page des topics.
J'ai modifié la classe du template template correspondant afin qu'elle s'appelle "topics". J'aimerais à nouveau des séparations partout sauf entre l'image et le titre du topic. Comme je n'ai pas trop compris le code que j'ai collé dans mon css, je ne sais pas comment m'y prendre.

Autre chose, dans l'onglet de recherche avancée, dans la section "Options de recherche", je n'ai pas trouvé la classe qui correspond à cette partie. Je voulais faire un petit "border-spacing:0;"

J'aimerais déjà et encore vous remercier pour tout ce que vous avez fait pour moi, en plus, j'ai appris pas mal de choses en css.

[no_way]

Je vous en prie

pour vos topics rajoutez ce qui suit à votre css:

Code:

table.topics tr td.row1:first-child+td[class^="row"]+td[class^="row"]+td[class^="row"],table.topics tr td.row1:first-child+td[class^="row"]+td[class^="row"]+td[class^="row"]+td[class^="row"]+td[class^="row"]{border-left:1px solid black;border-right:1px solid black;
}
table.topics tr td{border-bottom:1px solid black}

Pour la recherche avancée ajoutez ceci dans votre css:

Code:

#searchitems_show table{border-spacing:0px}

[Oskiator]

J'aimerais encore ajouter une petite marche (disons 3 px) en haut et en bas de chaque sujet, en gardant le titre centré verticalement, et de manière à ce que lorsque le titre est composé de deux lignes, cela n'affecte pas la taille des cases. En effet, je trouve que les topics sont un peu ristrettes... comme le café. Hum... bref, c'est possible ?

C'est tellement plus intéressant la programmation que les exposés de Bio... hum, j'y retourne.

[no_way]

Encore du CSS (miam miam):

Code:

.topics tr td{
line-height:1em;
height:2em;
padding-top:3px;
padding-bottom:3px;
}

[Oskiator]

Merci.

Comment procéder pour appliquer une marge pour seulement une colonne ?
Je trouve que l'image à coté du titre des sujets mérite un petit padding-left et padding-right.

[no_way]

voici:

Code:

.topics tr td:first-child{
padding-left:3px;
padding-right:3px;
}

[Oskiator]

Me revoilà ! J'allais encore entamer les remerciements finaux, mais encore une fois, j'ai trouvé encore quelques "anomalies".

Ce sont encore des border-spacing que je ne sais pas à qui appliquer, ainsi que des séparations en trop. Je vais cette fois mettre un screen, car il est de plus en plus difficile à décrire l'endroit où sont ces quelques "résistants".



J'aimerais encore bien changer le fond noir, lorsqu'on crée un sujet, un message, ou lorsqu'on lit un sujet ou un message.
Je reprendrais les mêmes couleurs :

Code:


background-color:rgb(0,0,0) !important; 
 background-color:rgba(0,0,0,0.84) !important;

[no_way]

Voici les codes à ajouter en ce cas:

Code:

.three-col table.bodyline{border-spacing:0px;}
.post td.hr hr{border:none}
.post td.row1{border:none !important}
#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.84);
}

[Oskiator]

Merci =)
J'aimerais encore faire plusieurs modifications, mais pourriez-vous me dire comment faut-il faire pour savoir la classe à modifier ?



J'aimerais que les deux "catbottom" qui sont encadrés en rouge (où il y a les boutons "sauvegarder le message", "supprimer les message", et où il y a le Calendrier dans les widgets de gauche) aient une "height: 30px;", l'image étant de 30px de hauteur. J'aimerais aussi rendre le fonds des messages transparent (3ème encadré rouge).

Sinon, je ne comprends pas pourquoi, dans les topics, ceux ayant un titre sur deux ligne ont une hauteur de 51px, et ceux ayant un titre sur une ligne ont une hauteur de 49px. J'ai également un problème avec le "catbottom" en bas des topics, qui fait une hauteur de 66px.

Et re-merci d'avance !

[Oskiator]

Petit up comme j'en ai pas fait depuis longtemps =)