Añadir icons a enlaces en sidebar

Inicio Foros WordPress General WordPress.org Añadir icons a enlaces en sidebar

Etiquetado: , , ,

Este debate contiene 7 respuestas, tiene 3 mensajes y lo actualizó  Anónimo hace 9 años, 5 meses.

  • Autor
    Publicaciones
  • #12801

    Anónimo

    <p>Hola,</p>
    <p>Me gustaría añadir unos icons a cada enlace en la categoría de Enlaces/Sidebar, veo que hay una opción, cuando se crea un enlace, en la parte de abajo, modo avanzado un lugar para añadir el enlace de la imagen que uno decee añadir, pero el problema es que al hacer esto, solo se ve la imagen y no el texto.</p>
    <p>Pueden ver el resultado aquí: http://www.poquerbankroll.com (barra/enlaces)</p>
    <p>Agradezco su ayuda, Saludos. ( :
    </p>

  • #27891

    imported_jaume
    Participante

    Tendrías que editar el archivo [b].php[/b] de los [b]Enlaces[/b],pero no sé dónde estará..

    O añadir enlaces manualmente en [b]Widgets-Añadir Texto[/b].

  • #27926

    gventura
    Participante

    Hola 8rc8,

    Lo que pides es mediante estilos. Tienes que modificar la propiedad li y decirle que para esos elementos utilice esa imagen cómo background.

    Ten presente que si la imagen tiene una dimensión de 20 px de ancho deberás decirle que el texto empiece mínimo 20px hacia la derecha para que no se solape.

    Así que ya sabes: abre el fichero styles.css y busca la clase concreta que utiliza las listas de tu sidebar.

    Si quieres que alguien pueda ayudarte más seria bueno un enlace o el código justo y necesario para ver cómo trabaja tu theme.

  • #27931

    Anónimo

    Hola,

    Muchas gracias por la orientación. Este es el código, es de todo el sidebar, no puedo encontrar el código especifico.

    /*========= SIDEBAR =========*/

    #mpu_banner {
    width:300px;
    height:250px;
    background-color:#eeeeee;
    margin-bottom:15px;
    padding: 9px;
    border: 1px solid #dddddd;
    }

    /*- Sidebar Tabs – Popular, Comments, Featured, Tag Cloud -*/

    .sideTabs {
    width:308px !important;
    height:auto !important;
    min-height:258px;
    padding:5px;
    border:1px solid #ddd;
    background-color:#eeeeee;
    float:left;
    display: block;
    }
    .col2 .mootabs_title{
    font-size: 12px;
    width: 100%;
    float:left;
    }
    .col2 .mootabs_title li{
    float: left;
    display:inline;
    font-size: 11px;
    line-height: 34px;
    background: #ffffff;
    color: #000000;
    border:1px solid #ddd;
    font-weight: bold;
    font-size: 11px;
    margin:0px 2px 0px 0px !important;
    padding:0px 5px !important;
    cursor: pointer;
    }
    .col2 .mootabs_title li:hover, .col2 .mootabs_title li.active{
    border: 1px solid #ddd;
    text-decoration: none;
    }
    .col2 .mootabs_panel {
    display: none;
    clear: both;
    float:left;
    height:auto !important;
    }
    .col2 .mootabs_panel.active {
    display: block;
    float:left;
    }
    .col2 .mootabs_panel ul{
    width: 296px !important;
    padding:5px !important;
    border:1px solid #ddd !important;
    margin:5px 0px 0px !important;
    background-color: #FFFFFF;
    min-height:203px;
    }
    .list1 li,.list2 li, .list3 li{
    padding: 6px 0 6px 25px;
    border-bottom: 1px solid #eee;
    }
    .list1 li a,.list3 li a,.list4 li a, .list5 li a{
    color: #666666;
    font-size: 12px;
    }
    .list3 li {
    background: url(images/ico-mostcomm.gif) no-repeat left center !important;
    }
    .list5 li{
    border-bottom: 1px solid #eee;
    padding:6px 0px;
    }
    #tagcloud {
    float:left;
    width:306px;
    padding-top:10px;
    }

    Bueno, gracias.

  • #27934

    gventura
    Participante

    A priori puede ser uno de estos:

    .list1 li,.list2 li, .list3 li, .list5 li

    Visualizando el código veo que la parte de enlaces tiene asociado una clase xoxo blogroll que tambien se assigna a los links de Blogs.

    Podrías crear una clase nueva dentro del style.css así:

    .blogroll li{
    background: #fff url(images/imagenfondo.png) top left no-repeat;
    padding-left: 20px;
    }

    Dónde 20px seria un poco más del ancho de la imagen.

    Creo que en principio te bastaría con esto.

  • #27947

    Anónimo

    Gracias por la ayuda, agregué el codigo en la parte de abajo, pero no me funciono. Parece que esos códigos que puse solo tiene que ver con la barra que contiene diferentes tabs. ):

  • #27950

    gventura
    Participante

    prueba de cambiar esto:

    .blogroll li{
    por
    .xoxo .blogroll li {

    sinó prueba también poner espacio a en las dos versiones

    .blogroll li a{

    .xoxo .blogroll li a{

    y dentro de los { } mantén el mismo que pusiste antes.

  • #28027

    Anónimo

    Gracias por tu ayuda, pero no pude concretar. Añadí como me sugeriste, pero no funciono.

    Por si acaso no conoces un lugar donde ofrece este tipo de soporte pagado?

    Saludos, ( :

El foro ‘General WordPress.org’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest