How to hide content via css

[tobe]

Hello,

thanks for the nice plugin and the many functions in pro version.

We thought we could e.g. deposit #header {display: none;} for a certain user role. How can we show content in header only for special user role? Is it possible to get a solution for this?

Thanks for your help

Tobias

[Vladimir]

Hi Tobias,

Clarify, where do you wish to change CSS for role: at wp-admin or at the front-end?

[tobe]

Hi Vladimir,

thanks for the fast answer.

at the front-end.

Tobias

[Vladimir]

You may use URE Pro additional options using code below as a starting point:

// Additional options for URE

// Hide parts of front-end page for selected role
add_filter( 'ure_role_additional_options', 'ure_add_change_front_end_css', 10, 1 );

function ure_add_change_front_end_css( $items ) {
    
    $item = URE_Role_Additional_Options::create_item( 'change_front_end_css', esc_html__('Change Front-end CSS', 'user-role-editor'), 'init', 'change_front_end_css_init' );
    $items[$item->id] = $item;
    
    return $items;
}

function change_front_end_css_init() {

    wp_enqueue_script( 'jquery' );

    add_action( 'wp_footer', 'ure_change_front_end_css' );
}

function ure_change_front_end_css() {

?>
<script type="text/javascript">
    
    jQuery(document).ready(function() {
        // jQuery('#header').hide();
        jQuery('.header-inner').hide();
    });
    
</script>

<?php
}

[tobe]

Hi Vladimir,

thank you very much – das funktioniert prima!

However, we need an additional css script for user role:

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
	}

How can we create it?

Thanks for your answer.

Tobias

[Vladimir]

Hi Tobias,

jQuery .css( propertyName, value) method allows to change CSS of selected element on the fly (official documentation page),
Like this:

jQuery('.html_header_top.html_header_sticky').css('padding-top', 0);
jQuery('#top').css('padding-top', 0);
...

It’s possible to work with clear CSS also:

// Additional options for URE

// Hide parts of front-end page for selected role
add_filter( 'ure_role_additional_options', 'ure_add_change_front_end_css', 10, 1 );

function ure_add_change_front_end_css( $items ) {
    
    $item = URE_Role_Additional_Options::create_item( 'change_front_end_css', esc_html__('Change Front-end CSS', 'user-role-editor'), 'wp_head', 'ure_change_front_end_css' );
    $items[$item->id] = $item;
    
    return $items;
}

function ure_change_front_end_css() {

?>
<style>

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
    
    
</style>
<?php
}

[Author]

Posts