Step-by-Step Guide on Making your Own Theme
We have been receiving comments asking for a step-by-step guide on how to set-up or make your own theme. We have provided several tutorials and this post will simply layout the steps you need to do and direct you to each specific tutorials. Let this be your simple guide to start making your own theme by constructing your own CSS.
-
1. Decide how you want your page to look like. This layout of your page will depend on the Base Themes. The most popular and simple base theme to use and tweak is the Avlack, Sandskrit and Shadow Box. These base themes have the rail body which bears the headshot on the right side while the contents are aligned on the left. RedFrog Base theme have the contents on the right and the rail on the left. If you want an extended wide lay-out, you can settle for Skyline. There are more Base Themes to choose from. You can see how the Base Themes look like in our post Base Themes and their CSS.
-
2. Copy the CSS Codes of the Base Theme that you have chosen. Get the codes in our post Base Themes and their CSS. Open Notepad and paste the Base Code there.
-
3. Have the images you want to work with ready. If you want to make your own banner or personalize your footer, now is the best time to work with it. The following tutorials will help you in doing so:
-
4. Upload the images you have including the image you want for your background in a Image-Hosting site like Photobucket, Multiply, and others.
-
5. Once your images are uploaded on the image hosting site and copy the URL. Use our post on Your Page and CSS Code to know which part of the CSS you need to put the URL of your image.
For example, if you have your banner image’s URL copied, paste it on background part of the specified CSS:
div.owner_nav {background:URL of Banner Image;}
For the Footer Image, paste it on the background part of the specified CSS below:
div#ownedfooter {background:URL of Banner Image;}
For the background of the entire page commonly known as body background, paste it on on the background part of the specified CSS below:
body {background:URL of Banner Image;}
Note: The banner and footer images should have the same dimension to avoid misalignment. If you’re a beginner, have your image follow the dimension of the banner or footer on the Base Theme.
All other tweaking or changes on the CSS, let the post Your Page and CSS Code be your guide.
6. Test and Preview your CSS by installing it on your Multiply Site. Make sure you backup your old CSS before you click Preview or Save.
7. Once satisfied, save the CSS and let it be your basis for your next theme. Enjoy tweaking, more themes to come and we expect to see it here in www.multiplythemes.com!
199 comments June 5th, 2008