Quiero añadir un segundo sidebar

Inicio Foros WordPress Themes y Diseño Quiero añadir un segundo sidebar

Etiquetado: 

Este debate contiene 10 respuestas, tiene 2 mensajes y lo actualizó  imported_Albeiro O hace 9 años, 3 meses.

  • Autor
    Publicaciones
  • #13643

    VRtroper
    Participante

    <p>Hola a todos vereis tengo un theme con sidebar a la derecha pero querria añadir otra sidebar al lado derecha de la misma, no he encontrado el modo de hacerlo aqui os dejo una imagen que tengo y los datos del sidebar.php. </p>
    <p>Gracias por adelantado amigos. </p>
    <p>http://s3.subirimagenes.com:81/imagen/previo/thump_2870095screenshot.png<br />
    <br />
    Aqui el archivo sidebar.php
    </p>
    <p>&lt;div class=&quot;sidebar&quot;&gt; </p>
    <ul>
    &lt;?php include(TEMPLATEPATH . ‘/searchform.php’); ?&gt;</p>
    <p> &lt;?php if ( function_exists(‘dynamic_sidebar’) &amp;&amp; dynamic_sidebar() ) : else : ?&gt;</p>
    <p> &lt;?php wp_list_pages(‘depth=3&amp;title_li=&lt;h2&gt;Paginas&lt;/h2&gt;’); ?&gt;</p>
    <li>
    &lt;h2&gt;&lt;?php _e(‘Categories’); ?&gt;&lt;/h2&gt;</p>
    <ul>
    &lt;?php wp_list_cats(‘sort_column=name&amp;optioncount=1&amp;hierarchical=0’); ?&gt;
    </ul>
    </li>
    <li>
    &lt;h2&gt;&lt;?php _e(‘Archives’); ?&gt;&lt;/h2&gt;</p>
    <ul>
    &lt;?php wp_get_archives(‘type=monthly’); ?&gt;
    </ul>
    </li>
    <p> &lt;?php get_links_list(); ?&gt;</p>
    <li>
    <ul>
    &lt;?php wp_register(); ?&gt;<br />
    &lt;?php wp_meta(); ?&gt;
    </ul>
    </li>
    <p> &lt;?php endif; ?&gt;</p>
    </ul>
    <p> &lt;div align=&quot;right&quot;&gt;&lt;/div&gt;</p>
    <p>Si necesitaris saber algo mas decirmelo, muchas gracias.<br />
    &lt;/div&gt;</p>
    <p>Editado: este es el theme http://wordpress.org/extend/themes/azul
    </p>

  • #30461

    imported_Albeiro O
    Participante

    Si lo que quieres es dividir el sidebar en dos, tienes que meterle mano al css

  • #30463

    VRtroper
    Participante

    Quiero otro sidebar igual que el que tengo pero justo al lado derecho para poner mas adelante publicidad.

  • #30464

    imported_Albeiro O
    Participante

    Debes modificar el ancho post y del sidebar actual, para ganar espacio y asi crear la otra columna a la derecha, pero todo esto lo logras con CSS

  • #30465

    VRtroper
    Participante

    Esta mañana habia probado a cambiar las medidas del sidebar desde css pero no se modificaban, me puedes indicar cual son las medidas a modificar? GRAcias

    body {
    background: url(images/bodybg.jpg) #999999;
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
    font-family: ‘Trebuchet MS’, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    color: #666666;
    text-align: justify;
    }

    #container {
    width: 960px;
    margin: 0 auto;
    background: url(images/containerbg.jpg);
    background-repeat: repeat-y;
    }

    #header {
    height: 110px;
    padding: 40px 50px 0 50px;
    background: url(images/headerbg.jpg);
    background-repeat: no-repeat;
    font-size: 10px;
    position: relative;
    }

    #header h1 {
    margin: 0;
    font-size: 20px;
    }

    #header a {
    text-decoration: none;
    color: #666666;
    }

    #header a:hover {
    color: #333333;
    }

    #header #search {
    position: absolute;
    top: 40px;
    right: 50px;
    height: 20px;
    }

    #header #s {
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #666666;
    width: 205px;
    margin: 0;
    font-size: 12px;
    color: #999999;
    padding: 2px;
    }

    #header #searchsubmit {
    height: 20px;
    width: 20px;
    border: none;
    cursor: pointer;
    background: url(images/searchsubmit.gif);
    background-repeat: no-repeat;
    display: none;
    }

    #login {
    text-align: right;
    }

    #navbar {
    margin: 0 0 20px 0;
    background: url(images/navbarbg.jpg);
    background-repeat: no-repeat;
    height: 40px;
    }

    #navbar ul {
    margin: 0 0 0 30px;
    padding: 0;
    border-left: 1px solid #cccccc;
    }

    #navbar li {
    display: inline;
    }

    #navbar a {
    display: block;
    float: left;
    height: 30px;
    padding: 0 30px 0 20px;
    font-size: 12px;
    color: #999999;
    text-decoration: none;
    line-height: 30px;
    background: url(images/navbuttonbg.gif);
    background-position: right 50%;
    }

    #navbar a:hover {
    color: #666666;
    background: url(images/navbuttonbg-hover.gif);
    background-position: right 50%;
    }

    #posts {
    width: 600px;
    padding: 0 0 0 50px;
    margin: 0 0 20px 0;
    float: left;
    }

    .commentbubble a {
    float: left;
    background: url(images/commentbubble.gif);
    background-repeat: no-repeat;
    background-position: 0 -1px;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 10px;
    margin: 0 5px 0 0;
    }

    .commentbubble a:hover {
    float: left;
    background: url(images/commentbubblehover.gif);
    background-repeat: no-repeat;
    background-position: 0 -1px;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 10px;
    margin: 0 5px 0 0;
    }

    .date {
    font-size: 12px;
    color: #999999;
    line-height: 1.5em;
    }

    .post {
    margin: 0 0 50px 0;
    }

    .tags {
    font-size: 10px;
    line-height: 1.5em;
    color: #999999;
    }

    .entry {
    margin: 20px 0 0 0;
    }

    .entry p {
    margin: 0 0 20px 0;
    }

    .post h2 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    }

    .post h3 {
    font-size: 14px;
    font-weight: bold;

    }

    .post a, .navigation a {
    color: #ff0066;
    text-decoration: none;
    }

    .post a:hover, .navigation a:hover {
    color: #333333;
    }

    .post a img {
    border: none;
    }

    .postmetadata {
    font-size: 10px;
    line-height: 1.5em;
    }

    .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
    }

    .alignright {
    float: right;
    margin: 5px 0 20px 20px;
    }

    .aligncenter {
    display: block;
    margin: 0 auto 20px auto;
    }

    .alignnone {
    margin: 0;
    }

    .wp-caption.alignleft {
    float: left;
    margin: 5px 20px 20px 0px;
    }

    .wp-caption.alignright {
    float: right;
    margin: 5px 0 20px 20px;
    }

    .wp-caption.aligncenter {
    display: block;
    margin: 0 auto 20px auto;
    }

    .wp-caption.alignnone {
    margin: 20px 0;
    }

    .post .wp-caption {
    border: 1px solid #cccccc;
    background: #ebebeb;
    text-align: center;
    padding: 10px 5px 0 5px;
    }

    .post .wp-caption-text {
    margin: 0;
    font-size: 12px;
    }

    #commentform #author, #commentform #email, #commentform #url, #commentform #comment {
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #666666;
    }

    .commentlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    .commentlist li {
    background: #ebebeb;
    padding: 20px;
    border: 1px solid #cccccc;
    margin: 0 0 20px 0;
    }

    .avatarcontainer {
    float: left;
    margin: 0 5px 0 0;
    }

    .avatar {
    border: 1px solid #cccccc;
    }

    .sidebar {
    margin-left: 700px;
    width: 210px;
    }

    .sidebar ul {
    list-style-type: none;
    margin: 0 0 30px 0;
    padding: 0;
    }

    .sidebar h2 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: #666666;
    width: 210px;
    border-bottom: 1px solid #cccccc;
    }

    .sidebar a {
    color: #0195c5;
    text-decoration: none;
    }

    .sidebar a:hover {
    color: #333333;
    }

    #footer {
    clear: both;
    height: 150px;
    background: url(images/footerbg.jpg);
    background-repeat: no-repeat;
    }

    #footer p {
    text-align: center;
    font-size: 12px;
    position: relative;
    top: 40px;
    }

    #footer a {
    color: #666666;
    text-decoration: none;
    }

    #footer a:hover {
    color: #333333;
    }

    #wp-calendar {
    width: 210px;
    background: #ebebeb;
    border: 1px solid #cccccc;
    margin: 0 0 30px 0;
    font-size: 12px;
    text-align: center;
    }

    #wp-calendar caption {
    text-align: left;
    }

    #wp-calendar #today {
    background: #cccccc;
    }

    #wp-calendar a {
    display: block;
    width: 100%;
    height: 100%;
    }

    #wp-calendar a:hover {
    background: #cccccc;
    }

  • #30466

    imported_Albeiro O
    Participante

    Recuerda que debaes crear un acopia de seguridad del [b]archivo css[/b] para puedas modificar lo que quieras y en caso tal de que no salgan las cosas bien lo restablescas
    debes tener cuidado ya que sino conoces de CSS estos cambios pueden afectar el aspecto de toda la plantilla o no verse igual en los diferentes navegadores
    debes midificar los anchos en :
    #posts
    .sidebar
    .sidebar h2
    #wp-calendar
    Si no conoces de CSS seria mejor que buscaras un plugin que te ayude con lo que quieres con el asunto de la publicidad

  • #30467

    VRtroper
    Participante

    He cambiado el del post exactamente y si me lo ha modificado, ahora voy a probar aver si puedo con el sidebar 😀 despues te cuento aver como me a ido. Muchas gracias de verdad 🙂

  • #30468

    VRtroper
    Participante

    Una cosa Albeiro el sidebar y sidebar h2 puedo modificar lo que son las medidas pero a la hora de añadir el sidebar tengo que copiar de nuevo otro sidebar?

    .sidebar {
    margin-left: 700px;
    width: 210px;
    }

    Mas o menos tengo una idea de como se hace he probado ya mil cosas ^^

  • #30469

    imported_Albeiro O
    Participante

    Con gusto amigo
    Si para navegar usas firefox y tienes instalado el complemento firebug te hara la tarea mas sencilla
    Ojala todo te salga bien

  • #30470

    VRtroper
    Participante

    Como lo añado el sidebar? ^^ he cambiado las medidas y tengo espacio para otro sidebar pero donde tengo ke añadirlo ?

  • #30477

    imported_Albeiro O
    Participante

    No debes crear otro sidebar lo que debes hacer es crear otra columna o caja dentro del sidebar que ya tienes por medio de "html" y despues darle estilo con css para que se ubique al lado derecho

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest