MyBB-Es.com - Soporte para los Foros MyBB en Español
Distintos estilos para cada categoria - Versión para impresión

+- MyBB-Es.com - Soporte para los Foros MyBB en Español (http://www.mybb-es.com)
+-- Foro: Recursos para MyBB (/foro-recursos-para-mybb)
+--- Foro: Guias y tutoriales (/foro-guias-y-tutoriales)
+--- Tema: Distintos estilos para cada categoria (/hilo-distintos-estilos-para-cada-categoria)

Páginas: 1 2


Distintos estilos para cada categoria - Cluster - 14-05-2012 10:28 PM

Hay muchos usos del CSS combinado con el sistema de variables de MyBB, a continuación les dejare una guia básica de como usar dicho sistema de variables, para conseguir un estilo distinto para cada categoría de tu foro Smiley-wink

1- Lo primero: Tienes que ir a Panel de administración > Estilos y Plantillas > "Tu theme" > Caja del foro > forumbit_depth1_cat

2- Hay que buscar:
Código PHP:
<td class="thead" colspan="5"

y hay que dejarlo así (si el colspan varía, respeta el numero que tiene indicado)
Código PHP:
<td class="thead_{$forum['fid']}colspan="5"

3- Ahora aquí va el truco y la explicación (para que entiendan lo que hace): Cada class="" llama a un atributo desde la hoja de estilo (global, showthread y etc .css) como es en este caso thead, la variable {$forum['fid']} es remplazada por el "FID" de cada foro/categoría... lo que quedaría ya reproducido como: thead_1, thead_2 y etc.

Pero, donde se consigue dicho FID?.

S tu vas a tu panel de admin y clickeas una categoría para editarla, en tu barra de direcciones encontraras esto


Bien si todo entendido hasta aqui, seguimos con el final del tutorial.

4- Teniendo en cuenta el FID de la categoría, hay que agregar a tu global.css si el FID es el 1 por ejemplo. (OJO: este solo es un ejemplo, para editar el color y etc ya te corresponde a ti, el ejemplo es del estilo default de MyBB)

Código PHP:
.thead_1 {
    
background#026CB1 url(images/thead_bg.gif) top left repeat-x;
    
color#ffffff;
}

.
thead_1 a:link {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:visited {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:hover, .thead_1 a:active {
    
color#ffffff;
    
text-decorationunderline;


en caso de que el FID sea 25 por así decirlo, tendrías que agregar thead_25 y así hasta abarcar cada categoría.

Smiley-wink por ultimo aquí dejo el resultado.


Un saludo y espero sea entendible para todos Smiley

<!-- si compartes deja creditos a mi y a MyBB-Es.com -->


RE: Distintos estilos para cada categoria - Kevinex - 14-05-2012 10:43 PM

uyyyyyy muy bueno!! Capas lo use en algún momento! Buen tuto Clus


RE: Distintos estilos para cada categoria - Jesam - 15-05-2012 08:37 AM

Muy bueno! me servirá mucho... Smiley-grin muchas gracias Cluster! +REP


RE: Distintos estilos para cada categoria - Xpress - 15-05-2012 09:05 AM

Que bueno que son los FID, se podrían inventar mas cosas.


RE: Distintos estilos para cada categoria - ZioGuE - 15-05-2012 09:29 AM

LOL soy un ***** a mi se me estaba ocurriendo hacerlo con xthreads y existiendo esta forma tan sencilla. Muchas gracias cluster.


RE: Distintos estilos para cada categoria - MaTiiass - 15-05-2012 07:13 PM

(14-05-2012 10:28 PM)Cluster escribió:  3- Ahora aquí va el truco y la explicación (para que entiendan lo que hace): Cada class="" llama a un atributo desde la hoja de estilo (global, showthread y etc .css) como es en este caso thead, la variable {$forum['fid']} es remplazada por el "FID" de cada foro/categoría... lo que quedaría ya reproducido como: thead_1, thead_2 y etc.

Pero, donde se consigue dicho FID?.

S tu vas a tu panel de admin y clickeas una categoría para editarla, en tu barra de direcciones encontraras esto


Bien si todo entendido hasta aqui, seguimos con el final del tutorial.

4- Teniendo en cuenta el FID de la categoría, hay que agregar a tu global.css si el FID es el 1 por ejemplo. (OJO: este solo es un ejemplo, para editar el color y etc ya te corresponde a ti, el ejemplo es del estilo default de MyBB)

Código PHP:
.thead_1 {
    
background#026CB1 url(images/thead_bg.gif) top left repeat-x;
    
color#ffffff;
}

.
thead_1 a:link {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:visited {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:hover, .thead_1 a:active {
    
color#ffffff;
    
text-decorationunderline;


en caso de que el FID sea 25 por así decirlo, tendrías que agregar thead_25 y así hasta abarcar cada categoría.

Smiley-wink por ultimo aquí dejo el resultado.


Un saludo y espero sea entendible para todos Smiley

<!-- si compartes deja creditos a mi y a MyBB-Es.com -->

disculpa yo no entendi esto...
1º hay que agregar
Código PHP:
.thead_1 {
    
background#026CB1 url(images/thead_bg.gif) top left repeat-x;
    
color#ffffff;
}

.
thead_1 a:link {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:visited {
    
color#ffffff;
    
text-decorationnone;
}

.
thead_1 a:hover, .thead_1 a:active {
    
color#ffffff;
    
text-decorationunderline;

esto 1 abajo del otro o como lo hay que hacer...
2º deje el pao 3 en la cita por si mi problema esta ahi


RE: Distintos estilos para cada categoria - Cluster - 15-05-2012 07:17 PM

el prefijo numerico sera del FID de tu categoria.... si tus categorias son por ejemplo: 10,51,84,30 tendras que agregar 3 nuevos class a tu hoja de estilos por cada FID

.thead_10
.thead_51
.thead_84
.thead_30



RE: Distintos estilos para cada categoria - MaTiiass - 15-05-2012 07:48 PM

(15-05-2012 07:17 PM)Cluster escribió:  el prefijo numerico sera del FID de tu categoria.... si tus categorias son por ejemplo: 10,51,84,30 tendras que agregar 3 nuevos class a tu hoja de estilos por cada FID

.thead_10
.thead_51
.thead_84
.thead_30
Listo Gracias

ahora por otra parte que debo editar para darle color porque edito y solo el texto cambia de color :_


RE: Distintos estilos para cada categoria - Cluster - 15-05-2012 08:13 PM

Código PHP:
background#026CB1 url(images/thead_bg.gif) top left repeat-x; 



RE: Distintos estilos para cada categoria - MaTiiass - 15-05-2012 08:20 PM

(15-05-2012 08:13 PM)Cluster escribió:  
Código PHP:
background#026CB1 url(images/thead_bg.gif) top left repeat-x; 

ami eso no me aparece :_

mira aqui te dejo lo que esta en mi theme (ace navy)

Código PHP:
.thead_1 {
    
text-shadow0.1em 0.1em 0.2em black;
    
background##FFFFFF;
    
background: -moz-linear-gradient(top#0372A9 0%, #02608F 44%, #00496D 100%);
    
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%,#0372A9), color-stop(44%,#028F0B), color-stop(100%,#6d0019));
    
background: -webkit-linear-gradient(top#0372A9 0%,#02608F 44%,#00496D 100%);
    
background: -o-linear-gradient(top#0372A9 0%,#02608F 44%,#00496D 100%);
    
background: -ms-linear-gradient(top#0372A9 0%,#02608F 44%,#00496D 100%);
    
backgroundlinear-gradient(top#0372A9 0%,#02608F 44%,#00496D 100%);
    
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#03A903'endColorstr='#006D0D',GradientType=); 
    
border-bottom1px solid #1d2b34;
    
color#FFFFFF;
    
font-weightbold;
    
padding8px;
    
text-shadow0.1em 0.1em #333333;
    
-moz-border-radius-topleft5px;
    -
moz-border-radius-topright5px;
    -
webkit-border-top-left-radius5px;
    -
webkit-border-top-right-radius5px;
    
border-top-left-radius5px;
    
border-top-right-radius5px