Question

He realizado unos cambios al widget de categorias que por defecto trae wordpress..

el archivo es default-widgets.php

cambie estas lineas... (aprox en la linea 483)

        <ul>
<?php
        $cat_args['title_li'] = '';
        wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?>

        </ul>

las cambie por lo siguiente ya que la funcionalidad de mi CSS se necesita:

        <ul>
<?php
        $cat_args['title_li'] = '';
        wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?>

        </ul>
        <div style="clear: both;"></div><!-- by elporfirio -->

¿Donde puedo meter el código, para que cuando actualize el sistema no me tenga que poner a buscar esta linea otra vez y hacer los cambios?

Comments

Agrego JS Fiddle de como esta http://jsfiddle.net/elporfirio/68Xem/

Answer 1

Lista la respuesta despues de mucho le meti más tiempo y la oslucion es crear un objeto que adquiera la propiedad... d ehehco solo le di clearfix en google y aparecio la solucion:

.widget:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

Gracias por sus aportaciones (y) aqui como trabaja:

http://jsfiddle.net/elporfirio/3wCYp/

Answer 2

Por lo que veo lo único que necesitas es estilo y puedes ponerlo directamente en la hoja de estilos CSS de tu tema. No tienes que modificar los archivos fuente de Wordpress para eso.

Cuando lo que necesites es modificar como tal el comportamiento y necesites agregar funciones, utiliza el archivo functions.php de tu tema, ahí es donde puedes poner todo tu código sin que afecte nada cuando actualices WordPress.

Saludos.

Answer 3

Peter tiene toda la razón: esto es soo un cambio de estilo.

Bastaría con que definas en el CSS que el UL (o quien contiene al UL) tiene como propiedad clear: both; para obtener el mismo resultado.

Answer 4

No se puede apreciar todo el sitio y como tengas las cosas, pero después de ver tu ejemplo, igual y con esto solucionas todo.

#categories-2 {
float: left;
}

Prueba y nos dices.

Saludos.

Answer 5

Sobre tu código, y si no entiendo mal lo que querés, lo que te hace falta es esto:

.widget {
    border: thin rgba(204,204,204,1) dashed;
    width: 290px;
    height: 280px;
    background-color: #999;
    clear: both; 
}
.widget ul{
}
 .widget li{
    float: left;
    width: 115px;
}

.widget li a {
    transition: all 0.5s;
    padding-left: 10px;
}

.widget li:hover{
    background-color: rgba(204,204,204,0.5);
    color: rgba(255,255,255,1);
}

.widget li a{
    display: block;
}

.widget li:nth-of-type(even){
    float: left;
    margin-left: 10px;

}

Acá está esa versión: http://jsfiddle.net/Re7W2/