Tutorial Stats
How To Add A Border To All Images On Your Weebly Site At Once
Tutorial Description
This tutorial will show you how to add a border to all images, on your Weebly site, at once. Even images that are uploaded after you install the border coding from this tutorial, will automatically have the border you create. You can also choose which images you'd like the border to be applied to.
SHOW MORE
Tutorial
Step 1. Select "Hairline" in image options
This step is crucial as it will determine which images on your site will have the border you will apply in the following steps of this tutorial.
Click on your image, then click Advanced>Border>Hairline.
In order for an image to carry your customized border, you'll need to have "Hairline" selected at a minimum. By choosing "Thin, Medium, or Thick", you'll increase the amount of space between the border and image which is a customization you may wish to apply.
Click on your image, then click Advanced>Border>Hairline.
In order for an image to carry your customized border, you'll need to have "Hairline" selected at a minimum. By choosing "Thin, Medium, or Thick", you'll increase the amount of space between the border and image which is a customization you may wish to apply.
Step 2. Open the html/css editor
Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.
Step 3. add border code
On the left, select "main_style.css" and scroll down to the code below [this code is usually at the top of the css file's page]. Now add the border code to the code below as shown in orange.
a img {
border:4px solid #87c042!important;
}
a img {
border:4px solid #87c042!important;
}
Step 4. Customizing the border code to your liking
The orange border code given above is congruent with the demo site used for this tutorial -- you will likely want to tailor this code for your own site. To customize the border code to your liking, alter the orange text as indicated below.
- To change the border thickness: border:4px solid #87c042!important;
- To change the border style: border:4px solid #87c042!important;
- To change the border color: border:4px solid #87c042!important;
You're done!
Publish your site to see the border on your site's images
Tips & additional information
If you don't want just a solid border for your site's images, you can find more border styles for the coding above here.
If you want the border to be a specific color, but aren't sure how to obtain that color (i.e., hex code), you can download tools to help you figure out the color (i.e., hex code) you want to employ.
If you want the border to be a specific color, but aren't sure how to obtain that color (i.e., hex code), you can download tools to help you figure out the color (i.e., hex code) you want to employ.
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
