Códigos para el Staff

Saludos gente!! Vengo a compartirles otro código que yo hice, esta vez para el Staff, lo pueden poner en un widget del foro, o agregarlo a su Tablón de Anuncios, o dónde esté a la vista el Staff.

Se verá así, ya cuando lo implementen:

ver demo

Entonces, les dejo este código para los miembros del Staff de mayor nivel, que es el fundador y los admin, lo ponen en el CSS de su foro:

Código:

#cuadri {
 width: 150px;
 height: 80px;
 border: 6px solid #902121;
 box-shadow: 1px 1px 1px #000000;
 position: relative;
 margin: 7px;
}



#cuadri img{
 width: 100px;
 height: 80px;
 position: absolute;
 margin: 0px;
 margin-left: 0px;
 
}

#libreta {
 width: 150px;
 height: 80px;
 position: absolute;
 background-color: none;
 opacity: 0;
 -webkit-transition: .5s ease-in;
 -moz-transition: .5s ease-in;
 -o-transition: .5s ease-in;
 -ms-transition: .5s ease-in;
 transition: all .7s ease-in;
}

#libreta:hover {
 background-color: #000000;
 opacity: .7;
 -webkit-transition: .5s ease-in-out;
 -moz-transition: .5s ease-in-out;
 -o-transition: .5s ease-in-out;
 -ms-transition: .5s ease-in-out;
 transition: all .7s ease-in-out;
}

#cuadri p{
 font-family: Arial;
 font-size: 11px;
 color: #FFFFFF;
 text-align: center;
 font-weight: bold ;
 padding: 5px;
 margin-left: -8px;
 }
 
#cuadri h2 {
   font-family: Arial;
 font-size: 14px;
 color: #FFFFFF;
 text-align: center;
 font-weight: bold;
 border-bottom: 2px solid #FFFFFF;
 padding: 3px;
 }

Que como ven en el demo, son esos cuadritos de mayor tamaño, y ya personalizan colores, su imagen, nombre de usuario y el link para el mp. En caso de requerir modificar la medida de margen y el padding (margen interior), adelante. Según cómo ustedes lo vean.

Aquí el html para los cuadros de los admin y fundador:

Código:

<div id="cuadri">
                                                                                                                                            <img src="http://i21.servimg.com/u/f21/18/85/47/33/1508010.jpg" />                                                                                                                            <div id="libreta">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
<h2>
                                                                                                                            USUARIO                                                                                                                            
</h2>
                                                                                                                                                                                                                                                          
<p>
                                                                                                                             Puesto<br /><a href="#">Enviar Mp</a>                                                                                                                              
</p>
                                                                                                                                                                                                                                                          
</div>
                                                                                                                                                                                                                                                        
</div><div id="cuadri">
                                                                                                                                            <img src="http://i21.servimg.com/u/f21/18/85/47/33/1508010.jpg" />                                                                                                                            <div id="libreta">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
<h2>
                                                                                                                            USUARIO                                                                                                                            
</h2>
                                                                                                                                                                                                                                                          
<p>
                                                                                                                             Puesto<br /><a href="#">Enviar Mp</a>                                                                                                                              
</p>
                                                                                                                                                                                                                                                          
</div>
                                                                                                                                                                                                                                                        
</div>

Ora, para los Moderadores, les dejo este código, que va en el CSS de su foro:

Código:

#cuadrin {
  width: 60px;
  height: 75px;
  border: 6px solid #902121;
  box-shadow: 1px 1px 1px #000000;
  position: relative;
  margin: 7px;
}



#cuadrin img{
  width: 60px;
  height: 75px;
  position: absolute;
  margin: 0px;
  margin-left: 0px;
  
}

#libreti {
  width: 60px;
  height: 75px;
  position: absolute;
  background-color: none;
  opacity: 0;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  -o-transition: .5s ease-in;
  -ms-transition: .5s ease-in;
  transition: all .7s ease-in;
}

#libreti:hover {
  background-color: #000000;
  opacity: .7;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  transition: all .7s ease-in-out;
}

#cuadrin p{
  font-family: Arial;
  font-size: 9px;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold ;
  padding: 0px;
  margin-left: -8px;
  }
  
#cuadrin h2 {
    font-family: Arial;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #FFFFFF;
  padding: 0px;
  }

Y el html para estos cuadritos:

Código:

<table><tr><td><div id="cuadrin">
            <img src="http://i21.servimg.com/u/f21/18/85/47/33/607510.jpg">            
 <div id="libreti">
                      
 <h2>
            Usuario            
 </h2>
                      
 <p>
            Puesto<br /><a href="#">Enviar Mp</a>            
 </p>
                      
 </div>
                    
 </div>
                    
     </td>
                    
 <td><div id="cuadrin">
            <img src="http://i21.servimg.com/u/f21/18/85/47/33/607510.jpg">            
 <div id="libreti">
                      
 <h2>
            Usuario            
 </h2>
                      
 <p>
            Puesto<br /><a href="#">Enviar Mp</a>            
 </p>
                      
 </div>
                      
                                  </div></td></tr></table>

Yo lo pongo así, con la tabla, pero si ustedes no la necesitan, pueden quitársela.

Si requieren más cuadritos, tanto de los admin como para los mod, sólo agreguen otros div, así:


Por ejemplo, que son ustedes tres admin:

Código:

<div id="cuadri">
                                                                                                                                            <img src="http://i21.servimg.com/u/f21/18/85/47/33/1508010.jpg" />                                                                                                                            <div id="libreta">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
<h2>
                                                                                                                            USUARIO                                                                                                                            
</h2>
                                                                                                                                                                                                                                                          
<p>
                                                                                                                             Puesto<br /><a href="#">Enviar Mp</a>                                                                                                                              
</p>
                                                                                                                                                                                                                                                          
</div>
                                                                                                                                                                                                                                                        
</div><div id="cuadri">
                                                                                                                                            <img src="http://i21.servimg.com/u/f21/18/85/47/33/1508010.jpg" />                                                                                                                            <div id="libreta">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
<h2>
                                                                                                                            USUARIO                                                                                                                            
</h2>
                                                                                                                                                                                                                                                          
<p>
                                                                                                                             Puesto<br /><a href="#">Enviar Mp</a>                                                                                                                              
</p>
                                                                                                                                                                                                                                                          
</div>
                                                                                                                                                                                                                                                        
</div>

<div id="cuadri">
                                                                                                                                            <img src="http://i21.servimg.com/u/f21/18/85/47/33/1508010.jpg" />                                                                                                                            <div id="libreta">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
<h2>
                                                                                                                            USUARIO                                                                                                                            
</h2>
                                                                                                                                                                                                                                                          
<p>
                                                                                                                             Puesto<br /><a href="#">Enviar Mp</a>                                                                                                                              
</p>
                                                                                                                                                                                                                                                          
</div>
                                                                                                                                                                                                                                                        
</div>

Ahí ya agregué otro div para los admin, lo mismo pueden hacer para los Mod.


Si necesitan hacer más grandes los cuadros, adelante, también pueden hacerlo.


Y les dejo el link de la fuente estilo : "Oswald", jejejeje, me gusta mucho usarla, si a ustedes también, adelante:

Código:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

¿Dónde la ponen?
Para implementarla en todo su foro, les recomiendo ver este tuto de ForoActivo:

Implementar más fuentes al foro


Les dejo los créditos para que por favor, lo incorporen debajo de sus cuadritos, o dónde ustedes tienen el espacio para los créditos:

Código:

<br><a href="http://foroplumayficcion.foroactivo.mx/u1?akata">Por KenshinCroft</a>

En código bb:

Código:

[url=http://foroplumayficcion.foroactivo.mx/u1?akata]Por KenshinCroft[/url]

Cualquier duda o cosilla, me dicen.