test

theme proposal

No more waiting guys!. I named it 'proposal' hence I think this theme is highly appropriate to introduce yourself or your business to the world. That is why no sidebar in place to gain more whitespace. So let your readers got amazed by your images. A picture is worth a thousand words... do you believe this?

In order to achieve what you see from my demo blog, please read the instructions below.

Somethings to know when using this template

1. Changing the main background image. I use an image with size 1280x800 which I think the quality and resolution are still acceptable for bigger screen. Keep in mind your loading time will be longer when using bigger image. Find;
   
   <div class='bg'> and replace the image link with yours.
   
   
2. Configuring main menu. The top menu is not a widget. It uses ordinary list, so that you can change/add/remove it from the list. Use your own word and replace '#' with your link. Find;
   
   <div id='menu'> and you will see the list.
   
   
3. Placing ads. To put an advertisement at the bottom of the blog, find this code;
   

   <div id='ad125'>
   <a href='#'>125x125</a>
   <a href='#'>125x125</a>
   <a href='#' style='margin-right:0;'>125x125</a>
   </div>
   

   
   Replace '#' with intended link and '125x125' with a square 125px image. It should be like this;
   

   <a href='http://youradURL'><img src='http://yourimageURL' alt='' /></a>
   

   
   
4. Hiding the comment form. For this template, I prefer not showing the box. And the link to the comment form has been replaced with arrow image. So, set the comment form as 'Pop-up window'.
   
   
   

   UPDATE 12/10: If you prefer not hiding it, find [ .comment-form ] in the CSS section and replace with the code below;

   .comment-form {
       width: 488px;
       max-width: 488px;
       padding-left: 20px;
   }
   
   h4#comment-post-message {
       margin-left: 0;
   }
   

Somethings to know when writing a post

Uploading image. From my demo blog, several images have been used for each post. There is an image next to the post title, another image to replace main background, and also few images on the very left from the article.

If you've never used HTML mode to write a post, after uploading an image, switch to Edit HTML to see code similar to this;

<div class="separator" style="clear: both; text-align: center;">
<a href="http://blablablabla" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="125" width="125" src="http://blablablabla" /></a></div>

1. Image next to the post title. This image should be at the beginning of your post before text. You can use any image which size not less than 120x90. Whenever after you upload the image, change the class and remove all inline styles from the code above to be like this;
   

   <div class="stamp-image">
   <a href="http://blablablabla"><img src="http://blablablabla" /></a></div>
   

   
   
2. Multiple background image. Besides resizable background, another focal feature for this template is its ability to switch the background image. You can define an unique background according to what your article is about. There is no script behind this except a simple jQuery to give 'fade' effect. So, how?. Upload another image (same size with your main background) at the end of your post. While in the post editor, right click on the image and choose 'original size'. Then, switch to Edit HTML and start working with the code again.
   

   <div class="bg">
   <img class="fade" src="http://blablablabla" />
   </div>
   

   
   
3. Image on the left of your article. You will do the same way as before. However, you should carefully locate the image within your article to avoid touching the post title, blog pager, or another image before it. Also you should always use image with ratio 4:3 (landscape) and 3:4 (portrait).
   
   #For lanscape
   

   <div class="post-image">
   <a href="http://blablablabla"><img src="http://blablablabla" /></a></div>
   

   
   #For portrait
   

   <div class="post-image2">
   <a href="http://blablablabla"><img src="http://blablablabla" /></a></div>
   

   
   

UPDATE 12/10: There is dotted border under each image inside post body. Please include this code in your CSS;

.post-body .separator a {
    border: none;
}

So, spend your time to try it out. This theme is free for personal use and please keep the credit link intact.

This entry was posted in