Tutorial: Editando Footer, más bonito...

imported_NkC · 1 Oct 2010

Este es un tuto que surgio por la consulta de Lucas Guerrero, para modificar el footer. La modificación me parecio interesante asi que decidí hacer este mini tutorial, que involucrá solo mover algunas partes del footer y crear algunas etiquetas HTML, espero que les guste.

Imagen de como queda el resultado final:
Ver el archivo adjunto 4303

Entonces, primero ir: Estilos y plantillas > administrar estilos > "el estilo" > Plantillas comunes > Footer

Busca:

PHP:

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select">

            
        <vb:if condition="$show['quickchooser']">
            <select name="styleid" onchange="switch_id(this, 'style')">
                <optgroup label="{vb:rawphrase quick_style_chooser}">
                    {vb:raw quickchooserbits}
                </optgroup>
            </select>    
        </vb:if>
        
        <vb:if condition="$show['languagechooser']">
            <select name="langid" onchange="switch_id(this, 'lang')">
                <optgroup label="{vb:rawphrase quick_language_chooser}">
                    {vb:raw languagechooserbits}
                </optgroup>
            </select>
        </vb:if>
    </form>

Y lo mueves para dejarlo antes del siguiente div:

PHP:

<div id="footer" class="floatcontainer footer">

Entonces para mover los selectores sobre el cuadrado, como la imagen.

Ahora busca:

PHP:

<ul id="footer_links" class="footer_links">

Y antes de eso pega lo siguiente:

PHP:

<table width="100%" heigh="100%">
<tr>
<td><img src="ruta de tu logo" align="left"></td>
<td align="right">

Antes de esto: ....

PHP:

<vb:if condition="$show['dst_correction']">

Cerrar la tabla:

PHP:

</td></tr></table>

Ahora Busca:

PHP:

    <!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice -->

Cortalo, elimina las etiquetas div que lo envuelven (<div id="footer_copyright" class="shade footer_copyright"></div>).

Ahora pegalo despues de:

PHP:

</ul>

Busca:

PHP:

    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw vboptions.copyrighttext}

Cortalo y elimina las div que lo envuelven al igual que el anterior.

Y lo pegas despues del copyright movido anteriormente:

PHP:

<!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice -->

Ahora finalmente debemos achicar la letra del copyright para que no se confunda con los links, para esto envolveremos los 2 codigos agregados despues de </ul> y envolverlos con la siguiente etiqueta div:

PHP:

<p style="font-size:x-small;"></p>

Quedando así:

PHP:

<p style="font-size:x-small;">
<!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice -->
<!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw vboptions.copyrighttext}
</p>

Para los bordes redondeados nos dirigeremos, ahora, a editar el CSS:

Editar Plantillas > CSS Plantillas > vbulletin-chrome.css

Buscar: .footer {

Y agregar:

PHP:

    -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

Para solucionar el siguiente error: http://i51.tinypic.com/2djyoaf.jpg

Vamos a agregar una nueva variable a nuestro CSS: Abrir vbulletin-chrome.css y buscamos .footer justo sobre ella vamos a agregar:

PHP:

.footer2 {
	clear:both;
	text-align:{vb:stylevar right};
	display:block;
	width: 100%;
}

Ahora nos dirigimos a Plantillas comunes > Footer ; nuevamente y nos situamos en:

PHP:

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select">

Justo sobre eso agregamos la siguiente div:

PHP:

<div id="footer2" class="floatcontainer footer2">

Y para cerrar esta agregamos despues de:

PHP:

</vb:if>
	</form>

La etiqueta </div>; quedando de esta manera:

PHP:

</vb:if>
	</form></div>

Eso es todo para solucionar el problema

Lista ya deberia estar funcionando a la perfección la modificación. (H)

imported_Ryuk · 2 Oct 2010

Gracias NkC una interesante modificacion, gracias por tu colaboracion.

descaro · 3 Oct 2010

bonito cambio NkC

2 cosas:

** hay forma de dar margen entre el copyright y el borde, queda muy al extremo

** con el bloque de foros activado el selector de estilo e idioma se me desplaza hacia la derecha, hay corrección ¿?

gracias.

Lucas Guerrero · 3 Oct 2010

Muchas Gracias por la ayuda, me sirvió muchisimo.

imported_NkC · 3 Oct 2010

Descaro:

Para la primera solo agrega un espacio después del ultimo copyright: <br>, con eso debería funcionar.
La segunda... no entendí

descaro · 3 Oct 2010

la primera la solucioné cambiando

<table width="100%" heigh="100%">
<tr>
<td><img src="ruta de tu logo" align="left"></td>
<td align="right"> por center

ya que me refería ampliar el espacio con el margen derecho, no intercalar espacio entre lineas

el segundo te lo muestro en la captura siguiente:

imported_NkC · 10 Oct 2010

Intentare reproducir el error, te aviso

ZEL · 30 Oct 2010

NkC dijo:
Intentare reproducir el error, te aviso

Nkc reproducistes el error para saber gracias

imported_NkC · 30 Oct 2010

A verdad se me había olvidado xD! hoy día veré si me hago un espacio para hacerlo

ZEL · 30 Oct 2010

NkC dijo:
A verdad se me había olvidado xD! hoy día veré si me hago un espacio para hacerlo

Ok dale papa voy a estar suiguiendo el tema saludos yo lo voy hacer cualquier duda vengo corriendo a preguntate jajajaj saludos

Nkc una pregunta no te entiendo como explicas

busco esto en el fotter

<div id="footer" class="floatcontainer footer">

y luego que ubico esto

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select">

<vb:if condition="$show['quickchooser']">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="{vb:rawphrase quick_style_chooser}">
{vb:raw quickchooserbits}
</optgroup>
</select>
</vb:if>

<vb:if condition="$show['languagechooser']">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="{vb:rawphrase quick_language_chooser}">
{vb:raw languagechooserbits}
</optgroup>
</select>
</vb:if>
</form>

que hago con este lo coloco arriba de este <div id="footer" class="floatcontainer footer"> ok papa no entiendo

otra pregunta que tabla tengo que cerra

No olvidar cerrar la tabla:
Código PHP:
</td></tr></table>

imported_NkC · 30 Oct 2010

Ya modifique la guia de como solucionar dicho error ^^.

También modifique el orden de los pasos, porque como decias ZEL no estaban ordenados y no se entendía mucho; intenta leerla ahora, a ver si entiendes.

Pedro Abelino · 30 Oct 2010

Interesante modificación. Queda lindo después de todo. Un retoque al borde y anda bárbaro

.

Gracias NkC.

Saludos.

imported_NkC · 30 Oct 2010

Para solucionar el problema del borde agregar un porcentaje a la tabla y centrarla, con eso queda perfecto

jzmanguy · 31 Oct 2010

Muchas gracias NKC,yo le habia quitado lo de la hora por que me daba el error . Y lo de los estylos lo habia puesto abajo del footer y tambien me gustaba pero ahora lo he cambiado.
Y aqui os dejo una foto de como me quedo el footer ...

Ver el archivo adjunto 4430

probet · 31 Oct 2010

Por alguna extraña razón me hace todo menos redondear el footer.

He editado la plantilla vbulletin-chrome.css con lo que ponéis. ¿Hay que hacer algo más?¿Dónde hay que colocarlo exactamente? Es más que nada por si lo tengo mal puesto.

ZEL · 31 Oct 2010

NKC como elimino lo de elejir el idioma que sebe muy feo arriba solo :s quiero borralo o meterlo en el cuadro como el de aqui de vbhispano saludos

imported_NkC · 31 Oct 2010

Para eliminarlo, dejalo como comentario este codigo:

PHP:

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select"> 

             
        <vb:if condition="$show['quickchooser']"> 
            <select name="styleid" onchange="switch_id(this, 'style')"> 
                <optgroup label="{vb:rawphrase quick_style_chooser}"> 
                    {vb:raw quickchooserbits} 
                </optgroup> 
            </select>     
        </vb:if> 
         
        <vb:if condition="$show['languagechooser']"> 
            <select name="langid" onchange="switch_id(this, 'lang')"> 
                <optgroup label="{vb:rawphrase quick_language_chooser}"> 
                    {vb:raw languagechooserbits} 
                </optgroup> 
            </select> 
        </vb:if> 
    </form>

Deberia quedarte así:

PHP:

<!--  <form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select"> 

             
        <vb:if condition="$show['quickchooser']"> 
            <select name="styleid" onchange="switch_id(this, 'style')"> 
                <optgroup label="{vb:rawphrase quick_style_chooser}"> 
                    {vb:raw quickchooserbits} 
                </optgroup> 
            </select>     
        </vb:if> 
         
        <vb:if condition="$show['languagechooser']"> 
            <select name="langid" onchange="switch_id(this, 'lang')"> 
                <optgroup label="{vb:rawphrase quick_language_chooser}"> 
                    {vb:raw languagechooserbits} 
                </optgroup> 
            </select> 
        </vb:if> 
    </form> -->

O si prefieres lo eliminas directamente (siempre es recomendable usar el "comment" para conservar el codigo en caso de querer revertirlo).

PD. Para los que no saben, en el codigo web se pueden usar comentarios, lo más probable es que ya lo hayan visto, en HTML es distinto a CSS. Para el HTML usamos: 

En cambio para el CSS: /* EL CODIGO */

probet · 1 Nov 2010

probet dijo:
Por alguna extraña razón me hace todo menos redondear el footer.

He editado la plantilla vbulletin-chrome.css con lo que ponéis. ¿Hay que hacer algo más?¿Dónde hay que colocarlo exactamente? Es más que nada por si lo tengo mal puesto.

Me autocito por si alguien me puede ayudar

imported_NkC · 1 Nov 2010

En CSS algunos navegadores no toman los bordes redondos mediante CSS, que navegador usas?

probet · 1 Nov 2010

NkC dijo:
En CSS algunos navegadores no toman los bordes redondos mediante CSS, que navegador usas?

Era cosa del explorer NkC

¡Gracias!