Step 1. Open the html/css editor

Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 2. add css coding

Click on "main-style.css" on the left and add the code below to the file.

/* Caption Styling
-------------------------------------------------------- */

.wsite-image div, .wsite-caption {
    margin-top: -45px!important; /* caption distance from top */
    padding: 0 0 20px 20px!important;
    text-align: left!important; /* caption alignment */
    color: #fff!important; /* caption color */
    font-family: 'Bebas'!important; /* caption font */
    font-size: 2em!important; /* caption font size */
    word-spacing: 5px!important; /* spacing between caption words */
    text-shadow: 2px 2px #000!important; /* caption text shadow */
}

#icontent .wsite-image div, .wsite-caption {
    margin-top: inherit!important;
    padding: inherit!important;
    text-align: inherit!important;
    color:inherit!important;
    font-family: inherit!important;
    font-size: inherit!important;
    word-spacing: inherit!important;
    text-shadow: inherit!important;
}

Note: The captions will only change on a published site. The changes from the code above can not be seen in the Weebly Editor.

---

You're done! 
Publish your site to see your image's new caption styling

---

comments powered by Disqus