Homepage Banners

Here are tutorials and detailed information for the homepage banners.

  1. How to Enable Banners
  2. How to Add Banners
  3. How to Create a Full Width Banner
  4. CSS Tips & Tricks
  5. FAQs & Help

1. How to Enable Banners

Homepage banners are hidden by default, you will have to enable them to appear.

  1. In WordPress click Customize under Appearance on the sidebar.
  2. Click General > Banners
  3. Check the boxes to show the banners.
  4. Click the Save & Publish button.


2. How to Add Banners

Important Note: The Theme Options panel has been replaced by the WordPress Customizer.


 How to Add Banners

  1. In WordPress click Add New Banner under Banners on the sidebar.
  2. Enter the banner name into the title field.
  3. Click the Add Image link in the image box to upload your banner image.
  4. Enter a banner headline. Limit to 60 characters. ( Optional )
  5. Enter a sub-headline to appear below the headline text. Limit to 120 characters. ( Optional )
  6. Click the Publish or Update button to make your changes live.

3. How to Create a Full Width Homepage Banner

Here is a tutorial on how to create a full width homepage banner without having to modify any PHP code.

Image Preview

full width banner

There are a number of things you will see that are different in the image below. The header is white, the homepage banner is stretched to 100% width, and the main background of the site is white.

How it Works

  • The image you see as the full width banner image is background image that is applied to a div. The banner background image can only be 1 image and it does not change.
  • The text you see over the banner is an image, and this can change. The text must be a transparent png file. The image size is the same 940 x 350 pixels.

Sample Files

Tutorial: How to add custom CSS.

Watch Video to Avoid Issues

/* Wide Banner Image BG */
#home_banner_container {
background-image: url("http://your-domain.com/wp-content/xxxxxxxx.jpg");
} 
/* Wide Banner No Edit */
#home_banner_container { height: 500px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; margin-bottom: 20px; }
/* Padding Above Banner Image */
.fader img { padding-top: 75px;}
/* Center Banner Image */
.fader { margin-left: auto; margin-right: auto; }
/* Remove Space Above Banner */
.fader { margin-top:0px; }
/* Banner - Hide Banner Circles */
.fader .pager_list { display: none; }
/* Mobile Banner Resize */
@media screen and (max-width:880px) { #home_banner_container { height: auto; } }

/* Header - Changes Header BG to White */
.navigation_holder, .header_holder { background-color: #ffffff; }
/* Makes social icons a light grey */
#header_social_icons .circle { color: #ffffff; background-color: #e4e4e4; }
/* Navigation - Changes Navigation Link Color */
.navigation_holder a , ul.topnav .menu-button { color: #666666 !important; }
.navigation_holder ul li ul li a { color: #ffffff !important; }

/* Background - Remove BG Image and Make BG Color White */
body.custom-background { background-image: none; background-color: #ffffff; }

/* Remove Shadow Around Content Box and Widgets */
#main, .widget { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }

/* Remove Padding Around Beat Store */
.page-template-archive-download-php #main, .tax-genre #main, .tax-download_category #main, .tax-download_tag #main, .post-type-archive-download #main { padding: 0px;}
/* Extend the Width of the Beat Store */
.page-template-archive-download-php .leftside, .tax-genre .leftside, .tax-download_category .leftside, .tax-download_tag .leftside, .post-type-archive-download .leftside { width: 620px; }

/* Increase Beat Store Playlist Height */
.mejs-playlist { height: 800px !important; }

/* Footer - Remove BG color and change link colors */
#footer_sub, .widget_holder_sub, #footer { color: #666666!important; background: #ffffff !important;}
#footer_sub a, #footer h3, #footer .widgets { color: #666666 !important;}
#footer #widget_recent_post li, #footer #widget_new_beats li { border-bottom-color: #cccccc; }


4. CSS Tips & Tricks

Here is CSS code for the homepage banner.  Tutorial: How to add custom CSS

Click the tabs below:

Change the white color ( #ffffff ) to whatever color you like. You can use the color picker at colorpicker.com to get the color your want.

/* Homepage Banner Text Color */
/* Headline */ #home_banner_container h2 { color: #ffffff; }
/* Subtext */ #home_banner_container h3 { color: #ffffff; }
The code below will allow you to either show or hide the dots that appear on the homepage banner.

home-banner

Show Dots

/* Show Banner Dots */
.fader .pager_list { display: block; }

Hide Dots

/* Hide Banner Dots */
.fader .pager_list { display: none; }
Here is the code to hide the homepage banner on mobile devices. The code below will hide the homepage banner on screens below 500 pixels. If you want to change that number, just edit the 500.

/* Hide Homepage Banner on Mobile */
@media (max-width: 500px)  { #home_banner_container { display: none; } }

5. FAQs

Can I change the banner image size?
No, not really. But check out the full-width banner CSS code in the tips and tricks below. That is the only available option.

How to I reorder the banners?
Change the banner published dates. The most recent banners should show first.

Can I make the homepage banner a video or Flash?
No. These options are not available.

Can I use another banner carousel script or plugin?
No, this option is not built into the theme.

Are there any other banner animation options available?
Unfortunately no.


Common Problems

1. Homepage Banner Won't Display

  • Make sure you selected the Show banners on the homepage  in Customize > General > Banners
  • Make sure you have published your homepage banners.
  • If you recently updated the theme, clear your browser cache.
  • If those don't help, check out How to Troubleshoot Problems

2. Missing a information box on the add new banner page?

Visit: Using the Screen Options Tab


Known Bug

Incorrect linking of first banner:
There is a bug that if you are linking multiple homepage banners, the first time your site loads, the first banner will have the wrong link.
Once all the banners play, the first banner will have the correct link.
There is no fix for this issue, so it is suggested to NOT add a link to the first homepage banner.
Also, I would not panic about this matter. The first banner only appears for 6 seconds.
The average visitor will scroll down your home page and look around before clicking anything.

Related Articles
Last updated on August 19th, 2017

4 Comments

  1. Benjamin

    How can I slow down the banner rotation? I didn’t found an option to change this. Because it’s too fast in my opinion ….

    1. Mark

      If you would like to change the time you want to edit the the jquery.easyfader.js file in the JS folder in the musicmaker theme folder.

      You want to look for the code slideDur: 7000,

      7000 is 7 seconds. So change it to the number you want.

      Please note these changes will be overwritten with future updates.

    1. Mark

      Hi

      You can use some CSS like this

      #Fader h2 { top: 110px !important; left: 30px !important; }
      #Fader h3 { top: 180px !important; left: 30px !important; }

      Please note this may cause problems with the responsive CSS. ​​​​​​

      Change the numbers to the numbers you desire. ​​

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.