Customizing the Icons in Your Image Carousel in BaseKit

As of June 19, 2013, BaseKit is not available on new Shared accounts; however, Weebly Web Builder is offered as a replacement.


You can change the icons in your image carousel in BaseKit. While it requires a bit of knowledge in CSS, it can be the finishing touch that makes your site pop.

Getting Custom Icons

The first step to customizing the icons on your image carousel is to have some icons. You can either create the icons yourself, or you can download them from the internet. To start, try searching Google for "free icons."

The default size of the icons in the carousel is 48 x 48. While it is possible to use a different size, it is recommended that you maintain this size for best results.

Using Custom Icons

In order to apply the custom icons, you will first need to upload them to your BaseKit website. Once the images are uploaded:

  1. Get the URL of the image.
    1. Select the image in the Media tab.
    2. Click the Show the image url icon.
    3. Copy the URL to your clipboard.
  2. Add a carousel widget to your page.
    1. In the Widgets tab, click and expand the Content menu.
    2. Drag and drop the Carousel widget to your page.
  3. Double click on the widget, or single click and select the gear icon.
  4. Select the CSS tab in the settings drawer at the bottom of the page.
  5. Use the following code, replacing [URL GOES HERE] with the URL of the image you copied earlier.
    .widget-carousel-previous
    {
    background-image:url('URL-GOES-HERE')
    }
    .widget-carousel-next
    {
    background-image:url('URL-GOES-HERE')
    }

Troubleshooting

If your custom images are not showing correctly, you may wish to check for these common errors:

  • Ensure that you have made an exact copy of the example above by replacing the URL with the URL of your image
  • Make sure the URL is still enclosed in single quotes (apostrophes)
  • Ensure you have a complete URL including the http://
  • Make sure that there are no spaces before, after or in the middle of the URL
  • Check that the curly brackets ( { and } ) have not been removed
  • Make sure you only have one copy of the code above