Ayuda con Modificacion de sidebar.

Inicio Foros WordPress Themes y Diseño Ayuda con Modificacion de sidebar.

Etiquetado: 

Este debate contiene 7 respuestas, tiene 2 mensajes y lo actualizó  imported_josec hace 9 años, 1 mes.

  • Autor
    Publicaciones
  • #14589

    rubio25
    Participante

    <p>Hola amigos, tengo el siguiente problema, mi tema dispone de dos sidebars una al lado de la otra, instale un plugin para mostrar banners de 125×125, pero estos se muestran verticalmente debido a las propiedades del ancho de la barra lateral, me gustaria modificar el anoche del sidebar para mostrar los banners en dos columnas, osea aumentar el ancho de la seccion donde irian los banners, para esto agregue otra barra lateral al tema, para asi en la primera barra lateral solo tener el widget de los banners 125×125 y modificar el ancho de esta sidebar y las otras dos que queden con su ancho original debajo de los banners, necesito es un poco d ayuda modificando el ancho de la sidebar y moviendo las otras hacia abajo para que no se sobrepongan a los banners, no se si me explico bien, por eso les dejo unas imagenes para que vean lo que quiero lograr:</p>
    <p>Asi luce mi blog:<br />
    vistablog2.th.jpg</p>
    <p>Y asi quiero que quede despues de la modificacion:<br />
    vistablog.th.jpg
    </p>

  • #33006

    imported_josec
    Participante

    Quizas este ejemplo te puede ayudar. pero para que funcione tienes que editar el sidebar de tu theme en tu wordpress.

    Esta es la estructura XHTML

    Esta es la estructura CSS

    Aqui puede ver con mas claridad el ejemplo [url=http://test.neopunkweb.com/sidebar2/]http://test.neopunkweb.com/sidebar2/[/url]

  • #33020

    rubio25
    Participante

    Gracias, yo estuve modificando la hoja de estilos, logre alterar el ancho del sidebar al que yo queria pero este se sobreponia al otro sidebar, lo que no logre fue desplazar las otras sidebars hacia abajo, necesito ayuda es en la modificacion del codigo ya que no se que modificar. Adjunto el codigo de la hoja de estilos por si alguien sabe que debo modificar. Gracias!

    /* The Sidebar1 */
    .sidebar1{
    float:left;
    width:160px;

    font-size:12px;
    font-family:Tahoma,Georgia,Century gothic, Arial, sans-serif;

    }

    .sidebar1 h2 {
    line-height:30px;
    font-size:14px;
    color:#fff;
    margin:5px 0 0px 0 ;
    padding:0px 0 0 5px;
    background:#D13F01;
    font-weight:bold;
    font-family:Georgia,Century gothic, Arial, sans-serif;
    text-transform:uppercase;
    border:1px solid #FF7800;
    }
    .sidebar1 ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;

    }

    .sidebar1 ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 10px 0px;
    background-repeat:no-repeat;

    }

    .sidebar1 ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:0;

    }

    .sidebar1 ul ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:0;

    }

    .sidebar1 ul li {
    height:100%;
    line-height:18px;
    float: left;
    clear: left;
    width: 160px;
    }

    .sidebar1 ul li a:link, .sidebar1 ul li a:visited {
    background:#42484D;
    color:#aaa;
    text-decoration: none;
    padding: 5px 0px 5px 5px;
    display:block;
    border-bottom:1px solid #4D575F;
    border-top:1px solid #333A3F;
    }

    .sidebar1 ul li a:hover {
    background:#333A3F;
    color: #eee;
    border-right:5px solid #D13F01;
    }

    .sidebar1 p {
    padding: 7px 10px;
    margin:0;

    }

    .sidebar1 table {
    width:100%;
    text-align:center;

    color:#787d7f;
    }

    /* The Sidebar2 */
    .sidebar2{
    float:right;
    width:160px;

    padding-right:10px;
    font-size:12px;
    font-family:Tahoma,Century gothic, Arial, sans-serif;
    }

    .sidebar2 h2 {
    line-height:30px;
    font-size:14px;
    color:#fff;
    margin:5px 0 0px 0 ;
    padding:0px 0 0 5px;
    background:#D13F01;
    font-weight:bold;
    font-family:Georgia,Century gothic, Arial, sans-serif;
    text-transform:uppercase;
    border:1px solid #FF7800;
    }
    .sidebar2 ul {
    list-style-type: none;
    margin: 0 ;
    padding: 0;

    }

    .sidebar2 ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 10px 0px;
    background-repeat:no-repeat;

    }

    .sidebar2 ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:0;

    }

    .sidebar2 ul ul ul ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border:0;

    }

    .sidebar2 ul li {
    height:100%;
    line-height:18px;
    float: left;
    clear: left;
    width: 160px;
    }

    .sidebar2 ul li a:link, .sidebar2 ul li a:visited {
    background:#42484D;
    color:#aaa;
    text-decoration: none;
    padding: 5px 0px 5px 5px;
    display:block;
    border-bottom:1px solid #4D575F;
    border-top:1px solid #333A3F;

    }

    .sidebar2 ul li a:hover {
    background:#333A3F;
    color: #eee;
    border-right:5px solid #D13F01;
    }

    .sidebar2 p {
    padding: 7px 10px;
    margin:0;

    }

    .sidebar2 table {
    width:100%;
    text-align:center;

    color:#787d7f;
    }

  • #33021

    rubio25
    Participante

    Otra duda, para lograr lo que quiero debo modificar el stylesheet.css o tambien el archivo sidebar.php?

  • #33045

    imported_josec
    Participante

    Gracias, yo estuve modificando la hoja de estilos, logre alterar el ancho del sidebar al que yo queria pero este se sobreponia al otro sidebar, lo que no logre fue desplazar las otras sidebars hacia abajo, necesito ayuda es en la modificacion del codigo ya que no se que modificar. Adjunto el codigo de la hoja de estilos por si alguien sabe que debo modificar. Gracias!

    tienes que dejar tus sidebar’s dentro de otro.

    algo asi seria,

    y con un poco de CSS le das la forma que quieras

  • #33047

    imported_josec
    Participante

    Otra duda, para lograr lo que quiero debo modificar el stylesheet.css o tambien el archivo sidebar.php?

    Si las etiquetas HTML tienen la estructura que tu le quieres dar al sidebar, no es necesario editar el sidebar.php

    pero si no es el caso, tienes que modificar ambos.

  • #33057

    rubio25
    Participante

    Exacto lo que tengo es que bajar dos sidebar y dejar una arriba que es a la que quiero modificar el ancho, y se que debo modificar la hoja de estilos en la seccion de sidebar pero no se que codigo especificamente modificar para subir o bajar las sidebars. Gracias de antemano.

  • #33075

    imported_josec
    Participante

    tienes que seguir esta logica,

    lo demas es solamente CSS

    NOTA: #sidebar_arriba y #sidebar_abajo, son los ID que se integran a la hoja de estilos, osea los tienes que crear.

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

Pin It on Pinterest