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 html code

Select your page layout on the left. Scroll down and add the following code underneath the banner wrapper as shown below in orange.

<div class="banner-wrap wsite-background" >
<div id="top-main-wrap">  
<div class="container1">
{top:content  global="false"} 
</div>
</div>
</div>

Note: If you have already added "{top:content  global="false"}" to your Weebly site from another tutorial, it is an absolute imperative that you add a number to it to make it an autonomous editing area. You would add a number as shown below in orange.

{top10:content  global="false"} 

Note: If your website uses more than one page layout, you will need to perform this step for each page layout your site uses.

---

Step 3. Add css code

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

Note: If your website has a header (i.e., banner) that extends the entire width of your screen like this theme does, you'll need to add the orange code to the code below.

#top-main-wrap {
padding-top:50px;
padding-left:20px;
width: 960px!important;
margin: 0 auto;
}

#top-main-wrap .container1 {
width:250px;
height:250px!important
}

#top-main-wrap img  {
border:1px solid #ccc!important;
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17)!important;
}

Click save.

---

Step 4. Drag and Drop the image element

Drag and drop the image element into the header. You'll then be able to upload your profile picture. Recommended profile picture dimensions are 250x275, but similar dimensions will also work.

---

Step 5. [if need be] adjust content margin

If after uploading your profile picture, you notice the body content is too close to the profile picture, you can either add the "spacer element" [you'll have to do this for every page with the profile picture], or you can adjust the top margin of the content [one time solution].

The div below the profile picture for this theme is the "content-wrapper". Yours may be a little different. Just check in the html file from Step 2. to be sure. 

All we did was add the orange coding to the code below which should already exist in your css file from Step 3.

#content-wrapper {
width: 960px;
margin: auto;
margin-top: 40px;
}

---

You're done! 
Publish your site to see your new profile picture!

---

comments powered by Disqus