[!TUT] Nuevo estilo del footer.

[!TUT] Nuevo estilo del footer

Muchas veces hemos querido innovar nuestro foro SMF y no hemos sabido como , hoy les traigo un simple manual de un footer flotable con la tecnología de web 2.0 , CSS3 que dará un aspecto mas profesional a nuestro foro y así se vea algo mucho mejor de lo acostumbrado.

Caracteristicas:

o Nuevo diseño del footer (flotable).
o Incorporación del CSS3.
o Fácil edición y textos del footer (tiene altura y ancho exacto, mucho texto lo desconfigura)


Edición de códigos.


index.template.php:

Buscas por:

Code: [Select]

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer_section"><div class="frame">
<ul class="reset">
<li class="copyright">', theme_copyright(), '</li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a></li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', '
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li>
</ul>';
Sustituyes por:

Code: [Select]

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere! - New Style Footer by JTX3.
echo '<div id="footer"><b><a href="', $scripturl, '">'.$context['forum_name'].' &copy;</a> |
', theme_copyright(), '&nbsp;&nbsp;|&nbsp;&nbsp;               
 <a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a>&nbsp;|&nbsp;               
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a></b></div>';
css/index.css:

Agregas al final del archivo:

Code: [Select]

#footer {
z-index: 1;
position: fixed;
float: left;
padding: 10px;
width: 980px;
background-image: url(../images/theme/footer.png);
height: auto;
padding-bottom: 0;
bottom: 0;
font-size:11px; 
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;
-moz-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
-ms-border-radius: 7px 7px 0 0;
-o-border-radius: 7px 7px 0 0;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
border-top: 1px solid #CCC;
z-index: 0;
}
 
#footer a:link, #footer a:visited {
font-size:11px; 
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 10 0;
}

#footer a:hover {
font-size:11px;
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 10 0;
}
Finalmente guardamos el footer.png en default/images/theme y tendremos el siguiente resultado:



Próximamente empaquetaré la modificación y estará todo listo, prontamente les dejo la edición manual .

Saludos, JTX3.

Gracias por el tuto servira muchisimo

Muye buen tuto JTX3 como siempre +1

Excelente !

Ya lo había visto el footer en algún lado.
Lo que no me gusta es que flote xD
Pero eso ya sería cosa del estilo que cada quién le de.

Excelente !

Ya lo había visto el footer en algún lado.
Lo que no me gusta es que flote xD
Pero eso ya sería cosa del estilo que cada quién le de.

Tal vez en algunos de mis foros, lo realizo un amigo hace tiempo atrás .

Muy bueno, faltaria un demo nomas. jeje
Saludos

Muy bueno, faltaria un demo nomas. jeje
Saludos

La imagen es mas que evidente ¿no? .

Es que en la imagen no se ve el efecto de fixed que tiene y esa es la gracia del mod creo yo.
Salutes

Buen aporte espero el
enpaquetado

Buen aporte espero el
enpaquetado

xD yo le mande MP me dijo que ya lo tenia solo revisaría unos códigos.

New Footer Style

Descripción MOD:

Está modificación hace posible dar un nuevo estilo al footer y tener un novedoso diseño que lucir, con toda la técnologica del CSS3 se logra lo que se vee

Caracteristicas:

o Nuevo diseño del footer (flotable).
o Incorporación del CSS3.
o Fácil edición y textos del footer (tiene altura y ancho exacto, mucho texto lo desconfigura)

Versiones soportadas de SMF:

o Soporta todas las versiones de SMF 2.0 (incluyendo la versión estable)

Versión empaquetada.

Saludos, JTX3.

Muy lindo te quedo eh! Felicidades por el primer mod! Solo una cosa, lo instale en un foro en localhost y abajo de todo me deforma el foro y aparte la barra no sale con el mismo espacio de un lado que del otro. Deberias crear un tema aparte para que los que tengamos esos problemas podamos solucionarlos en ese.

@Lean podrías dejar una imagen de como te sale para tratar el error ?

Saludos.

Por eso te digo que hagas un tema nuevo, asi los reportamos ahi. Sera mejor para que lo vayas fixeando