how to change colour of playlist background and font

• 

  jeffvandyck · Member · Jun 29, 2014 at 11:07 am

  • Copy link
  • Add topic to favorites

  How do I change the colour of the background and text of a playlist?

  The blog I need help with is: (visible only to logged in users)

• 

  vinoddalvi · Member · Jun 30, 2014 at 1:58 pm

  • Copy link

  I think you are talking about the playlist displayed in the widget displayed in the right hand sidebar of your site.

  If it is so then you can change the colour of the background and text of a playlist by adding the following custom CSS code in the CSS editor.

  To add Custom CSS you’ll need the Custom Design upgrade, which you can purchase in your dashboard under Store.

  #sidebar li.widget_nav_menu {
         background-color: #fff;
         color: #000;
  }
  #sidebar li.widget_nav_menu a {
        color: #000;
  }

• 

  designsimply · Member · Jun 30, 2014 at 10:53 pm

  • Copy link

  I checked http://jeffvandyck.com/ and I couldn’t see a playlist in the sidebar or in any posts on the home page. If you still need help, please link to an example post or page with a playlist on it.

• 

  jeffvandyck · Member · Jul 1, 2014 at 6:44 am

  • Copy link

  Thanks heaps for your help! The page in particular is here…

  http://jeffvandyck.com/games/spartan-total-warrior/

  The playlist isn’t in the sidebar, it’s in the main section. I’d like it to match the style of the rest of the site if at all possible.

• 

  vinoddalvi · Member · Jul 1, 2014 at 2:40 pm

  • Copy link

  Hi @jeffvandyck,

  Sorry for misunderstanding.

  Try using the following code instead of previous one.

  #main .wp-playlist {
         background: transparent;
         border: 1px solid #444855;
         color: #bfc3cf;
  }
  #main .wp-playlist a:hover {
         color: #d24d04;
  }
  #main .wp-playlist-light .wp-playlist-item,
  #main .wp-playlist a {
         color: #bfc3cf;
         border-color: #444855;
  }

• 

  designsimply · Member · Jul 2, 2014 at 11:02 am

  • Copy link

  One way to reverse the colors of the playlist shortcode is to add style=”dark” to the options. Here is an example:

  [playlist style="dark" ids="1234,1235, 1236"]

  To edit a shortcode, click the “Text” tab at the top right of the editor to see the code view. Then click Visual after you have adjusted the playlist shortcode.

  It is also possible to modify colors with CSS. If you want to learn that in addition to switching from light to dark using the shortcode parameters, let me know.

• 

  vinoddalvi · Member · Jul 2, 2014 at 12:41 pm

  • Copy link

  Hi @designsimply,

  I have posted the following reply on this topic yesterday but now i can only see it when logged in and it doesn’t display when i logged out.

  https://en.forums.wordpress.com/topic/how-to-change-colour-of-playlist-background-and-font?replies=5#post-1924100

  Could you please tell me what it is so?

  Regards,

• 

  jeffvandyck · Member · Jul 2, 2014 at 1:14 pm

  • Copy link

  I tried style=dark, but I get black text on a black background. Does this mean I need to use CSS? I’m happy to try it out.

• 

  designsimply · Member · Jul 2, 2014 at 1:34 pm

  • Copy link

  I tested the dark style with the playlist shortcode in the Parament theme before I posted that solution, and I see the colors reversed from normal as expected.

  Could you have some other setting different than me that’s causing the trouble? I don’t see any custom CSS already added that would cause black text on a black background.

  Could you create a draft with the playlist setup so it’s showing the problem so I can take a closer look?

• 

  designsimply · Member · Jul 11, 2014 at 9:44 pm

  • Copy link

  I tried style=dark, but I get black text on a black background. Does this mean I need to use CSS? I’m happy to try it out.

  Can you link to the page where you tried style=dark so I can take a closer look?

• 

  designsimply · Member · Jul 16, 2014 at 12:03 pm

  • Copy link

  Since we haven’t heard back from you in a few weeks and since the solution I posted earlier is working for me in my testing, I’m going to mark this issue as resolved. If you still need help, please reply back here and mark the issue as unresolved or start a new help request at https://en.forums.wordpress.com/forum/css-customization/#postform