tag:blogger.com,1999:blog-47506850799894940892012-02-10T05:19:26.656+01:00¿A que no parece una "son of moto"?Eulaliahttp://www.blogger.com/profile/04778983357647094765noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-4750685079989494089.post-85541036861360325282008-05-12T17:57:00.000+02:002008-05-12T19:05:21.020+02:00<div align="justify">Como veis, también a esta le he colocado 3 columnas.</div><div align="justify">El sistema es el mismo que en la mayoría. Te lo dejo por si quieres hacerlo.</div><div align="justify">(En <strong><span style="color:#990000;">rojo</span></strong> lo que hay, en <strong><span style="color:#000099;">azul</span></strong> lo que añades o cambias).</div><br /><div align="justify">En el CSS, (la primera parte del código de la plantilla).</div><br /><div align="justify">1º.-Cambiar las medidas así:</div><br /><strong><span style="color:#990000;">#outer-wrapper { width:</span> <span style="color:#000099;">1000</span><span style="color:#990000;">px;</span></strong><br /><strong><span style="color:#990000;">#main { width:</span> <span style="color:#000099;">480</span><span style="color:#990000;">px;</span></strong><br /><strong><span style="color:#990000;">#sidebar { width:</span> <span style="color:#000099;">230</span><span style="color:#990000;">px;</span></strong><br /><br /><div align="justify">2º.-Copiar y pegar el código que empieza por <span style="color:#990000;"><strong>#sidebar {</strong></span> desde aquí hasta la llave <span style="color:#990000;"><strong>}</strong></span> de cierre, cambiar el <span style="color:#990000;"><strong>float</strong></span>, de <span style="color:#990000;"><strong>$endSide</strong></span> a <span style="color:#000099;"><strong>$startSide</strong></span> y añadir <span style="color:#000099;"><strong>new</strong></span> delante de la palabra <span style="color:#990000;"><strong>sidebar</strong></span> para convertirla en <span style="color:#000099;"><strong>newsidebar</strong></span>.</div><br /><div align="justify">(<strong>Nota:</strong> asegúrate de que tu plantilla utiliza estos términos. Si en lugar de <span style="color:#990000;">$endSide</span>, vieras <span style="color:#990000;">right</span>, has de poner <span style="color:#000099;">left</span>).</div><br />3º.-Añadir estas líneas para centrar las columnas:<br /><br />en <strong><span style="color:#990000;">#main {</span> <span style="color:#000099;">margin-$startSide: 11px;</span></strong><br />en <strong><span style="color:#990000;">#sidebar {</span> <span style="color:#000099;">margin-$startSide: 8px;</span></strong><br /><span style="color:#000099;"></span><br /><div align="justify"><strong>Nota:</strong> si vas a enmarcar todo el blog, como he hecho yo, tendrás que rebajar un poco el ancho del main y la separación, dependiendo del grosor del marco, o la columna de la derecha quedará pegada al borde. (Por cierto, por alguna extraña razón con explorer el borde exterior no lo veo entero. Con Firefox si y como no le veo solución así se queda.)</div><br /><div align="justify">4º.-En el sector del HTML (donde todo está entre símbolos de esos <strong><></strong>)</div><br />Copiar el trozo del código de la sidebar, desde<br /><span style="color:#990000;"><strong><code>&lt;div id='sidebar-wrapper'&gt;</code></strong></span><br />hasta<br /><span style="color:#990000;"><strong><code>&lt;/b:section&gt;&lt;/div&gt;</code></strong></span><br />y pegarlo encima de esta línea:<br /><strong><span style="color:#990000;"><code>&lt;div id='main-wrapper'&gt;</code></span></strong><br />borrar todos los <span style="color:#990000;"><strong><code>&lt;b:widget</strong></span> que veas en lo que has pegado,<br />(todos terminan con <strong>/></strong> ), menos el que pone <span style="color:#990000;"><strong>id='Profile1'</strong></span><br />y borrar éste del código de la sidebar antigua.<br /><br /><div align="justify">(Esto lo hacemos por dos motivos: 1º.- Cuando hagas vista previa, al menos vemos el perfil en la nueva sidebar, 2º.- se borra de donde estaba para que no de error ya que las id no se pueden repetir).</div><br /><div align="justify">Añade <span style="color:#000099;"><strong>new</strong></span>, delante de <span style="color:#990000;"><strong>sidebar</strong></span> en el código pegado, delante de esas zonas:</div><div align="justify"><span style="color:#990000;"><strong>id='sidebar-wrapper'</strong></span> y <span style="color:#990000;"><strong>id='sidebar'</strong></span> para que se connviertan en <span style="color:#000099;"><strong>id='newsidebar-wrapper'</strong></span> y <span style="color:#000099;"><strong>id='newsidebar'</strong></span></div><div align="justify">(Con esto le damos a la nueva columna lateral su identidad.)</div><br /><div align="justify">Hecho esto ya puedes hacer vista previa y si todo va bien y te gusta lo que ves, guardar.</div><br /></code><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4750685079989494089-8554103686136032528?l=laeulalia-moto3.blogspot.com' alt='' /></div>Eulaliahttp://www.blogger.com/profile/04778983357647094765noreply@blogger.com1