Élite 0/36
Crear foroAmour SucréFate/Insane EclipseDark Souls
Hermanos 0/6
Directorios 0/12
Diciembre 2017
LunMarMiérJueVieSábDom
    123
45678910
11121314151617
18192021222324
25262728293031

Calendario Calendario

Palabras claves

No  

Últimos temas
» Sakura feudal
Sáb Abr 29, 2017 8:18 pm por Sakura Feudal

» Afiliaciones ELITE
Lun Nov 21, 2016 2:00 pm por OMEGA

» Little Secrets
Vie Nov 18, 2016 8:37 am por Little Secrets

» Sakura Feudal : Publicidad Portada
Jue Nov 03, 2016 10:02 pm por Sakura Feudal

» Oni Empire-Feudal Inuyasha
Dom Oct 16, 2016 7:29 pm por kazama

» Determination (UNDERTALE) {Afiliación Hermana 3/3}
Dom Oct 02, 2016 1:14 pm por Hopes and Dreams

» DETERMINATION { Undertale Rol }
Dom Oct 02, 2016 1:11 pm por Hopes and Dreams

» DETERMINATION (UNDERTALE ROL) { Solicitud portada }
Dom Oct 02, 2016 12:54 pm por Hopes and Dreams

» Tarot de los Sentimientos.Pasional.íntimo.Y Muy Bueno.
Vie Ago 12, 2016 2:33 pm por ArenasYMar


Códigos para el Staff

Ver el tema anterior Ver el tema siguiente Ir abajo

Códigos para el Staff

Mensaje por KenCroft el Miér Nov 11, 2015 2:07 pm

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. Very Happy
avatar

Tu Foro :

Mensajes : 125
Unicornios : 10
Fecha de inscripción : 22/09/2015
Localización : En el mundo de la Ficción

Ver perfil de usuario http://foroplumayficcion.foroactivo.mx/

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

Permisos de este foro:
No puedes responder a temas en este foro.