Solved: [Phbb2]How to change list staff to be like this?

Hello,

is it possible to change the appearance of a list staff to be like this?

see this image:

Click This!:

If possible, can you please tell me how!  

If nobody else provides the codes, ill be more glad to provide them once I have access to a PC.

If you have access to the templates. Go to the following one: index_body >> Search for this:

Code:

{GROUP_LEGEND}

And replace it with this:

Code:

<div class="legend">{GROUP_LEGEND}</div>

Add this into your CSS:

Code:

.legend {
border: 1px solid #ADC5E0;
padding: 3px 6px;
background: white;
border-radius: 3px;
font-family: Verdana,Arial;
font-size: 10pt;
font-weight: normal;
}

@Sir Chivas:
Oh, thanks.. It's worked

But, why look like this?

not like I was expecting
and why the separation between my group have a look like this -> [group] [group], it is can be changed?
I want each of my group have a look < div class="legend"> <./div> separately.
like in this forum :
--

---

and sorry, my english is bad..

Edit the Templates index_body and find

Code:

<p>{LEGEND} :&nbsp;{GROUP_LEGEND}</p>

Matti wrote:Edit the Templates index_body and find

Code:

<p>{LEGEND} :&nbsp;{GROUP_LEGEND}</p>

I found it!
but, what should I do for next?

Can you provide your forum URL? thank you.

@Sir Chivas: Yeah.. -> http://www.indofanster.org/

Replace the

Code:

<p>{LEGEND} : {GROUP_LEGEND}</p>

With this one

Code:

<div style="text-align: center;"><a href="/g1-administrator" class="l-s" style="color: #B50000">™Administrator­™</a>

<a href="/g2-moderator" class="l-s" style="color: #1818F5">™Moderator™</a>

<a href="/g15-staff-rpg" class="l-s" style="color: #491970">™Staff RPG™</a>

<a href="/g17-dischap-naruto-team" class="l-s" style="color: #FF7308">™DisChap Naruto Team™</a>

<a href="/g20-tim-diskusi-manga" class="l-s" style="color: #CCB100">™Tim Diskusi Manga™</a>

<a href="/g4-designer" class="l-s" style="color: #50C8E6">™Designer™</a>

<a href="/g5-writter-s" class="l-s" style="color: #19B80B">™Writter's™</a>

<a href="/g10-super-member" class="l-s" style="color: #B58148">™Super Member™</a></div>

Note: If you add a new group you need to add it manually to the code.

@Matti: Ohh.. Thank you very much
It's work now..

Problem solved, please lock this topic..

Thanks again..