Foro de ayuda Foro de ayuda

 
 F.A.Q.F.A.Q.   BuscarBuscar   Lista de MiembrosLista de Miembros   Grupos de UsuariosGrupos de Usuarios   RegístreseRegístrese 
 PerfilPerfil   Identifíquese para revisar sus mensajesIdentifíquese para revisar sus mensajes   ConectarseConectarse 


[Manual] Cambiar un poco el foro

 
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales
Ver tema anterior :: Ver siguiente tema  
Autor Mensaje
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Fri May 15, 2015    Título del mensaje: [Manual] Cambiar un poco el foro Responder citando

Bueno, bueno, bueno como ya saben el foro de ayuda estuvo un tanto inactivo a que si decidí cumplir mi promesa del tema [MANUAL] Banner para foros y subforos sobre que iba a explicar como editar las tablas y esas cosas.

Bueno hoy vengo a enseñar justamente eso que código de CSS usar para poder remplazar los th y td que usualmente uno ve en sus temas.
Bueno que es un th se preguntaran y que es un td.
Oculto: 

Bueno con esa imagen creo que se distingue que es que cosa.
Cambiando estos atributos puedes cambiar el tipo de letra e incluso su fondo.
Les dejo otros ejemplos:
Oculto: 




Ahora demostrare como cambiar cada clase de un th que en realidad son varios pero demostrare los de la foto que son tres; .thtop que se repite dos veces, .thCornerR y thCornerL:
Oculto: 


Los puedes hacer por separado o todos juntos si quieres que compartan el mismo fondo:
Código:
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR  {background-image: url(Link de la imagen de fondo);}

Si es por separado:
Código:
th.thTop{background-image: url(Link de la imagen de fondo);}
th.thCornerL{background-image: url(Link de la imagen de fondo);}
th.thCornerR{background-image: url(Link de la imagen de fondo);}

Y el resto son iguales el codigo solo remplazan th.th"nombre de la clase"

A estas puedes cambiarle también los atributos de fuente como resultado podría quedarte así que es el que uso yo:
Oculto: 
Use SubSalsa como tema base

Pero quedo así usando el siguiente código:

Código:
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {background-image: url(http://i.imgur.com/iPljxLl.png);
font-family: Baumans;
color: #DEEA50;
text-shadow: 1px 1px 1px #000;
letter-spacing: 1px;
}


Ahora continuamos con el td que son varios también pero en el ejemplo solo podemos ver dos:
Oculto: 

Ahora para modificar los atributos de estos td o similares pueden ser separados o todos juntos, si es todo junto:
Código:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom, td.rowpic{
         background-image: url(Link de la imagen de fondo);
}

Si es por separado:

Código:
td.catLeft{background-image: url(Link de la imagen de fondo);}
td.rowpic{background-image: url(Link de la imagen de fondo);}


Y el resto son iguales el codigo solo remplazan td."nombre de la clase"
A estas puedes cambiarle también los atributos de fuente como resultado podría quedarte así que es el que uso yo:
Oculto: 
El original es SubSalsa:

Pero el mio es:


Código:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom, td.rowpic{
font-family: Baumans;text-shadow: 1px 1px 1px #000;letter-spacing: 1px;
         background-image: url(http://i.imgur.com/EhOGml2.png);
         height: 28px;
border: solid 0 px;
text-align: center;
border-style: hidden;
}


Otros td son los row1, row2, row3 y spaceRow que son usados como fondo en casi todo:
Oculto: 

Para cambiar sus atributos:
Código:
td.row1, td.row2, td.row3, td.spaceRow {   background-image : url(Link de la imagen de fondo);}

También pueden cambiarlas por separado:
Código:
td.row1 {   background-image : url(Link de la imagen de fondo);}
td.row2{   background-image : url(Link de la imagen de fondo);}
td.row3{   background-image : url(Link de la imagen de fondo);}
td.spaceRow{   background-image : url(Link de la imagen de fondo);}


Estos td también repercuten en los post por ejemplo el que uso yo:
Oculto: 
Tema original(Sacado de otro foro que lo traía aplicado):

El mio:


Este es el código completo:
Código:
a.forumlink, a:link, a:active, a:visited, a.topictitle {color:#CC9900;}
.gen, .genmed, .gensmall, .postbody, .postdetails{color: #FFFFFF;}

td.row1, td.row2, td.row3, td.spaceRow{
   background-image : url(http://i.imgur.com/mSYIEbk.png);
color: #FFFFFF
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom, td.rowpic{
font-family: Baumans;text-shadow: 1px 1px 1px #000;letter-spacing: 1px;
         background-image: url(http://i.imgur.com/EhOGml2.png);
         height: 28px;
text-align: center;
border-style: hidden;
}

th {font-family: Baumans;text-shadow: 1px 1px 1px #000;letter-spacing: 1px;background-image: url(http://i57.servimg.com/u/f57/17/72/22/22/subbar10.png); background-repeat: repeat-x;}

th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {font-family: Baumans;text-shadow: 1px 1px 1px #000;letter-spacing: 1px;         background-image: url(http://i.imgur.com/iPljxLl.png);
   font-weight: bold;
   height: 28px;
border-style: hidden;
}

/* Esto es por si tienen activado el mod de la publicidad */
td[style="background-color: #FFF5DC; border: #FEE9D1; border-style: solid; border-width: 1px; text-align: center;"]{background-image : url(http://i.imgur.com/mSYIEbk.png);
color: #FFFFFF}




Otro gran detalle que funcionaria en cualquiera de los códigos anteriores es que si falla, probablemente deberían añadir el atributo !important delante de la línea de código.
Gracias elporta111 por recordarlo Wink




Muy posiblemente no lo haya explicado bien el tema pero creo que más o menos se entiende como hacer para lograr lo que ustedes desean.
Obviamente estoy a su servicio cualquier información que deseen sobre el tema o no haya explicado bien les responderé y editare el tema para agregar el contenido.
Muchísimas gracias por la atención de ustedes.

Saludos cordiales el user Phosphorus Moscu Wink

_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink


Ultima edición por Phosphorus el Fri May 22, 2015; editado 1 vez
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
Parallax



Sexo: Sexo:Hombre
Registrado: 07 Aug 2010
Mensajes: 71
Estado: Offline
MensajePublicado: Thu May 21, 2015    Título del mensaje: Responder citando

Si falla, probablemente deberían añadir el atributo !important delante de la línea de código.
_________________
`Ahora, sígueme. Entenderás el significado cuando lleguemos al Edén.´
Volver arriba
Ver perfil del usuario Enviar mensaje privado  
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Fri May 22, 2015    Título del mensaje: Responder citando

Otro buen detalle que se me escapo, gracias por recordarmelo; editare el post Very Happy
_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
Parallax



Sexo: Sexo:Hombre
Registrado: 07 Aug 2010
Mensajes: 71
Estado: Offline
MensajePublicado: Fri May 22, 2015    Título del mensaje: Responder citando

Un truco para gente que domina algo más este mundo: ¿Cómo encontrar el nombre del código de la sección deseada?

Utilizando google chrome, haz clic derecho encima de lo deseado (como por ejemplo, la barra inferior) y seleccionamos en "Inspeccionar elemento".

Podrá apreciarse el CSS junto al HTML adjunto de la página visitada en ese momento, donde por defecto te seleccionará la parte donde estabas inspeccionando en su determinado código. Éste puede ser editado para "Vistas previas", pero los cambios definitivos deberán ser realizados vía código para que se hagan públicos.

Por cierto Phosphorus, mira tu bandeja de MP (o correo), te envié una pregunta.

Saludos.
_________________
`Ahora, sígueme. Entenderás el significado cuando lleguemos al Edén.´
Volver arriba
Ver perfil del usuario Enviar mensaje privado  
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Sat May 23, 2015    Título del mensaje: Responder citando

Si, de hecho también puedes probar tus códigos CSS ahí.
Próximamente a lo mejor haga un post sobre eso ya que es verdaderamente útil para desarrollar una pagina.
_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
Parallax



Sexo: Sexo:Hombre
Registrado: 07 Aug 2010
Mensajes: 71
Estado: Offline
MensajePublicado: Sat May 23, 2015    Título del mensaje: Responder citando

Lo único es que no todos saben que es sólo código local de edición, lo que se haga sólo afectan al que lo esté viendo hasta que se refresque la página. Debe usarse con fines de desarrollo únicamente.

Si tenéis Firefox, no sé si podréis hacerlo.
_________________
`Ahora, sígueme. Entenderás el significado cuando lleguemos al Edén.´
Volver arriba
Ver perfil del usuario Enviar mensaje privado  
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Sat May 23, 2015    Título del mensaje: Responder citando

Si, de hecho esta en casi todos los navegadores tengo entendido ya que se basa en el código fuente de la pagina en la que accedas pero si es solo local, cuando actualizas se borra todo.
Los navegadores más conocidos que tiene esta función son Internet Explorer, Opera, Chrome, Firefox y Safari.
_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
YoshiGM
Invitado





MensajePublicado: Fri May 29, 2015    Título del mensaje: Responder citando

Muchas gracias Phosphorus por el aporte Wink

Muevo a Manuales.
Volver arriba
Mostrar mensajes anteriores:   
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales Todas las horas están en GMT + 1 Hora
Página 1 de 1

 
Saltar a:  
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas

Temas Relacionados
 Temas   Respuestas   Autor   Lecturas   Último Mensaje 
No hay mensajes nuevos Ayuda, no puedo hacer una encuesta abierta a todos 3 Doremor 1000 Fri Sep 26, 2008
keko Ver último mensaje
No hay mensajes nuevos ayuda esforos 8 perioner 1702 Wed Jul 16, 2008
-Thunder- Ver último mensaje
No hay mensajes nuevos Ayuda :S 23 Lacoste 4596 Mon Oct 29, 2007
naruto Ver último mensaje
No hay mensajes nuevos Necesito ayuda por favor 4 r-a-u-l 1617 Thu Oct 18, 2007
EsForos Ver último mensaje
No hay mensajes nuevos AYUDA 1 r-a-u-l 1267 Mon Oct 15, 2007
EsForos Ver último mensaje
 



Crear foro gratis - Powered by phpBB © 2001, 2005 phpBB Group