Sundarbans Gallery: design

Showing posts with label design. Show all posts

Wednesday, July 6, 2011

How to solve CSS errors in Blogger template using Firebug

Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS .
Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website : http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom of browser window .

Click on the arrow button in firebug window

After click this button ,there will be a rectangle around the element that the mouse is pointing . Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .

You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^

Tuesday, July 5, 2011

31 online CSS Cheatsheets that help

Believe it or not ,most of modifications in default Blogger templates that I did were CSS only . And the result are custom templates you see in SimplexDesign blog .Understanding CSS ,even a little can help you in changing elements in website/blog as you want .Changing in Font size,colors ,size of elements ,positions of elements... all of them are CSS ^^
But how can we remember all of them ,we are not developer and we have no time to do this . So here are 30 CSS cheatsheets ,that you can use for reference ,anytime you want to know about an attribute ,what they mean ,and the role of them ...
I hope this helpful to you
This information was found on this site ,and you can go there to get the original post and more interesting posts
This article is divided in 2 major Sections:

1,Most Practical CSS Cheat Sheet Yet

More Information on Most Practical CSS Cheat Sheet Yet

CSS Cheatsheets

20,CSS3 Cheatsheets

CSS3 Click Chart

More Information on CSS3 Click Chart

21,CSS3 Help Sheet.

More Information on CSS3 Help Sheet.

22,CSS 3 selector syntax

More Information on CSS 3 selector syntax

23,CSS3 Quick Reference Guide

More Information on CSS3 Quick Reference Guide

24,CSS 3 Cheat Sheet

More Information on CSS 3 Cheat Sheet

25,WebKit CSS3 Cheat Sheet

More Information on WebKit CSS3 Cheat Sheet

26,CSS3 Color Names

More Information on CSS3 Color Names

27,HTML5 and CSS 3 Cheat Sheets

More Information on HTML5 and CSS 3 Cheat Sheets

28,HTML5 & CSS3 Support

More Information on HTML5 & CSS3 Support

29,CSS 3 cheat sheet

More Information on CSS 3 cheat sheet

30,Compatibility tables for support of CSS3

More Information on Compatibility tables for support of CSS3

31,CSS3 – Information and samples

More Information on CSS3 – Information and samples

(Source : http://slodive.com/freebies/css-cheat-sheets/ )

Monday, July 4, 2011

Nature business card template for free

I took an eye surgery two weeks ago and now I think my eyes are good enough to use computer again . Now is the time for me to answering comments and post something new after a long delay ^^
Thanks for still coming in my blog and keep supporting me in this time .

In this post ,I want to show you a freebie,a beautiful nature business card template in psd (Photoshop file format ) , just need some changes in name ,address... and it's ready to use

Designed by iBrandstudio ,this free business card is have very beautiful nature background with the atmosphere in the afternoon when the sun goes down. Come with double sided template with 3.5″x2″ in business card size, ready for print and highly customizable. The business card design that perfect for anyone.

You can use this business card template for free, both your personal and commercial project but do not redistribute or resell.

Features

Beautiful nature design
Highly customizable – Layered PSD and well organized
Ready for print with bleed lines and trim guidelines

Details

Date created : July 3, 2011
Font used : Arial and Lobster 1.4
Size : 3.5”x2”
Color : CMYK

Preview

free beautiful nature business card template

Download

Have fun with it !

Monday, July 19, 2010

Adding counter to sequential list using Jquery

In my design work ,I have to create sequential lists ,for example ,a list of blog comments ,lists of users ... adding counter to these lists will make it look better but sometime it's hard to do manually . I find out a solution from webdesignerwall.com ,using jquery to add numbers to the list .

Live Demo
Here is detail instruction :
1,First,we need CSS code to decorating numbers

/* number style */
#commentlist {
 margin: 10px 0 40px;
 padding: 0;
}
#commentlist li {
 padding: 10px 0 20px;
 list-style: none;
 border-top: solid 1px #ccc;
 position: relative;
}
#commentlist cite {
 font: bold 140%/110% Arial, Helvetica, sans-serif;
 color: #666;
}
#commentlist .time {
 color: #ccc;
 margin: 0 0 10px;
}
#commentlist .commentnumber {
 position: absolute;
 right: 0;
 top: 8px;
 font: normal 200%/100% Georgia, "Times New Roman", Times, serif;
 color: #ccc;

2,Add this Jquery code anywhere in template or HTML file :
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#commentlist li").each(function (i) {
    i = i+1;
    $(this).prepend('<span class="commentnumber"> #' i '</span>');
   });

});
</script>
This code will find all <li> elements covered under element which has id="commentlist" , and insert <span class="commentnumber"> #' i '</span> into each <li>.......</li>
so we get the result after adding code:
here is original HTML code
<ol id="commentlist">

    <li>
        ............
    </li>
    <li>
        ...................
    </li>
    <li>
        .................
    </li>
</ol>
and here is the code after adding numbers
<ol id="commentlist">

    <li>
<span class="commentnumber"> #1</span>
        ............
    </li>
    <li>
<span class="commentnumber"> #2</span>
        ...................
    </li>
    <li>
<span class="commentnumber"> #3</span>
        .................
    </li>
................
</ol>
That's all . Thanks for reading and I hope you find it useful

Thursday, April 15, 2010

E-commerce Icons for web design

In web design , finding icons and other resource for designing is a necessary task.We got icons for website ,for RSS ,and now ,icon sets for E-Commerce .This is the list of high-quality icon sets that I found on Webdesignledger ,and I want to re-post it here for you all because I think it maybe helpful . Enjoy it ^^