How to Center Align Thumbnails in Weebly's Slideshow

I've just started using Weebly. I've used a hell of a lot of other CMS's, and I realize that each has their ups and downs (to be discussed in another blog).

Weebly's downside is that it's not flexible in regards to fine-tuning design. It's strength is that the UI is simple and paired down for clients that don't want to spend a lot of time learning the nuances of how to update their site.

Right now I'm doing a site for an artist, and she wanted to get the site up and running with only a few of her stronger pieces (6 for each gallery). She also wanted the thumbnails on the bottom.

The Problem: By default, when using a slideshow with the thumbnails on the bottom, they are pushed to the left, as in this screenshot. When there are enough thumbnails to cover the space, it doesn't look strange, but when there are only a few, it looks... well just plain weird.

The Solution: The class that holds the thumbnails is called .wslide-links-inner, the CSS is not accessible through the CMS (it's called slideshow.css).

The solution, is to add that class to our main-style.css stylesheet that IS accessible to us.

If the following code is added to that stylesheet, it will center SIX, I repeat SIX images.

.wslide-links-inner {
    width: 445px;
    position: static !important;
    margin: 0px auto;
}

1. We need to use the !important element to override that the position is relative in slideshow.css
2. The margin centers the slides on the page, but, this will not work unless we...
3. Give that class a width

What's the deal with the width?:
We need to define the width according to the number of thumbnails that we want to show
(and we need to use a little math).
The thumbnails are set to be 70px wide, and the padding between them is 5px.
Here's the math:
(number of thumbs x 70px) + (number of thumbnails - 1 x 5px).

So, if I want 4 thumbnails:

4 x 70px = 280px

4 - 1 x 5px = 15px

_______________

Total: 295px

The reason we need to subtract 1, is that we are only accounting for the padding between the thumbs.
(The other way to do this is to just count out the spaces between the thumbs and then multiply by 5px).

Our final product looks like this:

NOTE: this will break the javascript that allows the thumbnails to move. So if you have enough thumbnails to fill your row (plus some), you will need to eliminate this CSS from your stylesheet.

I really hope that this helps!