Outdated: Homepage Banners

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

• Text PSD
• Banner BG Place Holder ( 2000 x 500 )

Tutorial: How to add custom CSS.

Watch Video to Avoid Issues

/* Wide Banner Image BG */
#home_banner_container {
background-image: url("https://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; }

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.

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

• 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

Visit: Using the Screen Options Tab