• Resolved Anonymous User 14379775

    (@anonymized-14379775)


    Hello!
    I wanna change some styles of individual widget, but I found that all widgets have the same class attached to them. Why each widget do not have unique classes or id?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @web2033,
    You can style a widgets depending on what type of widget it is. example .widget_text will target all text-widgets. You can also style them individually by using their unique IDs
    id=”%1$s” this gives the widgets their own ID. Classes are supposed to be the same.

    <blockquote><?php $args = array(
    	'name'          => __( 'Sidebar name', 'theme_text_domain' ),
    	'id'            => 'unique-sidebar-id',
    	'description'   => '',
            'class'         => '',
    	'before_widget' => '<li id="%1$s" class="widget %2$s">',
    	'after_widget'  => '',
    	'before_title'  => '<h2 class="widgettitle">',
    	'after_title'   => '</h2>' ); ?>

    More information:
    http://codex.ww.wp.xz.cn/Function_Reference/register_sidebar

    All the best 😉

    Thread Starter Anonymous User 14379775

    (@anonymized-14379775)

    Hi @dzuzo
    It’s “enigma” theme related problem. In a source code unique IDs are absent.

    Thread Starter Anonymous User 14379775

    (@anonymized-14379775)

    Hey, @weblizar_support / @weblizar
    Core developer helped me to solve that problem.
    It’s due to this lines in theme:
    https://themes.trac.ww.wp.xz.cn/browser/enigma/2.4.2/functions.php?marks=176,186#L166
    Can you change code for future release, so the issue will be solved?

    function weblizar_widgets_init() {
    /*sidebar*/
    	register_sidebar( array(
    		'name' => __( 'Sidebar', 'enigma' ),
    		'id' => 'sidebar-primary',
    		'description' => __( 'The primary widget area', 'enigma' ),
    		'before_widget' => '<div id="%1$s" class="enigma_sidebar_widget %2$s">',
    		'after_widget' => '</div>',
    		'before_title' => '<div class="enigma_sidebar_widget_title"><h2>',
    		'after_title' => '</h2></div>'
    	) );
    
    	register_sidebar( array(
    		'name' => __( 'Footer Widget Area', 'enigma' ),
    		'id' => 'footer-widget-area',
    		'description' => __( 'footer widget area', 'enigma' ),
    		'before_widget' => '<div id="%1$s" class="col-md-3 col-sm-6 enigma_footer_widget_column %2$s">',
    		'after_widget' => '</div>',
    		'before_title' => '<div class="enigma_footer_widget_title">',
    		'after_title' => '<div class="enigma-footer-separator"></div></div>',
    	) );
    }
    add_action( 'widgets_init', 'weblizar_widgets_init' );
    Thread Starter Anonymous User 14379775

    (@anonymized-14379775)

    Hi @dzuzo
    You were right with core of problem, thanks!

    Hi,

    It is not possible.

    Thanks.

    Thread Starter Anonymous User 14379775

    (@anonymized-14379775)

    Is it not possible to change 2 lines of code? Strangely enough…

    Hi,

    Sorry for inconvenience.

    Please go to Parent Theme directory >> functions.php file.

    Now replace below code

    add_action( 'widgets_init', 'weblizar_widgets_init');
    	function weblizar_widgets_init() {
    	/*sidebar*/
    	register_sidebar( array(
    			'name' => __( 'Sidebar', 'enigma' ),
    			'id' => 'sidebar-primary',
    			'description' => __( 'The primary widget area', 'enigma' ),
    			'before_widget' => '<div class="enigma_sidebar_widget">',
    			'after_widget' => '</div>',
    			'before_title' => '<div class="enigma_sidebar_widget_title"><h2>',
    			'after_title' => '</h2></div>'
    		) );
    
    	register_sidebar( array(
    			'name' => __( 'Footer Widget Area', 'enigma' ),
    			'id' => 'footer-widget-area',
    			'description' => __( 'footer widget area', 'enigma' ),
    			'before_widget' => '<div class="col-md-3 col-sm-6 enigma_footer_widget_column">',
    			'after_widget' => '</div>',
    			'before_title' => '<div class="enigma_footer_widget_title">',
    			'after_title' => '<div class="enigma-footer-separator"></div></div>',
    		) );
    	}

    with this below code

    add_action( 'widgets_init', 'weblizar_widgets_init');
    	function weblizar_widgets_init() {
    	/*sidebar*/
    	register_sidebar( array(
    			'name' => __( 'Sidebar', 'enigma' ),
    			'id' => 'sidebar-primary',
    			'description' => __( 'The primary widget area', 'enigma' ),
    			'before_widget' => '<div id="%1$s" class="enigma_sidebar_widget %2$s">',
    			'after_widget' => '</div>',
    			'before_title' => '<div class="enigma_sidebar_widget_title"><h2>',
    			'after_title' => '</h2></div>'
    		) );
    
    	register_sidebar( array(
    			'name' => __( 'Footer Widget Area', 'enigma' ),
    			'id' => 'footer-widget-area',
    			'description' => __( 'footer widget area', 'enigma' ),
    			'before_widget' => '<div id="%1$s" class="col-md-3 col-sm-6 enigma_footer_widget_column %2$s">',
    			'after_widget' => '</div>',
    			'before_title' => '<div class="enigma_footer_widget_title">',
    			'after_title' => '<div class="enigma-footer-separator"></div></div>',
    		) );
    	}

    Save the changes.

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Style individual widget’ is closed to new replies.