Imágenes por categoría 2 métodos diferentes

Pensando bien en este tutorial http://www.smfsimple.com/index.php/topic,3709.0.html Me parece algo más largo, mientras que se puede hacer algo más corto y sin tanto rodeo, llegando al mismo resultado.
Aquí les explicaré otros 2 métodos.

El principal paso para que funcionen nuestro 2 métodos, es ir a /Themes/ThemeQueUsas/images/ ---> Creamos una nueva carpeta llamada "cat", de tal forma que la nueva ruta sería:
----> /Themes/ThemeQueUsas/images/cat/ -----> Dentro de la carpeta "cat" nosotros añadiremos nuestras imágenes según la categoría, por ejemplo si a la categoría 1 le pondré imágen entonces subiré mi imagen llamada "1.png" Una ves que tengas tus imágenes, procederás a realizar cualquier método de los siguientes.


1° Método - HTML <--- Me parece que el método del tutorial, se modificó por este, para utilizarlo en el mod de las categorías, ahí si me aclaran porfavor, estoy casi seguro que si.

Sin duda algo muy básico, aunque el segundo también lo será.
En este paso haremos lo siguiente, buscamos en /Themes/default/BoardIndex.template.php:

Code: [Select]

<div class="cat_bar">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a class="unreadlink" href="', $scripturl, '?action=unread;c=', $category['id'], '">', $txt['view_unread_category'], '</a>';

echo '
', $category['link'], '
</h3>
</div>
Reemplazamos eso, por esto:

Code: [Select]

<img src="', $settings['images_url'], '/cat/', $category['id'], '.png" alt="Nombre de la categoría" />
Reemplazaremos de ahí, obviamente la parte que dice "Nombre de la categoría", dejando las comillas, claro está.
Como ven es un método muy sencillo.


2° Método - CSS

Este método es un poco más manual, pero con la diferencia de poder dar de 1, toda la personalización que quieras mediante css.

Lo primero, tal como arriba. Buscamos en /Themes/default/BoardIndex.template.php:

Code: [Select]

<div class="cat_bar">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a class="unreadlink" href="', $scripturl, '?action=unread;c=', $category['id'], '">', $txt['view_unread_category'], '</a>';

echo '
', $category['link'], '
</h3>
</div>
Reemplazamos por:

Code: [Select]

<div id="category', $category['id'], '"></div>
Ahora vamos a /Themes/ThemeQueUsas/css/index.css <---- abrimos el archivo, y al final añadimos esto:

Code: [Select]

#category1 {
background: url(../images/cat/1.png) no-repeat;
width: 350px;
height: 80px;
}
En Width y height, modificaríamos los valores de px por los de nuestras imágenes.
Ahora, como pueden ver, en este método, ustedes tendrán que agregar manualmente sus clases al css.
Por ejemplo si tienen una segunda categoría, añadiríamos esto luego del anterior código:

Code: [Select]

#category2 {
background: url(../images/cat/2.png) no-repeat;
width: 350px;
height: 80px;
}
Y como dije arriba, solo es modificar los valores y demás.
La desventaje del css esque es manual, pero qué ventajas tiene?
Puedes agregar toda la personalización que quieras.
Incluso con css, en lugar de poner imágenes, podemos usar textos.
Para esto, abrimos nuestro boardindex.template.php de nuevo, buscamos:

Code: [Select]

<div id="category', $category['id'], '"></div>
Reemplazamos por:

Code: [Select]

<div id="category', $category['id'], '">', $category['link']</div>
Y el código de la categoría 1 en el css, lo cambiaríamos por algo como esto:

Code: [Select]

#category1 {
font-size: 20px;
padding: 7px;
-moz-box-shadow:0px 0px 6px #000000;
-webkit-box-shadow:0px 0px 6px #000000;
box-shadow:0px 0px 6px #000000;
background-image: -moz-linear-gradient(top, #204691, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#204691), to(#000000));
background-image: -o-linear-gradient(top, #204691, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#204691', endColorstr='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#204691', endColorstr='#000000')";
background-image: linear-gradient(top, #204691, #000000);
}

Eso sería toda la explicación más o menos, gracias por su atención.
Saludos.

 

Exelente aporte me gusto eso del CSS se podra usar css3
tambien usando esta web http://www.css3.me/

Exelente aporte me gusto eso del CSS se podra usar css3
tambien usando esta web http://www.css3.me/

Claro, yo utilizo esa, y otra que me pasaron por ahí en el msn.

Excelente aporte [starter] +1 y gracias por compartir !

Pero es el mismo codigo del mod que hice para las categorias. Mira la descripcion y el parse http://custom.simplemachines.org/mods/index.php?mod=3174

mmm, delete?

Pero es el mismo codigo del mod que hice para las categorias. Mira la descripcion y el parse http://custom.simplemachines.org/mods/index.php?mod=3174

Si quieres quito el primero y dejo el segundo

Si, el segundo ejemplo esta bueno, ese si dejalo.
Saludos

Buen tuto. deberian agregar El Mod de Bookmarks al foro porque estos tutos son importantes asi podemos regresar en cualquier momento a verlos mediante los favoritos porque de alli nos olvidamos y se nos hace dificil encontrarlos.
Gracias...es un opinion...