Question

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.

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/

Answer 1

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.

Answer 2

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.