1. Home
  2. Appearance
  3. CSS Tips & Tricks

CSS Tips & Tricks

Here is CSS code to make changes to your website. How to Add Custom CSS

Please note: A lot of the color related changes can now be changed in the WordPress Customizer without CSS code


Stretch Your Background Image

Here is the code you need to stretch a background image. Add a background image following the steps in this video tutorial, and then add the code below.

body { background-size: cover; background-repeat: no-repeat; }

The CSS below will dock your navigation menu to the top of your website and will remain docked to the top as you scroll up and down your site.

/* Docked Nav Bar */
.navigation_holder , .logged-in .navigation_holder {  position: fixed; z-index: 1030; top: 0; }
.logged-in .navigation_holder {  margin-top: 32px; }
body { padding-top: 43px; }

Code tested in Firefox, Chrome, and Safari on a Mac.

Please note: The mobile menu with this code is a little buggy if you have a lot of links in your navigation. Test out your navigation on mobile when using this code.


How to Make the Content Background Transparent

“0.5” is the transparency level. Adjust it from 0.1 to 0.9.

/* Content BG */
#beat_player, #beat_player_info , #beat_player_description , #beat_player_top, .beat_player_player { border: none !important; background: none  !important;}
#main , .widget ,  #beat_player { background: rgb(255, 250, 250); background: rgba(255, 250, 250, 0.6);}

Beat Store Playlist CSS Tips ( 7 )

Here are CSS tips for modifying the beat store playlist template.

Beat Store Playlist CSS Code

CSS Tips Below

  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; }

Remove White Background Around 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.

/* 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 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 & 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; }

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; }


Change the Page Title Color

Change the #666666 to the color you want.

h1#content_header , .title a { color: #666666 !important; }

Hide the Beat Store Table Header

If you would like to remove the beat store table header to make the beat store page look a little cleaner, use the CSS code below.

/* Hide the Beat Store Table Header */
.store_table thead th  { display:none; }

Before

bar

After

new


Hide the Text Under the Blog Post Header

/* Hide the Text Under the Blog Post Header */
.blog_post_comments { display: none; }

Before

now

After

new


Hide Page Title

If you would like to hide the h1 page title on a page check out the code below.

Home Page
If you want to hide the page title on the home page use this code.

/* Hide Home Title */
.home h1 { display: none; }

Sub Page
If you would like to hide the page title on another page you will need to look into the HTML code to get the correct page CSS class.

To do this you want to right click the page you want to modify on your website and click view source code link. Looking at the HTML code look for <body class=”

In there you will see page-id which will look like this page-id-813

You want to get the numbers of that page id and replace it in the code below. So if your page id is page-id-123. Use .page-id-813 h1 { display: none; }

/* Hide Page Title  */
.page-id-813 h1 { display: none; }

Display Social Icons on Mobile

The social icons in the header disappear on smaller mobile devices if you would like to continue to show the icons use the code below.

@media (max-width: 950px) { #header_social_icons { display:block; margin-top:10px; text-align:center; width:100%;}}

Hide the Category Drop Down Menus

If you would like the hide the category drop down menus that appear on the top right of pages to sort content, use the code below.

Hide the photo gallery category drop down menu:

/* Hide the Photo Category Drop Down */
#photo_category_dropdown { display: none;}

Hide the product store category drop down menu:

/* Hide the Store Category Drop Down */
#store_category_dropdown { display: none;}

Hide the events category drop down menu:

/* Hide the Event Category Drop Down */
#event_category_dropdown { display: none;}

Hide the FAQs category drop down menu:

/* Hide the FAQ Category Drop Down */
#faq_category_dropdown { display: none;}

Hide the ALL category drop down menus:

/* Hide All Category Drop Downs */
.category_dropdown { display: none;}

What is CSS?


How to Find and Change CSS Elements ( Video )

Here are tips to find CSS classes and IDs.

Tutorial on how to add custom CSS. Helpful Tool: HTML color picker.

Basic CSS

css

More in depth information on CSS.

Basic CSS Properties

/* Hide Element */ display: none;

/* Font Color */ color: #000000;

/* Font Size */ font-size: 14px;

/* Background Color */ background-color: #000000;

/* Border Color */ border-color: #333333;



How to Find a Page ID for CSS

Sometimes when trying to apply CSS style to specific pages on your website, you will need to locate the page ID to apply the CSS to that one page.

Example: If you wanted to hide the page title on a specific page the code would look like this.

.page-id-561 h1 { display: none; }

The page ID in the code above is .page-id-561

How to Find the Page ID

1.Visit the live page on your website that you want to apply specific CSS too.

2. Right click the page and select View Page Source. This may be worded different depending on your browser.

view html

3. Scroll in the HTML code until you see <body class=” In there is where you will find the page ID.  The page ID below is page-id-328

page id

4. Copy the page ID number and put a period in front of it.  Example code updated below:

.page-id-328 h1 { display: none; }

If you wanted to use the same CSS on multiple pages, you would simply copy the CSS, and separate it with a comma excluding the last line of CSS. The example code below is for multiple pages. You can see different page IDs on each row:

.page-id-328 h1,
.page-id-453 h1,
.page-id-675 h1,
.page-id-535 h1
{ display: none; }

Updated on August 26, 2017

Was this article helpful?

Related Articles

Add A Comment