[Tutorial PWG] Rangos coloreados y Medallas para el extra foro

Con este tutorial podrán crear rangos de colores y medallas para el extra foro

Vistas Previas
pagina principal del foro / categoria
------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

Tema / Respuestas
------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

1.debemos activar el extra "Foro"
para eso vamos a Controlar Extras >> Agregar Extra >> Foro >> Agregar

2.Ahora tenemos que sacar el numero de usuario del foro que queremos convertir:

para sacar el numero de usuario, el usuario tiene que hacer un tema o responder uno.

3.una vez creado el tema o respondido uno, hacemos clic sobre el nombre de usuario

------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

eso nos llevara a su perfil;
la url sera algo asi: http://tuweb.es.tl/Foro/profil-4.htm

4.Listo, ya tenemos el numero de usuario (en este caso es 4), recuerdenlo para luego.

5.Pegamos este codigo en Controlar Extras >> Foro >> Texto que va por encima del foro

<h3>Rangos</h3>
<font color="orange">admin</font> <font color="green">mod</font> <font color="black">user</font> <font color="red">banned</font>
<style type="text/css">
/*user*/
td[width="120"] a,td[width="123"] a{
color: black;
background-image: url('http://cdn2.iconfinder.com/data/icons/ledicons/medal_gold_1.png');
background-repeat: no-repeat;
background-position: center right;
padding-right: 16px;
}
/* por tecnocodes.com.ar */
</style>

7.los siguientes son los codigos de cada rango Controlar Extras >> Foro >> Texto que va por encima del foro
recuerda editar lo de rojo por el numero del usuario

Baneado

<style type="text/css">
/*banned*/
td[width="120"] a[color=red]il-NUM.htm"],td[width="123"] a[color=red]il-NUM.htm"]{
color:red;
background-image: url('http://cdn2.iconfinder.com/data/icons/diagona/icon/16/101.png');
background-repeat: no-repeat;
background-position: center right;
padding-right: 16px;
}
/* por tecnocodes.com.ar */
</style>

Moderador

<style type="text/css">
/*mod*/
td[width="120"] a[color=red]il-NUM.htm"],td[width="123"] a[color=red]il-NUM.htm"]{
color:green;
background-image: url('http://cdn1.iconfinder.com/data/icons/silk2/award_star_silver_3.png');
background-repeat: no-repeat;
background-position: center right;
padding-right: 16px;
}
/* por tecnocodes.com.ar */
</style>

Administrador

<style type="text/css">
/*admin*/
td[width="120"] a[color=red]il-NUM.htm"],td[width="123"] a[color=red]il-NUM.htm"]{
color:orange;
background-image: url('http://cdn1.iconfinder.com/data/icons/silk2/award_star_gold_1.png');
background-repeat: no-repeat;
background-position: center right;
padding-right: 16px;
}
/* por tecnocodes.com.ar */
</style>

8.Guardar los cambios

Para agregar mas rangos, solo es necesario editar y agregar este codigo

<style type="text/css">
/* NOMBRE */
td[width="120"] a[color=red]il-NUM.htm"],td[width="123"] a[color=red]il-NUM.htm"]{
color:COLOR;
background-image: url('URL DE LA IMAGEN DEL RANGO(16x16px)');
background-repeat: no-repeat;
background-position: center right;
padding-right: 16px;
}
/* por tecnocodes.com.ar */
</style>

*Azul:Url de la imagen de la medalla, cada rango lleva una diferente por defecto.
*verde: Color del rango, se puede cambiar por colores hexadecimales.
*Rojo: Numero de usuario (explicado en el tutorial)
*solo se puede poner un rango a cada usuario.
*en caso de no ponerle rango, aparecera como "usuario" normal.
*puedes poner el codigo de los rango cuantas veces quieras.

Tutorial 100% hecho por mi, si van a usarlo en sus webs, agregar los siguientes creditos:
[code]<strong>Tutorial hecho por <a href="http://tecnocodes.com.ar">Tecnocodes</a></strong>


Fuente:http://www.promocionatupagina.com/t10090-tutorial-pwg-rangos-coloreados-y-medallas-para-el-extra-foro