WordPress.org

Forums

Different CSS for widgets depending on their count (3 posts)

  1. Nuuzeli
    Member
    Posted 2 years ago #

    Hi!

    I'm working on a footer that has four widgets next to each other, each with a CSS making them 25% wide to fill the whole width. The problem I have with this, however, is that if I choose to (for example) only have three widgets, they don't fill the whole width unless I tweak the CSS again (and I don't want to do this). So... Is there any way to have the CSS of the widgets change depending on how many widgets I am using? E.g. if I have one widget, it's 100% wide, if I have two, they're both 50% etc.

    I currently have this code in the functions.php:

    remove_filter('get_the_excerpt', 'wp_trim_excerpt');
    add_filter('get_the_excerpt', 'improved_trim_excerpt');
    
    if ( function_exists('register_sidebar') ) {
    	register_sidebar(array(
    	'name'=>'Yhteystiedot',
    	'before_widget' => '<div class="%1$s">',
            'after_widget' => '</div>',
            'before_title' => '<h3>',
            'after_title' => '</h3>'
        ));
    }

    Bare in mind that I am extremely stupid when it comes to PHP or coding in general, so I really need "PHP for dummies" kind of explanations :)

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    might be useful:
    http://wordpress.org/support/topic/how-to-first-and-last-css-classes-for-sidebar-widgets?replies=9

    adapted to also output the total number of widgets in the sidebar; for example:

    .widgets-count-5

    http://pastebin.com/9Z6z4fT1

    needs to be added into functions.php of your theme.

    to be used in style.css like this example:

    .widgets-count-1 { width: 100%; }
    .widgets-count-2 { width: 50%; }
    .widgets-count-3 { width: 33%; }
    .widgets-count-4 { width: 25%; }

    mght need further css refinement to work properly.

  3. Nuuzeli
    Member
    Posted 2 years ago #

    Thanks alchymyth, I'll take a look into that! :)

Topic Closed

This topic has been closed to new replies.

About this Topic