Archived entries for

From Mockups to CSS/XHTML (PSD/Fireworks to CSS/XHTML)

If you are reading this article, you’re probably one of those people who are trying to find a good tutorial on how to convert a PSD template into valid CSS/XHTML. If my guess is correct, you’ve come to the right place!

Since I understand that your time is precious, I’m directly coming to the point. Go to this section of SitePoint, download FREE preview of this book (160+ pages) :=>

If you already know CSS basics, you may skip the basic chapters. Chapter 8 of this book (included in the free preview) will teach you how to convert Photoshop/Fireworks mockups into standards compliant websites.

If you find the free preview of the book HTML Utopia: Designing Without Tables Using CSS, 2nd Ed. useful, it’s highly recommended that you buy this book. (500+ pages).

Trust me, this book will change your Web Design career overnight!

I also recommend you to read the following two articles:

  1. Quick CSS Mockups with Photoshop, A List Apart article.
  2. Webdesign Mockup Using Photoshop, The Undersigned.

When you are finished doing all the things recommended in this article, you’ll be designing great looking, standards compliant, 2-column web layouts like a pro. My next 3 articles will show you how to become a highly professional web designer in 3 days.

Stay tuned..

[tags] Web Design, Standard Compliant Design, Design, CSS, XHTML, Mockups, Photoshop to CSS/XHTML, Fireworks to CSS/XHTML, HTML Utopia, SitePoint, Books, CSS Articles, Web Design Articles[/tags]

AVINASH 2.0 Returns!

Tragedy in a nutshell: After staying down for more than 7hrs, AVINASH 2.0 is back in its normal condition. I’m sorry for any inconvenience caused by this down time. Well, actually it wasn’t down. It was showing a 403 forbidden access error.

Tragedy in detail:
About 8hrs ago, my blog faced huge surge in traffic. I’m yet to find what transferred so many visitors to my blog. Currently I’m just guessing that one of my articles got stumbled. The traffic count reached 120+ that hour and HostGator disabled my blog directory.

They sent an email saying that my blog is causing huge server load and that’s why they disabled my main blog directory. avinash.ws sub-domains were still accessible though. I don’t know what caused 7hrs to re-enable my main blog directory. It’s my first worse experience with HostGator. Today, their support department really pissed me off.

Even after 5hrs, when I didn’t see my blog accessible, I started live chatting with one of their support members and said to him/her that should I stop using their service or they are going to re-enable my directory? The support member was pretty cool. He/She kept chatting to me until my blog started working once again.

Finally, I’m glad to see my blog back. I hope you people didn’t start to think that Avinash disappeared with his blog!

Once again, sorry folks! Sometimes, even good Web hosts do weird things.

[tags]HostGator, WordPress and HostGator[/tags]

WordPress MU 1.2 Available For Download

WordPress MU 1.2 is now available for download. This is primarily a bugfix release but it also has a security fix. So, if you are running WordPress MU, the upgrade is highly recommended.

VIA

[tags]Blogging, WordPress, WordPress MU[/tags]

A Bowl Of Mini Icons – Download 219 Cool Free Icons

Cute and delicious mini icons are here! Sweetie presents two sets of cute and clear mini icons that are licensed under a Creative Commons license, so commercial use is fine. You are free to make derivatives with the included Photoshop documents.

mini icons

Links: a). 182 mini icons b). 37 mini icons

[tags]Mini Icons, Free Mini Icons, Free Icons, Web Design, Design, Graphics, Free[/tags]

Evil Internet Explorer 7 – Doesn’t Resize Text Sized in Pixels

So Internet Explorer is still creating problems for Web designers. Roger Johansson over at 456 Berea Street writes about this new IE problem in details.

IE 7 does not, repeat not, resize pixel-sized text. It partly compensates for that by allowing the user to scale/zoom the entire page, including images (which quickly leads to massive horizontal scrolling because of its bad implementation). But if you choose Page/Text Size from the menu to change the text size, nothing happens if it has been sized in pixels or an absolute unit (points, millimeters, centimeters, inches, or picas).

Link: IE 7 does not resize text sized in pixels

Make sure you don’t miss reading the comments.

[tags]IE 7, Internet Explore 7, CSS, CSS support in IE7, Microsoft browser[/tags]

AVINASH 2.1 Released

AVINASH 2.1 is an improved version of my first WordPress theme ‘AVINASH 2.0‘. This release includes some minor bug fixes and 3 major improvements.

3 Major Improvements:

  1. Valid XHTML 1.0 Transitional!
  2. Widget-ready
  3. Customizable header with the addition of h1 tags.

AVINASH 2.0 had been updated with the first two features. If you downloaded AVINASH 2.0, it’s highly recommended that you visit the new download page and download AVINASH 2.1.

Thanks for trying this theme!

[tags]WordPress, WordPress Theme, AVINASH 2.1 WP Theme, WP Themes, Web 2.0 themes, Free WordPress themes, 2-column layout[/tags]

AVINASH 2.0 WordPress Theme Updates: Now Widget-Ready

About 30 minutes ago, I released a new update for my AVINASH 2.0 WordPress Theme. The theme files have been updated on the download server with the new release ‘avinash-2_0-2007-03-28.zip’. Feel free to download and try this theme.

If you find any bug in the theme, please let me know! I’ll fix the bug and release a new updated version on the very next day.

Note: Though I’ll release a new update every day, I don’t guarantee that I’ll keep doing this forever. Whenever I’m busy in other projects, I won’t be able to work on this theme. These type of things might cause delay in next theme updates. But you can be assured that a new update will surely be available every week.

[tags]WordPress Theme, WordPress, 2-column wordpress theme, Widget-ready theme, Right sidebar, Web 2.0 Theme, AVINASH 2.0[/tags]

AVINASH 2.0 WordPress Theme Released (Web 2.0ish)

  • Project Status: PAUSED.

First of all, I’ll like to say sorry to my feed subscribers because I wrote in my previous post that starting this Saturday, I’ll be making a gift for them.

Unfortunately, cold and fever caught me badly. I couldn’t make a gift available for my blog feed subscribers exactly on Saturday, March 24, 2007 but, today I’m here with your gift, folks!

I’ve designed this theme specially for my cool blog readers. Since this is my first WordPress theme release, there may be a few bugs that may have gone unnoticed. If you find any bug, please let me know so that I can fix it and make the new, updated theme available for download!

Sorry once again for being late! Next time, I’ll try to keep cold and fever away!

AVINASH 2.0 WordPress Theme

Demo Link: Click here to see the live demo..

Main Theme Features:

  • Valid XHTML 1.0 Transitional!
  • Widget-ready.
  • SEO Friendly
  • 2 Column Theme.
  • Modern, Web 2.0ish look!
  • Want to increase your RSS feed subscriber numbers? Visit the demo site to see the advantages of using this theme.
  • Open Source
  • Header PSD available upon request.
  • Updates, Mods, Theme Sets, Styles will be released every week so people can keep their blog unique.

Sorry! Download link will be back soon.

Got 30 Seconds? Hide Complete Menubar In Firefox

Since everybody isn’t able to keep large screen monitors, I’m writing this article to show you the way to completely hide your Firefox menu bar. Trust me, it’s pretty simple. You can do this in seconds if you are an experienced computer user.

Screenshot:

Warning:
Don’t do this unless you know all the important Firefox shortcuts.

Important:
Install the Menu Editor Firefox extension if you want to be able to access context menus. The Menu Editor extension allows you to customize all the Firefox context menu options. For example, you can add all the “Tools” menu options in your tab bar.

Here are the steps:

1). Double-click the My Computer icon on the desktop.

2). Go to Tools >>Folder Options >>View >>Show hidden files and folders.

3). Go to X:\Documents and Settings\username\Application Data\Mozilla\Firefox\Profiles\some_characters.default\chrome {//Where X = Your main system drive. Most of the time, your main drive is C. }

4). Open your favorite text editor. (Ex. Notepad).

5). Copy this code and paste it into your text editor:

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */
	
/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url(\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\"); /* set default namespace to XUL */
	
#toolbar-menubar { display: none !important; }
	
/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */
	
/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */
	
/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */
	

7). Save the file as userChrome.css into your X:\Documents and Settings\username\Application Data\Mozilla\Firefox\Profiles\some_characters.default\chrome directory.

8). Restart Firefox.

Enjoy!

Q. How to get my Menu bar back?
A. Just delete the “userChrome.css” file from your X:\Documents and Settings\username\Application Data\Mozilla\Firefox\Profiles\some_characters.default\chrome directory, restart Firefox and you’ll find your menu bar back in normal condition.

Q. Any risk?
A. No risk. It’s a completely safe process. You don’t need to worry about losing your bookmarks, etc. Carefully follow the steps and everything will run smoothly.

[tags]Firefox, Firefox Hacks, Firefox tips, Hide Firefox Menu bar, Menu bar, Hide Complete Menubar, Mozilla[/tags]

New At AVINASH 2.0: Top Commentators Section

AVINASH 2.0

My regular readers should be aware of my recent activities on this blog. Recently, I’ve been trying my best to share link and traffic love to my readers/commentators.

I respect my readers and am pretty aware of the fact that a blog is incomplete without its feed subscribers/commentators/readers. Whenever I’m free, I surely think to add a new cool feature to this blog that can be profitable for AVINASH 2.0 readers, subscribers and commentators.

Today, I had some spare time so I added the “Top Commentators” section in my sidebar. Since you can see that the “Top Commentators” section is easily visible in the sidebar, I hope that the top commentators will receive good traffic as my site traffic increases day by day.

In the past couple of weeks, my daily traffic increase ratio has been 100+ new visitors/day. This blog had good traffic in October 2006 but for some reasons, I had to stop posting new articles for more than a month and it completely dropped the traffic! I’m glad to see that now, I’ve 3000+ visitors/week.

So, feel free to leave comments if you find my articles useful OR you want to suggest something. DoFollow plugin is already installed on this blog so you can be sure that “nofollow link attributes” won’t be added to your blog links.

One more thing that you should know: To control spam comments, I’ve configured the “Top Commentators” list to show the people in the list who have left minimum 3 comments in any particular month on this blog. Commentators with less than 3 comments/month won’t be visible in the list.

That’s it.

Happy Blogging!

[tags]Personal, AVINASH 2.0, Blog Updates, Top Commentators[/tags]

Tag/Category Cloud Plugin For WordPress

If you ever wanted to create a tag cloud for your WordPress powered blog, I’ve found a really nice plugin for you!

Category Cloud (v. 1.5) is a WordPress plugin that shows categories as a colored tag cloud. You can see it live in my sidebar. Take a look at the “Top Categories” section.

The plugin installation process is pretty easy. Download the plugin, unzip it, upload ‘category-cloud.php’ to your WordPress plugins directory and activate the plugin. You need to insert <?php category_cloud();?> where you want your category cloud to appear. That’s all.

Main Features:

  • Support for Wordpress 2.1 (should work on older wordpress versions, but its not tested, Ill be happy to have some feedbacks)
  • Customizable max and min font size and unit (px, pt, em)
  • Categories shown in ascending, descending or random order
  • Possibility to exclude given categories
  • Possibility to exclude categories with less than a given number of posts
  • Full integration with wordpress administration panel
  • before and after tags – You can use this option to put your categories (tags) between <li></li>
  • Categories can be sort by ascending or descending number of posts
  • Option to show a fixed number of categories (this way you can do a top 10 categories) - My favorite option! If you haven’t already noticed, I’m using this option to show the “Top Categories” section in my sidebar.
  • Colored cloud, with colors based on the importance of each category

For the people who want to know if it works on WordPress 2.1.2, my answer is: Yes, it works perfectly on WordPress 2.1.2 because my blog is powered by WP 2.1.2 and you can see this plugin working in my sidebar!

In case you are using a hosted WordPress.COM blog, you may want to read my previous article: Tag Cloud Generator For WordPress.COM Blogs.

[tags]Blogging, WordPress, WordPress Plugins, Tags, Tag Clouds, Category Clouds, Category Cloud 1.5[/tags]



Copyright © 2006–2010. All rights reserved.

RSS Feed. This blog is proudly powered by Wordpress and Modern Clix.