Dynamic Guru - The Web and Technology Blog


ajax css design featured freebies google html internet javascript jquery php seo technology tools web wordpress wordpress themes xhtml
 
Posts in 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

© 2012 Dynamic Guru All rights reserved - About Us - WordPress themes - Mujtaba Ahmad