Archives for category —design

WordPress theme – The Ataraxis


Ataraxis literally means “absence of mental stress or anxiety” . And that is exactly what this beautiful WordPress theme does !The Ataraxis is a nature-themed two-column 800px wide WordPress theme with widgetised sidebar , Cufon text-image replacement for headers ,
jQuery tooltips on links ,Rotating headers , Custom logos , reply/quote feature on comments , collapsible widgets , built-in social bookmarks on posts and many other features.

The Ataraxis Features

  • 800px wide
  • Two-columns with left sidebar
  • Cufon text-image replacement for headings
  • 4 different nature-themed header backgrounds
  • Collapsible widgets
  • Sutured Javascript for faster loading
  • jQuery animated tooltips on links ( use the title attribute)
  • Reply/Quote feature on comments
  • Zebra stripped and Admin highlighted comments
  • Custom logo support
  • Search Engine Optimized
  • Smooth scrolling for internal links
  • Custom description in footer for better SEO
  • Builtin social bookmarking for 6 most common sites
  • Ability to add custom CSS from theme options page without having to edit the stylesheet
  • Google Analytics integration
  • Displays a browser warning to IE 6 users
  • CSS 3 curved border and text-shadow effects
  • Easy to customize and clean CSS
  • Some custom CSS classes that you can use in posts :
    • .highlight , .note
    • .warning , .error
    • .download ( use on <a> )
    • .frame ( us on images to give them a silvery frame )
  • Around a dozen theme options

Download The Ataraxis v1.0

How not to design a site ?

How not to design a website - Pic

P.S : this was one of my very first attempts at web design :d .

The New Look! ( Re-design 21 Aug 09)

Re-design of Dynamicguru.com
Just finished a complete re-design of this site, this time i decided to choose light colors. The homepage now features a “featured posts” slider and an ad box. Comments are jazzed up with “Reply” and “Quote” buttons (how i did them? coming soon…!) . Let me know in the comment below what you think about the new design.

Lorem ipsum… what is it?

According to wikipedia

In publishing and graphic design, lorem ipsum is the name given to commonly used placeholder text (filler text) to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. The lorem ipsum text, which is typically a non-sensical list of semi-Latin words, is a hacked version of a Latin text by Cicero, with words/letters omitted and others inserted, but not proper Latin

Continue Reading

Cufon – easy and fast text-image replacement solution

Cufon - easy and fast text-image replacement solutionHave you ever wanted to use your own font on your website? but bothered about it being installed on your visitors system? Cufon is the solution for you, it makes possible fast and easy replacement of text with the font of your wish. It is extremely easy to set up and supports nearly all major browsers. And also it is SEO friendly.
Here is a demo of Cufon on my portfolio site, those headings with silver gradients are actually text replaced by Cufon on the fly.

Using Cufon

To use Cufon on your site , first download this js file (http://cufon.shoqolate.com/js/cufon-yui.js) and then generate your own font’s js file by uploading your font file here : http://cufon.shoqolate.com/generate/ . Once you have both the javascript files , include it in the head section of your web page like this :

<script src="path/to/cufon-yui.js" type="text/javascript" ></script>
<script src="path/to/generated-font-file.js" type="text/javascript" ></script>

Now we are all set up to replace your text , to replace the text with cufon , add the following piece of javascript to your page :

<script type="text/javascript">
Cufon.replace(‘h1′);
</script>

The above lines of code will replace all your h1 elements with images rendered in your font.
You can take a look at a more detailed guide to replacing text with cufon here : http://wiki.github.com/sorccu/cufon/usage

Styling your rendered text

You can also add linear gradients to your text with cufon!, here is how :

Cufon.replace(‘h1′, {
        color: ‘-linear-gradient(#000, #777, #777, #000)’
});

The above code will cause the text to fade from black (#000) to grey (#777) and then back.For a comprehensive guide to styling using cufon refer to : http://wiki.github.com/sorccu/cufon/styling
So why wait? go ahead and try it out today, i bet its awesome and the easiest text-image replacement solution available right now, much simpler and better that sIFR.

My new webdesign portfolio (v2)

My New online webdesign portfolio
Check out my new web design portfolio at : www.dynamicguru.com/mujtaba/ . This time i ‘ve chosen light colors, mainly #eee for background and #09f for various visual elements . It is a single page site and is again powered by jQuery . I’ve tried to keep things as simple and to the point as possible, no more lengthy “about me” or boring portfolio page. The site was designed and developed in just 2 days.
Here is a look at whats behind it :

  • A jQuery UI powered “content slider” for showcasing my works
  • Table-less css based grid layout
  • Ajaxified contact form
  • css3 rounded corners (for browsers that support it)
  • Valid XHTML 1.0 Strict

How to display a notice to your ie6 users using only css

This is year 2009 and not 1999, it is now time to move a step forward and shun internet explorer 6. Instead of trying to make your site work in internet explorer 6 and waste your precious time you should now consider to politely ask your ie6 visitor to upgrade. There are many ways to do so, but the simplest one i could come up with was using a css hack to display a particular div in ie6 and hide it in other browsers. The trick is to use ie6’s interpretation of _display as display .

Here is the code :

// CSS

#ie6_only {
//Hide it from good browsers
display:none;

//only ie6 will interpret it as display! others wont
_display:block;
}

// XHTML
<div id="ie6_only">
Your notice to ie 6 users here
</div>

Thats all! quite simple, isnt it? much simpler than using javascript or php to detect the browser and take action accordingly.

However you should position the div at such a place and in such a way that it is clearly visible.

You must also be polite in your notice and here is one example :

Dear visitor!

You are using an outdated browser that is not compatible with web standards,

You must consider upgrading to a different browser or a newer version of Internet Explorer to improve your web experience and enhance your online security and privacy
ThankYou

Further, you may consider becoming a supporter of NET magazine’s anti-ie6 campaign at http://www.bringdownie6.com

The last fall – a dark wordpress theme

Here is just another rocking dark wordpress theme by me , which was downloaded 300 times during the first 20 hours of going live! The theme has a sleek and dark look with some nice eye candy jquery effects on the left sidebar.Give it a try!

Click here to download this free wordpress theme

New theme!

If you are among the frequent visitors to my blog you will notice that i changed the blog theme today, this new theme is my own creation and the best part about it is the effects on the left sidebar, hover over a link to slide it towards right and click on a link category title to see it slide up, all thanx to the powerful jQuery.8) If you like the theme or want to point out a bug , drop a comment using the form below.

Update

I switched back to my previous Silver Theme . But this new theme is now available for download from the official wordpress theme directory.



Click here to download this theme

My first web portfolio

The web portfolio of Mujtaba Ahmed

The web portfolio of Mujtaba Ahmed

Today i’ve launched my new website and my first web portfolio.

You can check it out here: www.dynamicguru.com/mujtaba/ .

The site is one of my best works till date and is the first site of mine to use ajax and is powered by jQuery. The site uses awesome jQuery effects for page transitions. Also it has validated XHTML 1.0 Strict markup. Check it out and tell me in the comments what you think about it?

Silver Simplicity – Free gorgeous light weight wordpress theme

Hey fellas, this is the first free wordpress theme from www.DynamicGuru.com . Its light weight,uses minimum images and is beautiful

screenshot

Download the following .rar file, unzip it and upload the files to your theme directory and activate it from Dashboard->Appearance (themes)

Click here to download this wordpress theme

Free blue powerpoint template

Here is yet another free powerpoint template from us. The file includes two slides and is in .pot (powerpoint template) format. Download and enjoy.

PREVIEW:

blue_pot_template

Click to download free beautiful powerpoint template

Creattica – best design inspiration site

Every designer, at the start of his career, needs some inspiration, i mean great ideas dont simply come out of nowhere in a beginners mind. We all have been or are copiers, we need some push in the right direction, some ready examples of great design work really boosts up our own creativity level, this is exactly what inspiration sites do, and www.creattica.com is my most favourite site for inspiration. It features thousands of user submitted photoshop artwork, beatiful web designs and impressive business cards. So if you are one of those looking for some great examples to learn from (not to copy from) then make sure you visit www.creattica.com.

How to write browser specific css

Usually when it comes to browser specific css we often mean IE specific code. You might be aware of the conditional comments tag you can use to target different versions of Internet Explorer. But 2day i’ll be showing you a much simpler way to tame IE 6 and 7 to your needs . Lets suppose for some reasons you want a div to have a height of 10px in all browsers, but a height of 12px in IE 7 and 15px in IE 6, here is how it can be done without the use of conditional comments:

div {
//for all browsers
height:10px;

//for IE 6,others will ignore this
_height:15px;

//for IE 7
*height:12px
}

isnt it much simpler than writing conditional comments?
The same technique can be applied to other properties as well. You can even use this hack to request your IE 6 users to upgrade to a modern browser,how? Just make a div and write your message in it and set its “display” to “none” while set “_display” to “block”.This will simply tell all browsers not to display the div while IE 6 will. Hope you enjoyed the post.

Free RED beautiful powerpoint template

Download free powerpoint template

Download free powerpoint template

This beautiful free powerpoint template comes ready with two slides with awesome vista-like background.

Just download and make that beautiful impressive presentation

Download Free powerpoint template

© 2010 Dynamic Guru All rights reserved — About UsContactMujtaba