Category Archives: Design

Dead Center DIV

body {
margin: 0px
}

#horizon {
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

#content {
position: absolute;
left: 50%;
width: 250px; /* Overall width of div */
height: 70px; /* Overall height of div */
top: -35px; /* half of the overall height */
margin-left: -125px; /* half of the overall width */
visibility: visible
}

Xcode Color Themes


This is a small collection of my personal preference of color themes for xcode programming environment. For those who are looking for a dark theme. You can chose from one of the following color themes. I’m currently using teliaz theme, it has been tested and works very smoothly.

To get

teliaz theme

run the following code in Terminal:

mkdir -p ~/Library/Application\ Support/Xcode/Color\ Themes; cd ~/Library/Application\ Support/Xcode/Color\ Themes; curl http://teliaz.com/files/apple/TeliazTheme.xccolortheme &> TeliazTheme.xccolortheme

To get

Ego theme

run the following code in Terminal:

mkdir -p ~/Library/Application\ Support/Xcode/Color\ Themes; cd ~/Library/Application\ Support/Xcode/Color\ Themes; curl http://teliaz.com/files/apple/XCodeColorTheme.xccolortheme &> EgoTheme.xccolortheme

“EGO” uses the font “DejaVu Sans Mono” at 12pt. Some of you may know it as “Panic Sans” from Panic’s Coda (which is a repackaged version of it). You can grab the font over at dejavu-fonts.org. If you already have Code installed, feel free to swap in Panic Sans in place of DejaVu Sans Mono.

To get

Humane Theme

run the following code in Terminal:

mkdir -p ~/Library/Application\ Support/Xcode/Color\ Themes; cd ~/Library/Application\ Support/Xcode/Color\ Themes; curl http://teliaz.com/files/apple/Humane.xccolortheme &> Humane.xccolortheme

Now just restart Xcode, go to Preferences > Fonts & Colors, and select “one of these themes” from the color theme drop down. Hope you like it!! Happy coding…

55 + 1 Sources for Web Design Inspiration

Here is the list ….

  1. The Best Designs
  2. Six Shooter Media’s Free Templates
  3. 2Advanced Studios
  4. Andreas Viklund Free Website Templates
  5. Studio7Designs
  6. Style Grind
  7. Open Source Web Design
  8. The Web Design Inspiration Photoset
  9. Most Inspired
  10. Open Source Templates
  11. Templates Box
  12. Smashing Magazine
  13. CSS Beauty
  14. CSS Galleries
  15. Drupal Sites
  16. Open Source Web Templates
  17. CSS Remix
  18. Glenn Wolsey 10 Most Beautiful Blog Designs
  19. CSS Drive
  20. Perfection
  21. CSS Elite
  22. SyleGala
  23. Creative Pakistan
  24. The FWA
  25. CSS Hazard
  26. Beautifully Webdesign
  27. Unmatched Style
  28. CSS Import
  29. Light on Dark
  30. StyleBoost
  31. CSS Bloom
  32. Screen Fluent
  33. CSS Websites
  34. Website Design Awards
  35. 3point7designs
  36. CSS Galaxy
  37. Screenalicio.us
  38. The Dreamer
  39. Style Crunch
  40. CSS Flavor
  41. Inspiration King
  42. CSS Thesis
  43. Web Creme
  44. CSS Zen Garden
  45. CSS Reboot
  46. WebDigity
  47. The Pixel Creativity
  48. Top Wordpess Themes
  49. CSSClip
  50. Deviant Art
  51. 83 Beautiful WordPress Themes (smashing magazine)
  52. Go Drupal
  53. One Pixel Army
  54. CSS Mania
  55. Design Shack
  56. Css Gallery

Simple Xml AS3 Navigation Menu-V2

This is a the new version of Flash ActionScript3 Navigation menu. It’s an xml driven

Features:

  • you can use it anywhere you want, all classes are open-source (caurina tweener included)
  • easy implementation of links and sub-links, fully xml driven
  • handles ok on non or relative links

Bugs Fixed:

  • MouseHand is now updated when hovering on a link ()
  • CallArg Class is now included ok, sorry for that i had this in my default class location

Download the sample files from this link.
The .fla file is included. Any comments on the code is appreciated. Feel free to use!!

Fix IE8 Styling and behavior

ie8_icon

IE8 is still in a premature version. For all the developers that need to re-insure that web pages will be displayed and work as before there is one quick tip. A single line of code to add to your pages.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


This meta tag will make IE8 work as IE7 did.
Maybe there are still very few ppl that browse with IE8 (browser statistics) but i thought you should know this tip.

Photoshop add transparency technique

Let’s say you have an image with no transparency.
This is a  technique i found to make photos transparent to a specific color.

In the following tut color was black.

You can follow these step to add the desired transparency
PHOTOSHOP NEEDED

Step no 1.
Make a copy of the image. Make it in grayscale. Play a little with the levels so you can do the grey areas whiter.
Make a brush with this image. (DEFINE BRUSH)

Step 2.
Take the original image with no transparency and add a layer mask.
Then use the brush you made in the first step.

Step 3.
Save image in psd or png format. You re Done!!!

These are the before and after images
Original Image

The image “with transparency” (added a random background there to see the result)

The cool thing using this technique is that you dont need to lasso or feather anything. All steps are a standard procedure. The only thing you must master is the leveling so that you can make the transparency to a desired level.

Retain scroll position after browser refresh

Retain scroll position after browser refresh
As Joel Spolsky points out, updating web pages by getting just the bits of information that have changed instead of refreshing the whole page is the wave of the future. Whether we’re calling web services within a client-side page or using a gmail-like JavaScript technique (darn cool), it’s going to be a major architectural shift. It’s going to be hard.

In the meantime, there is a really easy way to fix the problem of having to scroll back down to the part of the page you were using when a refresh occurred. Because ASP.NET’s post-back model forces a trip to the server for anything interesting to happen, this technique is essential if you’re using ASP.NET. However, it works just as well in Perl, PHP, JSP – whatever your server-side technology. It requires client-side JavaScript to be enabled, but so do the fancier techniques we are looking forward to.
Note that you could also just turn “smart navigation” on in ASP.NET, but I’ve had issues where smart navigation messes up other JavaScript. I prefer not to use it.
I’ve implemented an example of the technique for this post separately in PHP and ASP.NET/C#. You can see the PHP example in action or download a zip file of the ASP.NET/C# example. For both examples, I use hidden fields and client-side script. They imply an http POST, and typically you will be posting to the same page. You could make it work with GET and/or with another page, but the problem itself gets more confusing in those scenarios.

Here is the complete PHP example:

Continue reading Retain scroll position after browser refresh

Button Submit Once!

In a web application where the users are real dum the ussualy double click in buttons so the filled forms are submitting more than 1 time. Here is the script to prevent that.

<!--more-->
/*
Submit Once form validation-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

function submitonce(theform){
	//if IE 4+ or NS 6+
	if (document.all||document.getElementById) {
		//screen thru every element in the form, and hunt down "submit" and "reset"
		for (i=0;i&lt;theform.length;i++){
			var tempobj=theform.elements[i]
			if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
			//disable em
			tempobj.disabled=true
		}
	}
}
</script>
 <form method="POST" onSubmit="submitonce(this)">