Ok, following are some instructions to customize the dots location. Keep in mind, the X3 slideshow is based on another plugin (which we may replace in the future), and this customization is basically a "hack". One thing to note, is that this slideshow generates its HEIGHT from the slideshow area PLUS the dots navigation area ... Since we are moving the dots "UP", the slideshow will basically takes 30 px LESS than 100% (or whatever height you set).
Add the following code to Settings > Custom > Custom CSS:
.fotorama__nav--dots {
text-align: left;
top: -30px;
left: 10px;
}
If you want to change the color of the dots like in my screenshot below, also include this:
.fotorama__dot {
border: 1px solid white;
}
Feel free to adjust the top, left and border color values.
Full CSS code would be:
.fotorama__nav--dots {
text-align: left;
top: -30px;
left: 10px;
}
.fotorama__dot {
border: 1px solid white;
}