step 1. Keep all images the same size

When using Weebly's "Slideshow" element, it's important to use images of the same dimensions (i.e., width and height). This translates into a more professional looking slider as the caption area doesn't extend beyond the width of smaller images.

Remember, the caption area of the "Slideshow" element will take on the width of the largest image you've uploaded.

Note: You can use Photoscape [FREE] to resize all the images you plan to use for your slider, to the same dimensions.

---

Step 2. obtain width of slideshow area

To further compliment Step 1., knowing exactly how wide to make your "Slideshow" images can help make the slider look like it was born with your site.

To do this, identify the specific area you want your slide to fit into. Then right click your mouse on that area, click "Inspect Element", and you should receive the width of the area where you plan to place the slider.

This is the width you will adjust your images to in Photoscape, or most photo editing programs. The height is really personal preference. For this specific tutorial, we have identified our width as 960px.

---

Step 3. Reduce the space above and below the slider

You've uploaded your images, all of which are the same dimensions, and your slider fits perfectly into place, except there is a large amount of space above and below it.

For starters, you can reduce the space a little bit by clicking on the slider, then going to Spacing>Spacing Above & Below>None. This helps a little, but there is still a large amount of space on the top and bottom. Here is where CSS comes in.

We are going to set a specific height to the "SLIDESHOW" element which will remove the excess space above and below. Go to "Design" at the top and click on "Edit HTML/CSS. Then click on "main-style.css" and add the code below to it.

Be sure to change the text in orange to the height of your slider images. The height of the images in this tutorial is 325px.

.wslide {
  font-family: arial;
  font-size: 13px;
  color: #fff;
  cursor: default;
  height: 325px!important;
}

.wslide-content {
  position: relative;
  overflow: hidden;
  height: 325px!important;
}

Before code.

After code.

---

Step 4. adjust the slider controls

If you don't like the current location of the slider's control, you can adjust their distance from the top by changing the text in orange in the codes below. Be sure to keep the number the same if you want uniformity.

Go to "Design" at the top and click on "Edit HTML/CSS. Then click on "main-style.css" and add the codes below to it.

.wslide-overlay-top-left {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding-top: 10px!important;
}

.wslide-overlay-top-right {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding-top: 10px!important;
}

---

Step 5. change text size of caption

You have a nice big slider on your homepage, but your text is so small that the image's message is completely bypassed and overlooked.

To change the size of your caption's text, change the orange text in the code below and then add it to your css file as directed in the previous steps.

.wslide-caption-text {
  position: relative;
  z-index: 2;
  padding: .7em 1em !important;
  line-height: 1.6em;
  text-align: left;
  text-shadow: 0 0 5px #000;
  font-size: 50px!important;
}

Before code.

After code.

---

Step 6. Change caption's location on slider

Maybe you want you caption on the top of your slider instead of the bottom. Well, we can fix that simply by adding the code below to your css file as directed in Step 4.

.wslide-caption-bottom {
  top: 0!important;
  bottom: inherit!important;
}

Before code.

After code.

---

step 7. move caption to the center of the slideshow

Or maybe you don't want your caption on the bottom or top, but rather directly in the middle of your slider. To move your slider caption to the middle of the images, adjust the text in orange in the code below and add it to your css file as directed in Step 4.

.wslide-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  margin-bottom: 10%!important;
  overflow: hidden;
}

---

Step 8. Shorten the caption width

Let's say you don't want your slider's captions to span the entire width of the slider, but just be as long as the amount of text in the caption. Simply adjust value of the width for this code from "100%" to "auto" as shown below in orange. Then add it to your css file as directed in Step 4.

.wslide-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  width: auto!important;
  overflow: hidden;
}

Before code.

After code.

---

Step 9. Change caption's text shadow color

The caption text of the Weebly "SLIDESHOW" element already comes with text shadow, but maybe you want it to blend into your theme's style more by changing the color. You can do this by changing the orange text to your hex color in the code below. Then add the code to your css file as directed in Step 4.

.wslide-caption-text {
  position: relative;
  z-index: 2;
  padding: .7em 1em !important;
  line-height: 1.6em;
  text-align: left;
  text-shadow: 0 0 5px #23e100!important;
}

Before code.

After code.

---

step 10. Make the caption box curved

Let's say you don't like angles and want a little more curvature to the caption area. You can do this by adding and changing the codes as shown below in orange and then adding the code below to your css file as directed in Step 4.

.wslide-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  width: auto!important;
  margin-bottom: 10%!important;
  border-top-right-radius:96px!important;
  border-bottom-right-radius:96px!important;
  overflow: hidden;
}

Before code.

After code.

---

Step 11. isolate and Center the caption box

Maybe you don't want the caption box to touch any sides of the slider and to be centered. You can do this by adding and changing the codes as shown below in orange and then adding the code below to your css file as directed in Step 4.

.wslide-caption {
  position: absolute;
  z-index: 1;
  left: 4%!important; /* Adjust this number depending on your slider's width */
  width: auto!important;
  overflow: hidden;
  margin-bottom: 10%!important;
  border-radius:96px!important; /* Add this for curved borders */
}

Before code.

After code.

---

Step 12. occupy the entire image

Or may you'd like your caption text to be centered and the caption box to occupy the entire space of the images in the slider. You can do this by adding and changing the codes as shown below in orange and then adding the code below to your css file as directed in Step 4.

.wslide-caption {
  padding-bottom: 10%!important; /* Adjust this based on slider's height */
  padding-top: 10%!important; /* Adjust this based on slider's height */
}

.wslide-caption-text {
  position: relative;
  z-index: 2;
  padding: .7em 1em !important;
  line-height: 1.6em;
  text-align: center!important;
  text-shadow: 0 0 5px #000;
}

Before code.

After code.

---

Step 13. Change the font family of the caption's text

Your website's text employs a certain font family as it's your signature font. You can change the font of the caption text by adding the orange code as shown below and adding the code below to your css file as directed in Step 4.

Note: If you need to add a font to Weebly that Weebly doesn't carry, see this tutorial.

.wslide-caption-text {
  position: relative;
  z-index: 2;
  padding: .7em 1em !important;
  line-height: 1.6em;
  font-family: 'News Cycle'!important;
  text-align: center!important;
  text-shadow: 0 0 5px #000;
}

Before code.

After code.

---

Step 14. Capitalize the caption's text

Not only does your site use a specific signature font, but part of that signature is your text is all capitalized. You can do this by simply adding the orange code to the code below and adding the code below to your css file as directed in Step 4.

.wslide-caption-text {
  position: relative;
  z-index: 2;
  padding: .7em 1em !important;
  line-height: 1.6em;
  font-family: 'News Cycle'!important;
  text-transform: uppercase!important;
  text-align: center!important;
  text-shadow: 0 0 5px #000;
}

Before code.

After code.

---

You're done! 
Publish your site to see your new slider caption!

---

comments powered by Disqus