XIHA Life provides everyone a free totally customizable web space. But exactly how to change the look? Here's a short tutorial on changing the background image or color of your space. This is one of the first things people want to do when creating their own web sites so this is a good first step!
1. Open the editor. You can find the editor on your own space, which is located at your username.xihalife.com. If you're already logged in, you can get to your space by clicking on your image on the left side of the screen, or your name at the top-right corner.
Once the page is open, you'll see that the top line right below the XIHA Life banner says "All members | My name | Edit". Click on the "Edit" link, the editor will open. Notice that you are not "jumping" to another page, as the editor will load up to the same page, just below the place you just clicked.
2. Once the editor has loaded, you will see a few options: About me, html, css and images. First, let's upload an image; click on the link that says "images". If you wish to use a photo from your album or if you just want to set the background color, you can skip straight to step 4.
3. Click on "Choose File" and pick up an image you wish to upload, then click "Upload". The image gets uploaded and will appear in one of the gray boxes, under which will appear the image's "tag". This is important; remember what it is. If this is your first time uploading images to the space, the tag will be [img1].
Note: there is currently a bug where the image list is not refreshed after uploading. Therefore, after the image has uploaded, reload the web page (F5 on Window, Apple+R on Mac) and open the editor again. The images tab will now display the new image.
4. To adjust the background properties, we need to edit CSS; click on the "css" tab!
5. Your CSS code is in the big text box that opens up. If you didn't edit the CSS of your page before, it probably doesn't have much text in it. Take a look to see if you can see a line of text that says "body". Most likely not. Copy the following piece of text to the text box:
body
{
}
6. Now you have a body tag in your CSS code! This doesn't do much be it allows you to place definitions to the body of your page... such as a background image. Add the following new line between the curly brackets:
body
{
background-image: [img1];
}
7. If you just uploaded an image and the tag was [img1], you're all set! Just click Save below the text box and wait until the status text next to it says "O.K.". Then reload the page (press F5 on Windows, Apple+R on Mac) and the background should be visible!
8. If you wish to use a photo from your album, change img1 to the following: [photo:xxxx] where xxxx is the id of the photo. You will find this id by opening the photo you wish to use and looking at the address line on your web browser. It's the numeric sequence at the end of the address.
Setting the background color
Sometimes it's enough to just set the background color. Even if you use an image, it's a good idea to set the color as the color will be used while the image loads (which can take a few seconds if the image is large). Go back to the CSS editor and add the following to the body tag:
background-color: red;
Click save, and refresh the page. The background will now be red. If you also have the background-image definition in place, the background will first be red and then change to the image right after the image has finished loading.
You can use the names of the common colors as well as RGB codes in the following formats: #RGB and #RRGGBB. RGB stands for Red, Green, Blue and the components are defined in hexadecimal values (0 is the smallest, F is the largest single digit). For example red would be #F00 or #FF0000. This gives you full red and zero other colors. If you wanted yellow, you would add green too: #FF0 / #FFFF00. To make it half the brightness: #770 / #7F7F00.
Naturally, all of the possibilities of HTML and CSS are in use - this is just a small sample to demonstrate how to change the background. More tutorials will follow! Please let me know if you have any questions.
Feel free to experiment with the options. Your space is all yours so you can do anything you want with it. If you make a mistake and can't figure out how to go back, clear the contents of the text box completely and click Save. This will restore the default settings and you can reload the editor and start again... |
!["smiley"]("http://www.xihalife.com/images/smileys/sm02/35h/22.gif"){kind=small}
