Show Posts
1
Tutoriales y Tips SMF / Imágenes por categoría 2 métodos diferentes
« on: October 31, 2011 - 10:41 22:41 »
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:
Reemplazamos eso, por esto:
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:
Reemplazamos por:
Ahora vamos a /Themes/ThemeQueUsas/css/index.css <---- abrimos el archivo, y al final añadimos esto:
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:
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:
Reemplazamos por:
Y el código de la categoría 1 en el css, lo cambiaríamos por algo como esto:
Eso sería toda la explicación más o menos, gracias por su atención.
Saludos.
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.
