Beat Store Playlist CSS Tips ( 7 )

Here are CSS tips for modifying the beat store playlist template. Here is a tutorial on how to add custom CSS.

CSS Tips on This Page

  1. How to change the beat store scroll window height
  2. How to remove the beat store background, header, and border
  3. How to change the active beat color
  4. How to make the beat store full width
  5. How to change the highlight icons
  6. How to change the Genre, BPM, and Produced By text color and size.
  7. How to change cart icon color
  8. How to change the beat store and audio player background color

Change the height of the beat store scroll window.

The default height is 580 pixels.

/* Change Beat Store Height */
.mejs-playlist { height: 700px !important; }

How to remove the white background from around the beat store scroll window.

The code below removes the page header, increases the player height, and removes the white background. To use the code you need to look into the HTML source code of the page with your beat store in it. Look at the <body> and search for the page ID which will look like .page-id-1974. Get the page ID number and replace it in the number below.

Tutorial: How to find page ID #

/* Changes beat store padding. Change the .page-id # */
/* Remove Page Header */
.page-id-1974 .leftside h1 { display: none;}

/* Remove Content Box Padding */
.page-id-1974 .leftside {  padding: 0px; width: 620px; }

/* Change Beat Store Height */
.page-id-1974  .mejs-playlist { height: 600px !important; margin-bottom: 0px;  }

/* Responsive */
@media (max-width: 950px) { .page-id-1974 #main.leftside , .page-id-1974 .beatstore {  width: 100%; padding: 0% !important; } }

Image Preview

player

How to change the active beat color

This code will change the color of the active beat in the beat store playlist. By default the active color is a light grey. Change #36ace3 to the color you want.

/* Beat Store - Active Beat Color */
.mejs-playlist li.current { background-color: #6ace3; }

 

How to make the beat store with no background full width.

Add this code to the code above. Change the page ID number. Tutorial: How to find page ID #

.page-id-1974  #main { width: 940px; }
.page-id-1974  #right_side { display: none;}

Preview
fullwidth

How to change the highlight icons.

You can replace the image icon by uploading another 16px icon to your server. Replace the http://XXXXXX.png with the location of the new image location.

/* New Icon */
.new_icon { background: transparent url(http://XXXXXX.png) no-repeat; }
/* Sale Icon*/
.sale_icon { background: transparent url(http://XXXXXX.png) no-repeat; }
/* Popular Icon */
.popular_icon {  background: transparent url(http://XXXXXX.png) no-repeat; }

How to change the Genre, BPM, and Produced By text color and size.

The default size is 11px.

/* Change Genre Text*/
.mejs-playlist .genre { 
	color: #4C4C4C !important;
	font-size: 11px !important;
}

How to change cart icon color

/* Change Cart Cart Icon Color */
.mejs-playlist li .fa, .mejs-playlist li.current .fa
{
color: #ffffff;
}

How to Change the Beat Store & Audio Player Background Color

/* Beat Store Playlist BG Color  */
.mejs-playlist { background-color: #000000; }

/* Sorting Bar BG Color */
#primary_nav_wrap  ul, #primary_nav_wrap  li
{ background-color: #000000 !important; }

/* Audio Player BG Color */
.mejs-container .mejs-controls {
  background-color: #000000  !important;
  background-image: none;
}

/* Beat Store Playlist Line Color */
.mejs-playlist li
{ border-bottom-color: #333333; }

/* Beat Store Playlist Sub Text - Genre & Producer Name */
.mejs-playlist .genre
{
  color: #666666;
  font-size: 11px;
  padding-top: 3px;
}
Related Articles
Last updated on October 22nd, 2016.

12 Comments

  1. Ben

    I was wondering when I arrive at the page, the beat player has its default volume set to around 50%. (Or is this a true 100%??) Either way is there any way that when the player loads on default that the volume could be set to maximum? Thank you

Leave A Comment?

Looking Help?
1. First search the knowledge base for answers. Email support can take 48 hours.
2. If something is not working, please read trouble shooting problems.
3. If those do not help, provide a website link to help speed up the process.