YoshiGM

Crear Tablas de Anuncios Cómo en Foroactivo

YoshiGM a la(s) 20h24
19
Nov
2017
Crear Tablas de Anuncios como en ForoActivo

Gracias a este tutorial, lograremso crear nuestras propias tablas de anuncio tal y como tenemos aquí en el foro de soporte de Foroactivo.

Tendremos un resultado por ejemplo:


2.CSS + BBCode:

Primero vamos a crear el "diseño" de la tabla mediante CSS. Los códigos se pegarán como siempre en

» Panel de Administración > Visualización > Imágenes y Colores > Colores > CSS Stylesheet


1. Exterior de la tabla

Código:
.tabla-off {
    border:1px solid #COLOR DEL BORDE;
    table-layout:fixed;
    width:100%
}


2. Imagen de Izquierda (logo del foro por ejemplo)

Código:
.tabla-inicio {
    background-image:url("Link de la imagen inicial");
    background-repeat:no-repeat;
    height:100px;
    width:152px
}


Aquí debemos de insertar el link de la imagen en dónde aparece nuestro logo. Por ejemplo el logo del foro o las abreviaturas. En este foro se utiliza por ejemplo el logotivo de Foroactivo.
Tiene que ser una imagen de 152px x 100px.

3. Imagen Central y Título del Anuncio

Código:
.tabla-titulo {
    background:url('LINK DE LA IMAGEN CENTRAL');
    padding-bottom:15px;
    text-align:center;
    font-size:20px;
    color:#COLOR DEL TITULO;
    font-weight:bold
}


Aqui vamos a añadir la imagen que será en dónde se insertará el título del anuncio así como el color del titulo del mismo.
El tamaño recomendado es de 42px x 100px

4. Final de Tabla y Contenido

Código:
.anuncio-test {
    background-image:url("LINK DE LA IMAGEN FINAL");
    background-repeat:no-repeat;
    width:84px;
}


Por último vamos a poner la imagen del final, que es la que contiene el rectangulo "Auncio", "Tutorial" o lo que queramos.
El tamaño recomendado de ésta es de 84px x 100px.

Para el contenido de la tabla, se pondrá:

Código:
.tabla-cont {
    padding:5px;
    background-color:#COLOR DE FONDO;
    color: #COLOR DEL TEXTO;
}


5. Pie de Tabla, Copyright de la Tabla e Icono
Hay que darle un estilo al pie de la tabla con este CSS:

Código:
.tabla-footer {
  border: 1px solid #COLOR DEL BORDE;
    table-layout:fixed;
    width:100%
}


Si queremos añadir un copyright a nuestra tabla tipo: Copyright ©️ Foroactivo, hay que darle nuestro estilo también..

Código:
.tabla-copy {
    text-align:justify;
    background:none repeat scroll 0 0 #FONDO COPYRIGHT;
    padding-left:5px;
    font-size:11px;
    color:#COLOR DEL TEXTO COPYRIGHT;
}


Y para un icono al final (helpo de foroactivo como FDF), hay que añadir lo siguiente:

Código:
.tabla-img {
  background-image: url(LINK DEL ICONO);
  background-repeat: no-repeat;
  width: 46px;
  height: 46px;
  background-color: COLOR DE FONDO DEL ICONO;
}


Hay que insertar el link del icono, editar los 46px por el ancho y altura del icono y el fondo del mismo.




Ya una vez tengamos todo listo, ahora debemos de copiar el siguiente bbcode:

Código:
[table class="tabla-off" cellspacing="0"][tr][td class="tabla-inicio"][/td]
[td class="tabla-titulo"][center][size=20]EL TÍTULO AQUÍ[/size][/center]
[/td][td class="anuncio-test"][/td][/tr][/table][table class="tabla-off" cellspacing="0"][tr][td class="tabla-cont"]
EL CONTENIDO

[/td][/tr][/table][table class="tabla-footer" cellspacing="0"][tr][td class="tabla-copy"]
AQUI MIS COPYRIGHTS
[/td][td class="tabla-img"][/td][/tr][/table]


:alert: Se recomienda oscilar el modo de edición ( ) antes de pegar el código, con el fin de evitar con el editor al momento de editar la tabla y nos agrege bbcodes innecesarios. [No se tiene que ver directo colores ni nada]

Lo siguiente es editar título contenido y copyrights y eso sería todo!

Recuerden que si necesitan alguna de las imagenes para su tabla, tienen a su disposición el servicio de creación gráfica

Para una correcta instalación y funcionamiento de los tutoriales puede ser recomendable tener en cuenta estas Consideraciones sobre instalación o modificación de códigos, templates y tutoriales





Se acabo !

Pero pronto habrá más, y sobre todo, recordad que siempre que queráis, todo el Staff estamos encantados de recibir vuestros tutoriales por MP
Aqui están las Normas


Si tienes dudas con respecto a un tutorial, no dudes en preguntar en el foro "Problemas con los codigos"... sin embargo todos han sido verificados y funcionan correctamente : bueno :

Temas similares
Hola otra vez yo, lo que pasa es que he tratado de hacer las tablas de anuncios como las que salen en le portal de aqui de foroactivo, y tengo un problema y quisiera saber si me peuden ayudar, yo las hago, y en el mensaje se ve bien: asi queda en los
|=>Tipo de creación: Encabezado para Tablas "Monstruo-normas", "Fantasmanuncio" y "Última Defunción" |=>Colores predominantes: Magenta (#FFCC04) y Hotpink |=>Links de Imágenes:
Pues pregunto por la creación de tablas en posts de foroactivo Me interesa hacer una tabla que tenga: Coche ---- Tiempo---- Neumáticos Ford xx----7:22--------Deportivos blandos Pero todo ello en tabla. Quizás sea una tontería, pero me veo
Respuestas 1 a 0 sobre 0 para "Crear Tablas de Anuncios Cómo en Foroactivo"
A ver también
more_less
Informaciones

0 Respuestas Para el tema :
"Crear Tablas de Anuncios Cómo en Foroactivo"

Este tema a sido visto 972 veces.

Último mensaje escrito :
19/11/2017 a la(s) 20h24 por "YoshiGM"