Productivedreams.com ProductiveDreams - Everything that web designers need, owned by Gopal Raju

A blog to keep you updated on the latest design trends.
RSS

Merry X’mas: Free Twitter Theme

Filed Under
14 Dec 2008
I am glad to present my readers with a Christmas gift – A Free Twitter Theme. I’ve included the (PNG) fireworks source file of the Santa as well, in the zip.

Click on the image below, for preview.

Free Christmas Twitter Theme

How to use this theme?

Step1: Log in to your twitter account and click the ’settings’ link on the top right.

step1

Step 2: Now, you are in the settings page. Click the ‘design’ tab where in you could see a browse button that allows you to upload the background image. Upload the xmas.jpg file(included in the zip). Uncheck the ’tile background’ option.

step2a

step2b

Step 3: Click the ‘Change design colors’ tab. Here you can change the text color, background color, link color etc. The image below shows the settings that I recommend.

step3

And finally, here goes the file. Enjoy!

Download Merry X'mas Free Twitter Theme Version 1.0
31 Comments

Trend Review: Clip ‘n’ Paper

Filed Under
07 Dec 2008
When two people use the same style it’s copy, but when many use it’s called a trend. It’s too long since I reviewed a trend. So here it goes – ‘Clip n Paper’. This is another common element that I’ve noticed in many websites. Normally websites with this element look grungy, but there are a few clean sites as well, in the list.

1. Amuki

amuki

2. Auchtertool Kirk

auchtertool

3. Blurb

blurb

4. Brian Wilkins

brianwilkins

5. Concept7

concept7

6. Deadfall Camoflage

deadfallcamo

7. Dreamling

dreamling

8. DrSoft


9. Eko Udruga

ekoudruga

10. Ethem Budak

ethembudak

11. Jeremy Thomas

jeremythomas

12. Josh Buckley

joshbuckley

13. Sako Karalekian

karalekian

14. Marco Kuttkat

kuttkat

15. Medics Away

medicsaway

16. Membran Ventile

membran

17. Onskelista

onskelista

18. Plej

plej

19. Prolong

prolong

20. PSD CSS Pro

psdcsspro

21. Revolution Driving Tuition

revolutiondrivingtuition

22. Simply Fired

simplyfired

23. Spoon Graphics

spoongraphics

24. Team Green Online

teamgreenonline

25. Totally Her

totallyher

26. Eton Digital

etondigital

27. Level9 Design

Level9 Design

28. Olly Hite

ollyhite

29. Web Notes

webnotes

30. Works4Sure

works4sure

31. Black Wave Creative

blackwavecreative

32. Shawn Johnston

shawnjohnston
6 Comments

IE not interpreting text-indent on submit buttons ?

Filed Under
02 Dec 2008
I’ve worked on many projects where in I had to style the form/input buttons using custom background images. That is, I had to hide the default text of the button. It’s not a big deal, I know. But it is, when it comes to IE. Let’s review this in detail.

The following image(button background) has been used for this tutorial. You may right click and save it.

Sample Image

1: HTML Code

Create a HTML page and insert a button with a class, “button”.
HTML
01
02
<html>

03
<head>

04
<title>ProductiveDreams</title>

05
<link href=”style.css” rel=”stylesheet” type=”text/css”/>

06
</head>

07
<body>

08
<input type=”submit” value=”Submit” class=”button”>

09
</body>

10
</html>

11


2: Style Sheet

I included the following in my stylesheet.
CSS
01
02
input.button {

03
width:114px;

04
height:37px;

05
border: none;

06
background: transparent url(images/submit_btn.gif) no-repeat center;

07
overflow: hidden;

08
text-indent: -999px;

09
}

10

Fixed width, overflow:hidden and negative text indent will hide the text of any button. This works well in all browsers except IE.
3: The Problem

The image below shows how IE displays the button.

IE Issue

You can see the black text within the button which looks odd.
4: IE Fix

So finally, here goes the three line CSS code that does the work for you.
Modify your CSS as shown below.
CSS
01
02
input.button{

03
width:114px;

04
height:37px;

05
border: none;

06
background: transparent url(images/submit_btn.gif) no-repeat center;

07
overflow: hidden;

08
text-indent: -999px;

09
 
10
font-size: 0;

11
display:block;

12
line-height: 0;

13
}


5: How it works

Let's see how it works.

font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.

display:block Negative text-indent works in IE only if this is added.

line-height: 0 Another fix for IE6.

I have included the sample files for your reference.

Download IE text-indent issue Version 1.0
				


				

				  88 Comments				

				
			


		
			

			
			
			

				
				

					
					WildDreams – Another free wordpress theme!					
				

				
				
				

				Filed Under 
								
				

				
				
				

   					23
   					Nov 2008
 				

				
			

			
				
				

				

					
Hope all of you loved my first wordpress theme – BlakMagik. I am glad to release my second FREE wordpress theme – WildDreams. The theme has a wild feel and is based on 2 columns. The psd source file of the logo and header background has also been included with the package. Feel free to change the logo and header with yours. This theme can be used for any projects but it’s forbidden to sell or redistribute. Please link to this article if you would like to spread the word.
I’ve tested this in Firefox (Both Windows and MAC), Safari and IE7. I don’t care about IE6  ;) 

Download WildDreams Version 1.0
Preview


wilddreams
				


				

				  187 Comments				

				
			


		
		
		 
Pages (12) « First « 5  6  7 8 9  10  11 » Last »
 		

	
	

















	



 Copyright 2006-2010 ProductiveDreams. All Rights Reserved. About Gopal Raju. Hosted by MediaTemple