Change WordPress user roles and capabilities Forums How to or FAQ How to hide content via css

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6151
    tobe
    Participant

    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

    #6153
    Vladimir
    Keymaster

    Hi Tobias,

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

    #6154
    tobe
    Participant

    Hi Vladimir,

    thanks for the fast answer.

    at the front-end.

    Tobias

    #6156
    Vladimir
    Keymaster

    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
    }
    
    #6158
    tobe
    Participant

    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

    #6159
    Vladimir
    Keymaster

    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
    }
    
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.