Adding Custom Rotating Banner Ads
To add a rotating banner to the site, we offer 3 types of banner sizes for the different types of places a banner displays (eg: sidebar, homepage, footer, header, content, etc..)
Available Banner Types
- Bootstrap Theme - Banner - 250_250 Rotating
(Recommended for Sidebars) - Bootstrap Theme - Banner - 300_250 Rotating
(Recommended for Sidebars, Header and Footer) - Bootstrap Theme - Banner - 970_90 Rotating
(Recommended for Header and Footer)
Displaying Banner Ads
Make sure that the Banner Ads are enabled on the website:
Adding Rotating Banners
To add a banner through a sidebar on a page of the site, follow these steps:
1. Go to Toolbox -> Sidebar Manager
2. Select the sidebar to modify, this will depend on the page that is going to display the rotating banner.
In this example, add the banner to the sidebar of the member search result pages, so "Edit" the Member Search Results sidebar:
3. On the Available Widgets search box, type "rotating".
Drag and drop the rotating banner ad widget(s) into the right hand column:
Save the Sidebar changes.
Editing a Rotating Banner
What we need to do now is add the images that will be used in the rotating banner and the URL they should point to if a user clicks on them.
Go to Toolbox -> Widget Manager and search for the rotating banner we used on our sidebar.
Meaning if we used the Bootstrap Theme - Banner - 250_250 Rotating widget on the sidebar, search for this one and click on "Customize":
There are 3 parts that can be updated within the rotating banner ad widgets:
1. 3000. This is the time in milliseconds (3 seconds), that will pass before changing from one image to the next.
2. href="#" code where we would put the URL the image will point to.
The href="#" would change to href="https://www.google.com" if that banner points to Google
3. src="//placehold.." points to the image that will be shown on that specific part of the rotating banner. In this case, it would be the first image of the rotating banner.
Selecting Images For the Banner
To add the images to the rotating banner go to the > Media Manager
Right click on the image and select "Copy URL", this will open the URL of the image/file:
Adding and Removing Images
With the relative image path go back to the banner add widget and edit the img src="IMAGEs/URL" section like this:
The code by default comes with 4 links for images, which means we would use 4 images for this specific banner.
It's possible to add more images (no limit) to the banner or remove some if it needs less.
Change the CSS of this widget by editing the code in the CSS Tab for it. Inside the CSS tab change the size, background color and more.
For adding and removing additional images from the rotating banner widget, simply add the following code for each additional banner:
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/00fffa?text=Banner+1" alt="Banner 1"></a>
</div>
This would add one more banner to the total.
Now, if you wanted to remove an image, simply remove the whole DIV html element which includes the anchor (a element) and image (img element).
So in our example above, if you had 5 banner images, the code would look like this:
<div id="carousel-example-generic" class="carousel slide bannerContainer970x90 visible-lg" data-ride="carousel" data-interval="3000">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="http://placehold.it/970x90/000000/00fffa?text=Banner+1" alt="Banner 1"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+2" alt="Banner 2"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+3" alt="Banner 3"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/07ea1d?text=Banner+4" alt="Banner 4"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ffffff?text=Banner+5" alt="Banner 5"></a>
</div>
</div>
</div>
<div class="clearfix clearfix-lg"></div>
And if we deleted one image from the banner list, it would look like:
<div id="carousel-example-generic" class="carousel slide bannerContainer970x90 visible-lg" data-ride="carousel" data-interval="3000">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="http://placehold.it/970x90/000000/00fffa?text=Banner+1" alt="Banner 1"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+2" alt="Banner 2"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+3" alt="Banner 3"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/07ea1d?text=Banner+4" alt="Banner 4"></a>
</div>
</div>
</div>
<div class="clearfix clearfix-lg"></div>
If we deleted one more banner image, it would show like this:
<div id="carousel-example-generic" class="carousel slide bannerContainer970x90 visible-lg" data-ride="carousel" data-interval="3000">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="#"><img src="http://placehold.it/970x90/000000/00fffa?text=Banner+1" alt="Banner 1"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+2" alt="Banner 2"></a>
</div>
<div class="item">
<a href="#"><img src="http://placehold.it/970x90/000000/ff0000?text=Banner+3" alt="Banner 3"></a>
</div>
</div>
</div>
<div class="clearfix clearfix-lg"></div>
Adding a Rotating Banner to the Footer of the Website
To use the banner in another place, like the Footer of a page, customize the Bootstrap Theme - Footer widget and then add on the first line of the widget the following short-code:
[widget=Bootstrap Theme - Banner - 250_250 Rotating]
This will add the Rotating Banner to the Footer Banner.
