css - Change color of audio player depending on user role

admin管理员组

文章数量:1406942

I've changed the color of the Wordpress audio player using this CSS code.

/* change colours of audio player */

.mejs-controls,
.mejs-mediaelement,
.mejs-container {
    background: url('') !important;
    background-color: #1f7dcd !important;
}


/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #dece66 !important;
}

Now, I'd like to change it to a different color depending on the role of the user whose post / comment it is attached to.

So if the mp3 file is posted by an editor, it uses a different color, and if it is posted by a subscriber, it has a different color.

Is that possible. If so, how would I do that?

I've changed the color of the Wordpress audio player using this CSS code.

/* change colours of audio player */

.mejs-controls,
.mejs-mediaelement,
.mejs-container {
    background: url('') !important;
    background-color: #1f7dcd !important;
}


/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #dece66 !important;
}

Now, I'd like to change it to a different color depending on the role of the user whose post / comment it is attached to.

So if the mp3 file is posted by an editor, it uses a different color, and if it is posted by a subscriber, it has a different color.

Is that possible. If so, how would I do that?

• css
• user-roles

Share Improve this question asked Dec 3, 2019 at 20:18 Jim DugganJim Duggan 8933 silver badges99 bronze badges 1

• 1 you can add a CSS class to the comment with the filter comment_class – Kaperto Commented Dec 3, 2019 at 20:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The below will check the post creators role and based on that role allow you to set colour of the audio player.

Created in a plugin so to stop theme updates removing it on updating functions file when updating theme.

Not sure how to do this based on each comment of a person embedding a player as this would need to add tags to the html for each embedded player assigning different CSS styles to each tag.

<?php
    /**
    * Plugin Name: Change colour of the audio player
    * Plugin URI: http://www.web
    * Description: Adds colour to the audio player
    * Version: 1.0
    * Author: Name
    * Author URI: http://www.web

    */

 add_action( 'wp','my_special_action' ); function my_special_action() {

//Check if it is a post to run the code

  if (is_single())
  {

  //Get post ID
  $post_idz = get_the_ID();
  //Pull all field data of post
  $post_fields = get_post($post_idz);
  //Get authors ID 
  $author = $post_fields->post_author;
  //Get author roles
  $user_meta=get_userdata($author); 
  $user_roles=$user_meta->roles; 

//Check author has role

//Start ADD_ROLE_NAME
if (in_array("ADD_ROLE_NAME", $user_roles))
{
  ?>
    <style>
    /* change colours of audio player */

    .mejs-controls,
    .mejs-mediaelement,
    .mejs-container {
        background: url('') !important;
        background-color: #1f7dcd !important;
    }


    /* change the color of the current time bar */
    .mejs-controls .mejs-time-rail .mejs-time-current {
        background: #dece66 !important;
    }

    </style>

    <?php
} 
//End ADD_ROLE_NAME



} }

本文标签： cssChange color of audio player depending on user role