Multiply: 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.
    1. Making a Banner with your PhotoAnimate your BannerHow to Personalize Footer

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!

Source: http://multiplythemes.com/tutorials/step-by-step-guide-on-making-your-own-theme-1324/comment-page-15/#comment-2440

One thought on “Multiply: Step-by-Step Guide on Making your Own Theme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s