Changing Background of Weebly Site Template (+ Other Useful Things You'd Like to Know)
I've been asked to make a tutorial on how to make a custom Weebly template, so here it is. It won't teach you how to make a completely custom template of course, because to do it you need to know CSS and I can't teach you that because I don't know it very well myself. However, it'll teach you how to change the background on most of Weebly templates, which will make your website be different from any others and look prettier.
This tutorial is suitable for any browser, both on Windows and Mac. To make it, I used Google Chrome on Mac computer. If you have Windows, some tools and buttons may look a bit different. Message me if you don't understand something or have any questions. Click on the images to enlarge.
This tutorial is suitable for any browser, both on Windows and Mac. To make it, I used Google Chrome on Mac computer. If you have Windows, some tools and buttons may look a bit different. Message me if you don't understand something or have any questions. Click on the images to enlarge.
1. Let's start with opening Weebly and clicking Edit Site. On the top you see five tabs - Elements, Design, Pages, Editors and Settings. Elements, Pages and Editors is all about your site's content, you're going to start using it once you need to fill in the site. You don't need it now. Open Settings and see what you can do there.
As you can see, you can change quite some things there, they aren't very important but depending on what you change, your site will look different. I prefer the site title not to show up, so I remove the tick from Show site title on the top of your pages.
2. Now, click the Design tab. Here you'll see All Themes link on the left. Click it to browse site templates.
2. Now, click the Design tab. Here you'll see All Themes link on the left. Click it to browse site templates.
Try to choose the template where you can see the actual background (the one you're going to change later). I've chosen Intense Simplicity, which looks like this:
When you've chosen the template, click Preview Theme and then Use Theme. Now, on the right you'll see the Edit HTML / CSS link.
3. Click the link. Welcome to HTML / CSS editor! Now, let me show you what you can do there.
You can switch between CSS and HTML. I don't think it's necessary to describe them and what's the difference between them, although you can google it if you'd like to know. I'm going to show you how to work with CSS, because in my opinion it's easier (1). If you click on Add new file(s) link, you'll be able to to upload new files. What are they for you'll learn below (2). Here are also all the files that compose the template. You can upload new ones, remove old ones or learn more about them (3). The main work space is black, it's where you can edit, add or remove the CSS code (4). In preview window you can see how your site changes
You can switch between CSS and HTML. I don't think it's necessary to describe them and what's the difference between them, although you can google it if you'd like to know. I'm going to show you how to work with CSS, because in my opinion it's easier (1). If you click on Add new file(s) link, you'll be able to to upload new files. What are they for you'll learn below (2). Here are also all the files that compose the template. You can upload new ones, remove old ones or learn more about them (3). The main work space is black, it's where you can edit, add or remove the CSS code (4). In preview window you can see how your site changes
4. Look at CSS code. Here you need to find where you can change the background. What you need to know, is that the whole site look is usually called "body" and the space where the text is usually is called "container". Try to find the code for "body".
Now, when you made sure you've found where to change the background, click Add new file(s) and upload your own background.
 |
 |
When your background is uploaded, it'll appear in the list of files that are already there. Click on it's name to learn more information and change it's name (change it to something easy so you can easily type it in the code later).
 |
 |
Go back to the code now. In "body", look at "background" line there. Type your background's name (including file type, for example .jpg or .png) instead of old background's name.
Look at the preview window now. Here's how the site looks now, if you've done everything's right.
5. As you can see, the background repeats only horizontally. To change it, look at the CSS code again. After your backgrounds name, there's written how you want it to repeat. If you want it to repeat only horizontally, you should type "repeat-x", if you want it to repeat only vertically, you should type "repeat-y". I want my background to repeat both horizontally and vertically, so I just type "repeat". Depending on your background, you can play with these properties. By the way, the number before our background's name is the number of certain color, so you can make your background any color without uploading a background.
Look at the preview window. This is how your site looks now!
6. The last step - save your new custom template by clicking orange Save button in the top right corner.
- Paulina
