entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Modificar el estilo de un link de una lista

En la siguiente imagen muestro el estilo de un post de mi blog. Como veis hay 3 tipos de links.

  1. Link de categoría. Todo correcto.
  2. Link dentro del párrafo del testo. Todo correcto.
  3. Link dentro de una lista. Este último link es el que deseo cambiar de estilo. Me gustaría que tuviese el mismo estilo que el segundo link.

enter image description here

Este es parte del código css que uso.

.main .row .posts .post ul { /* Category near the date */
    /*list-style: none; This line hide lit's dots or numbers*/
    display: inline-block;
    /*padding: 2px;*/
    border:none;
    border-radius: 0;

}

.main .row .posts .post ul a {
    color:#fff;
    background: #F5004D;
    margin-left: 1px;
    text-decoration: none;
    margin-top: 0px;
    padding: 5px;
}

.main .row .posts .post ul a:hover {
    color: #333;
    background-color: #F5F5F5;
    border-color: #122b40;
}

.post-date {
    color: #333;
    background: #F5F5F5;
    margin-left: 1px;
    text-decoration: none;
    margin-top: 0px;
    padding: 5px;
}

.post-categories {
    margin: 0px;
    margin-top: 22px;
    padding: 0px;
}

.post-categories li { /* The categories together */
    display: inline;
}

Adjunto también la url donde se puede encontrar el post para facilitar el debug del código:

http://www.aldakur.net/proba-bat-da/

2 Respuestas

0voto

egoitz_gonzalez Puntos10050

La solución ha pasado por tocar un poco el css pero también el código en Wordpress. En la página 'single.php' utilizaba el método the_category() para listar las categorías. Ahora en ese método lo he sustituido por el siguiente código con la intención de que cada categoría sea una clase llamada myCategorypara después poder dar estilo a esta categoría en el css.

single.php

$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
        foreach($categories as $category) {
                $output .= '<a class="myCategory" href="'.get_category_link( $category->term_id ).'"title="'.esc_attr( sprintf( __( "%s" ), $category->name ) ).'" rel="category tag" >'.$category->cat_name.'</a>'.$separator;
        }
echo trim($output, $separator);
}

En style.css

.myCategory {
    color:#fff;
    background: #F5004D;
    margin-left: 1px;
    text-decoration: none;
    margin-top: 0px;
    padding: 5px;
}

.myCategory:hover {
    color: #333;
    background-color: #F5F5F5;
    border-color: #122b40;
    text-decoration: none;
}

Con esto las declaraciones de .main .row .posts .post ul a y .main .row .posts .post ul a :hover no son necesarias.

0voto

Peter comentado

Gracias por compartir tu solución!

0voto

Peter Puntos150460

Si quieres sobre escribir tus estilos prueba con esto:

li a {
    color: #F5004D!important;
    background: none!important;
}

Ojo, esto afectara a todos los enlaces dentro de una lista, como tus elementos en la barra lateral.

Saludos.

0voto

egoitz_gonzalez comentado

Claro. Ahí es donde tengo el problema. Afecta a toda la web, incluidas las listas de la barra lateral y a las categorías que en la imagen que he adjuntado son "Aplikazioak" y "Apple".

Se me ha ocurrido crear una nueva clase y cada vez que inserte un link dentro de una lista en el texto asignarle la nueva clase. funcionar funciona pero es un poco engorroso. No se me ocurre otra solución.

0voto

Peter comentado

Perdón por no haber continuado con esto, estuve fuera unos días. Que bueno que encontraste una solución.

Saludos.

0voto

egoitz_gonzalez comentado

Gracias por la aportación.
Un saludo.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta