To add a rotating banner to your site, we offer 3 types of banner sizes for the different types of places you could use a banner (eg: sidebar, homepage, footer, header, content, etc..)


BANNER TYPES AVAILABLE


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)


(NOTE - you can modify the size and properties of a Rotating Banner by editing their respective CSS code.)



ADDING A ROTATING BANNER TO A SIDEBAR


To add a banner through a sidebar on a page of your site, simply follow this steps:


1. On your backend, go to Toolbox -> Sidebar Manager

2. Select the sidebar you wish to modify. This will depend on the page you wish to edit. For our example, we want to add the banner to the sidebar of our member profile pages, so we would edit the Member Profile Page sidebar.

3. On the Available Widgets search box, type "rotating" so it shows only the rotating banners you wish to use.

4. Pick the one you would like to use and Drag&Drop it on the Member Profile Page Display Order.



5. Now save the Sidebar changes.


You should now have a working rotating banner on your member profile pages.



EDITING AN EXISTING ROTATING BANNER


What we need to do now is add the images we wish to edit and the URL they should point to if a user clicks on them. For this, we would go to Toolbox -> Widget Manager and search for the rotating banner we used on our sidebar. So if we used the Bootstrap Theme - Banner - 250_250 Rotating widget on our sidebar, we would search for this one and click on the customize option to have it on our My Widget list.



The image above shows how the Rotating Banner code would look like when we click on Edit on it, in our My Widget list. Here we see 3 parts we can edit. The smallest circle (Left most), shows our href="#" code where we would put the URL a specific image would point to. So the href="#" would change for example to href="http://www.google.com" if you wanted that banner to point to Google for that specific image of the rotating banner. The next circle (The biggest one), 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.


Lastly, we can see another small circle (Right most) which shows 3000. This is the time in milliseconds (3 seconds), that will pass before changing from one image to the next.



ADDING A ROTATING BANNER TO THE FOOTER OF A PAGE


If course you would like to use the banner in another place, let us say, the Footer of a page, you would customize the Bootstrap Theme - Footer widget and add on the first line the following:


[widget=Bootstrap Theme - Banner - 250_250 Rotating]


This would include the Rotating Banner on your Footer.




ADDING AND REMOVING ROTATING IMAGES FROM THE BANNER


The code by default comes with 4 links for images, which means we would use 4 images for this specific banner. you can add more (No limit) images to the banner if you feel it needs more or remove them if you feel it needs less. You can even go right ahead and change the CSS of this widget by editing the code in the CSS Tab for it where you will be able to change the size, background color and more.


So for our example of adding and removing additional images from our rotating banner widget, we would simply add the following code for each individual banner we would like to add:

 

<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 and you can simply modify the URL (eg: href part of the code) and the image URL to have a new banner working. 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> 

 

So with this, you now know how to include a Rotating Banner on your site, add and remove images from the banner and even set the timer on how fast you wish to rotate them.