Audio Player – How to customize Colors ?

• 

  dvismusic · Member · May 1, 2014 at 10:28 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I would like to manage colors for, both, audio player and audio playlist, could you help me to do this ?

  For the audio playlist:

  – I would like to manage background color, to replace white and put orange for example, see :

  

  For the audio player, I would like to customize colors too :
  https://www.dropbox.com/s/djsvqgwiap4pm5t/Capture%20d%E2%80%99%C3%A9cran%202014-05-01%20%C3%A0%2015.00.21.png

  Thanks to you for your precious help,
  DvisMusic

  PS : please note that my site is still in private option as it’s not ready to be public, regarding customization in process to fit my expectations.

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

• 

  timethief · Member · May 1, 2014 at 10:30 pm

  • Copy link

  There is an issue with audioplayers currently so you may want to read this thread https://en.forums.wordpress.com/topic/audio-player-changed-appearance/page/2?replies=33#post-1790818

• 

  thesacredpath · Member · May 2, 2014 at 4:25 am

  • Copy link

  For the audio player in posts and pages, add the following and see what you think.

  .mejs-container .mejs-controls {
      background-color: #F4710A !important;
  }

  For the playlists, give this a look

  .wp-playlist-light {
      background: #f4710a !important;
  }

• 

  dvismusic · Member · May 3, 2014 at 7:37 am

  • Copy link

  Thanks to the famous thesacredpath, this is doing what I want :

  See : https://www.dropbox.com/s/0jg0wlrmh6c78my/Capture%20d%E2%80%99%C3%A9cran%202014-05-03%20%C3%A0%2008.54.29.png

  I have just a side effect with the widget player :

  See :
  https://www.dropbox.com/s/hej9ygbiprjk1ez/Capture%20d%E2%80%99%C3%A9cran%202014-05-03%20%C3%A0%2008.54.21.png

  Here, the player as a strange brown color instead of the orange we parameter in the CSS customization …

  – Could we do something to adjust the player color within widget ?

  Dvismusic

• 

  thesacredpath · Member · May 5, 2014 at 4:26 am

  • Copy link

  Ah, let’s change the code I gave you to the following and change background-color to background instead. (There is a linear gradient set in one of the rules in the original CSS.}

  .mejs-container .mejs-controls {
      background: none repeat scroll 0 0 #F68D3B !important;
  }

• 

  routid · Member · May 5, 2014 at 9:01 am

  • Copy link

  Thanks, I’ll try this code and let you know…
  DvisMusic

• 

  dvismusic · Member · May 5, 2014 at 11:14 am

  • Copy link

  You’re code is doing it ! Thanks to you

  I have another a question where I try to find an answer, perhaps you could help me ?

  I would like to set the hover color set when you choose an item in the menu generated for ipad and iphone, see :

  

  The current selected item is in orange, I would like to have the hover color in red, when you choose a new item in the menu …

  Do you know how to do ?

  Thanks for your strong support,
  DvisMusic

• 

  thesacredpath · Member · May 5, 2014 at 10:47 pm

  • Copy link

  Here you go. Make sure and try it out on a bunch of different pages and links. Twenty Fourteen is complex.

  .primary-navigation a:hover {
      color: #C10026 !important;
  }

• 

  dvismusic · Member · May 6, 2014 at 10:17 am

  • Copy link

  Hi, I tried and It has a bad effect on pc version . . .
  red character on red background :-(

• 

  thesacredpath · Member · May 7, 2014 at 10:25 pm

  • Copy link

  Hmmm, let’s clarify what you are wanting. Right now on your full menu the background for the menu items and submenu items are red and change to orange when you hover them. Is that what you are wanting on the minified menu on tablets and phones?

  From what you said and your screenshot, I was thinking you wanted the hover color of the text to be red and then go orange when it is the current menu item.

• 

  dvismusic · Member · May 8, 2014 at 11:14 am

  • Copy link

  Yes, that’s exactly what I want to do with minified menu on tablets and phones.

  – Is it possible ?

  Thanks to you for your clear analysis and great support,
  Dvismusic

• 

  thesacredpath · Member · May 8, 2014 at 3:37 pm

  • Copy link

  Give the following a try. I’ve used a media query to limit the color change to the widths that the minified menu are active. Without that limitation, if you activate the minified menu and then widen your browser window to where the full menu is displayed, the minified menu changes bleed back through to the main menu. See what you think of the following.

  @media screen and (max-width: 782px) {
      .primary-navigation.toggled-on a:hover {
      background: #F4710A !important;
  }
  .primary-navigation.toggled-on .nav-menu {
      background: #C10026 !important;
  }
  }

• 

  dvismusic · Member · May 8, 2014 at 4:55 pm

  • Copy link

  Hi, thanks, I just tried your code, I finally use the following, this is doing what I want, having the chosen item of the minified menu on a red background :

  @media screen and (max-width: 782px) {
  .primary-navigation.toggled-on a:hover {
  background: #C10026 !important;
  }
  }

  Last question on this issue, is it possible to limit the background color to the name of the item ?

• 

  thesacredpath · Member · May 8, 2014 at 5:10 pm

  • Copy link

  Not sure I understand what you are wanting. Can you explain a little further, perhaps an example?

• 

  routid · Member · May 8, 2014 at 5:36 pm

  • Copy link

  All the line is with the background color, I would like to only have the name …

  See the existing with the previous code added to the CSS :

  

  And what I want to implement :

  

  Do you understand ?

• 

  thesacredpath · Member · May 9, 2014 at 2:17 am

  • Copy link

  Hmmm, this can be done. Add this to the media query we have now.

  .site-navigation a {
          display:inline-block;
          padding-left: 10px;
          padding-right: 10px
  }

  It will end up looking like this.

  @media screen and (max-width: 782px){
  	.primary-navigation.toggled-on a:hover{
  		background:#C10026 !important
  	}
         .site-navigation a {
                 display:inline-block;
                 padding-left: 10px;
                 padding-right: 10px
          }
  }

• 

  dvismusic · Member · May 9, 2014 at 10:28 am

  • Copy link

  Great this is perfect !

  Thanks to you for your prompt answer
  DvisMusic

• 

  thesacredpath · Member · May 9, 2014 at 5:51 pm

  • Copy link

  You are welcome.

• 

  dvismusic · Member · Jun 6, 2014 at 7:46 am

  • Copy link

  Hi,

  Tomorrow, June 7, is the launch of my site DvisMusic.com, I really wanted to thank you for all your support and for allowing me to get the design I wanted to sparkle my music with the world ! Do not hesitate to visit my site and leave a comment sign of your visit!

  I hope you like the result and also my music. . . Music is sharing!

  Thank you again,
  DvisMusic
  More on dvismusic.com

• 

  thesacredpath · Member · Jun 9, 2014 at 5:18 pm

  • Copy link

  You are most welcome and I’m glad to have been able to help you get it looking just like you wanted it. I’m heading over to your site shortly to have a look and listen.