Ranks to work like this

Hello All me again.

ok i have just seen this and want to do something like it


 can some one help me get this for all forums Not just for phpbb3 but for all of them so others can do this too

Tiny post profile field, rank image with curves and some CSS on whatever forum you want to do it.That's what you need here.

That dont really help much lol

have you the img rank? please post here i think i know how

It looks just like an image that you add to the rank, but is design to extend pass the profile area.

It looks pretty flat, so I'd say it's achievable purely with CSS.

Code:

.postprofile dt + dd {
  color:#FFF;
  font-weight:bold;
  background:#4AD;
  border:1px solid #17A;
  border-radius:0 0 3px 3px;
  position:relative;
  margin:3px -10px;
  padding:3px;
}

.postprofile dt + dd:before, .postprofile dt + dd:after {
  content:".";
  font-size:0;
  background:#17A;
  display:block;
  position:absolute;
  top:-6px;
  height:6px;
  width:6px;
}

.postprofile dt + dd:before {
  border-radius:4px 0 0 0;
  left:-1px;
}

.postprofile dt + dd:after {
  border-radius:0 4px 0 0;
  right:-1px;
}

Might need some margin adjustments, but should work on phpbb3.

That is just how I wanted it but is there away to change the background colour to each of the /groups ?

Right now there all blue

Do you have a script which gives the staff a class name on their posts ? If so you can do this for example :

Code:

.st-answer.admin .postprofile dt + dd, .st-answer.admin .postprofile dt + dd:before, .st-answer.admin .postprofile dt + dd:after {
  background-color:#F90;
  border-color:#C60;
}

I have the old FM background system on the forum other then that the staff are all set to groups that colour there names as you know i don't have a lot of css space left so i think i will have to have a play about with some codes

Oh in that case, another thing you can do is add a div tag in the user rank with a class. Like this :

Code:

<div class="rang-band dev">Developer</div>

This is the default CSS :

Code:

.rank-band {
  color:#FFF;
  font-weight:bold;
  background:#4AD;
  border:1px solid #17A;
  border-radius:0 0 3px 3px;
  position:relative;
  margin:3px -10px;
  padding:3px;
}

.rank-band:before, .rank-band:after {
  content:".";
  font-size:0;
  background:#17A;
  display:block;
  position:absolute;
  top:-6px;
  height:6px;
  width:6px;
}

.rank-band:before {
  border-radius:4px 0 0 0;
  left:-1px;
}

.rank-band:after {
  border-radius:0 4px 0 0;
  right:-1px;
}

and then you'll have the group CSS for changing the color :

Code:

.rank-band.dev:before, .rank-band.dev:after { background-color:#111 }
.rank-band.dev {
  background-color:#333;
  border-color:#111;
}

Thank you @Ange Tuteur i will look along that when i have done a clean up of my codes lol i have made a little change to the one you gave me at first to make it fit in with the forum for now and will take a look in to the other code later on

Thanks once again Buddy

No problem, just let me know if you need anything.

Will do Thank you

Can this be done with images for the rank banners, as well?

when i changed it over from what i had i had a rank then a bar under it like this
as you can see i changed the rank img to the bars

Leah7 wrote:Can this be done with images for the rank banners, as well?

I guess it's possible, when you make the background of the rank image the same as the banner.But you must use only ranks with images, without any text.

So many codes...........

As i would say this is solved my self i will lock it

Topic solved and archived