En fait, c'est beaucoup de CSS et un chouïa de template pour pouvoir simplifier notre CSS.
Par étapes, tout simplement :
1 - Le template
Commence par te rendre dans le template . Repère la variable
{postrow.displayed.POSTER_RANK}
. C'est elle qui contient le code de ton rang. On va faire en sorte de pouvoir le repérer facilement en CSS, donc pour cela il faut l'entourer d'une balise
<span>
contenant une classe, comme ceci (par exemple) :
- Code:
-
<span class="poster-rank">{postrow.displayed.POSTER_RANK}</span>
2 - Le CSS
Dans ton CSS, tu va changer la position de tes éléments portant la classe
.poster-rank
afin de faire en sorte de pouvoir les remonter par rapport à leur position initiale.
Pour cela, on utilise la propriété
position
que l'on fixe à
relative
. Ensuite, on joue avec
top
pour le faire remonter. Comme ceci :
- Code:
-
.poster-rank {
position: relative;
top: -20px;
}
A toi d'adapter la valeur pour le remonter suffisamment
3 - Dernières retouches
Le simple fait de remonter ton image ne rendra peut-être pas l'effet désiré. Notamment, il est fort probable que ton image cache le pseudo. On peut arranger ça en forçant l'image à se placer derrière le pseudo, cela passe par la propriété
z-index
.
Ainsi, il faut rajouter un
z-index
à ton image, mais également un au pseudo, et faire en sorte que le premier soit plus petit que le dernier.
Petit détail avec le
z-index
: cette propriété ne fonctionne que si l'élément est
positionné. C'est le cas de ton image (qui est positionnée de manière
relative), mais pas de ton pseudo : il faudra préciser un positionnement (plus d'infos sur
z-index
[EN]).
Donc il faudra ajouter
z-index: 1;
à ton image de rang, puis pour ton pseudo :
- Code:
-
.name {
position: relative;
z-index: 10;
}
Après il faut peaufiner pour améliorer le rendu (opacité ?), mais dans l'idée tu devrais être en mesure d'obtenir l'effet désiré avec cette histoire de positionnement