Azharkamar.com

CSS

24 Nov 11

Magento – Modifying the Default Message Alert Box to look like a Popup Dialog

Magento developers out there, here’s a simple way to replace the default error/success notification box (the message that appears after you submit forms) to one that looks like a modal dialog popup using some simple JavaScript and CSS. Read more

20 Nov 11

How to Add a ’selected’ Class to the Menu Link of the Current Page using jQuery

Differentiating the menu item of a current web page from other menu items is pretty important, generally because it enhances user experience as it instantly tells the user exactly which part of the website he is at. There are many different ways to implement this programmatically, but I’ll only explain the jQuery method here. Read more

16 Jul 11

20 Useful CSS Tools You’ll Need

Cascading Stylesheets are one of the many things we designers and developers encounter in our daily quest to rule the web. Without style, everything would obviously look dead boring and similar, and so will websites. Read more

10 Mar 11

CSS3 Codes for Rounded Corners

Since Dreamweaver or any web editing software doesn’t do auto-complete for CSS3 rounded corner properties, I find it helpful to have this here. So whenever you wanna throw in rounded corners for your website, just copy and paste this and adjust accordingly. Read more

5 Sep 10

How to Create a Simple WordPress Tag Cloud using wp_tag_cloud

Displaying your post tags anywhere in your WordPress blog is simple. Usually it is displayed in the sidebar area of a Wordpress site like the one you see on the right sidebar of azharkamar.com. Read more

16 Apr 10

How to Create Your Very Own WordPress Theme

Creating a wordpress theme is quite simple; well actually it’s more about editing a ready-made wordpress theme. I think that most WordPress themes were not created from scratch, but edited from the Default or Classic theme, or any other existing theme available. If you come to think of it, it would be quite troublesome to create a theme from scratch when all you can do is edit and customize an existing one that suits you best, and then call it your own. :-D

Creating a New Theme from the Default Theme

Here’s how you create your own WordPress theme from another WordPress theme. I recommend using Fifty Fifth Street or the Default WordPress theme as these themes have a clean layout and standard PHP and CSS files and codes. Both these themes use a 2-column layout so if you want a different layout, you’ve got to look for another theme.

Ok so here are the steps you should take:
1. Download the default folder (/wp-content/themes/default) to your computer using your favourite FTP client (e.g. FileZilla)
2. Now rename that default folder you have just downloaded to any name you wish (e.g. mememe)
3. Open style.css and change the current theme description (the text at the beginning of the file within the /* */ comment tags) to your own preference. Refer below for guidelines.

/*
Theme Name: your-theme-name (Mememe)
Theme URI: the-theme's-homepage (http://mememe.com)
Description: a-brief-description (A cool and colourful theme for everyone!)
Author: your-name (Johnny Mememe)
Author URI: your-URI (http://www.johnnymememe.com)
[optional] Version: a-number (1.0)
[optional] Tags: describe-your-theme (2-columns, fixed-width, 8 colours)
*/

4. I recommend begin editing the theme files later once everything is working fine. So for now, don’t touch anything else.
5. Upload style.css back into the mememe folder in the server.
6. Now login to your WordPress Admin panel and click Themes. You should see the new theme you’ve just created! Hmmm but the thumbnail shows that of the Default theme? That’s because you didn’t change the screenshot image file. You can upload a screenshot of your completed theme later.
7. Now click Activate and you’re done! You may now customize your very own WordPress theme!

If you really have to confirm that you’re using your new theme, check the source codes of a web page in your site and look for your theme name:

<link rel="stylesheet" href="http://mememe.com/
wp-content/themes/mememe/style.css" type="text/css"
media="screen" />

References

You may refer to the WordPress Codex http://codex.wordpress.org/Theme_Development to learn more.

30 Mar 10

How to Make Simple 3D Buttons Using Only CSS and HTML

Here’s a very simple tutorial on how to make a button using just CSS and HTML.

Well what exactly is a button (in terms of computing)? A button is defined as an element in the graphical user interface (GUI) which provides the user a way to trigger an event like querying in a search engine or submitting a contact form. A typical button is a rectangle or rounded rectangle with text in it usually describing the use or function of the button. And that’s exactly what I’m going to create using CSS and HTML.

Nowadays most buttons you see online are some sort 3D as this enhances the user interface design and also captures the user’s attention, hence also making a 3D button more user-friendly than a flat 2D button.

Note: If you’re not using Mozilla Firefox, Chrome, Safari or Konqueror, you won’t see any text shadows or rounded corners.

Now, look at these 2 buttons:

Button Good and Button Bad

Now which one looks more appealing to you? The first one right. Why? Because it has the 3D effect! And rounded corners too. And shadows. No graphics involved, just plain CSS. The CSS properties that are responsible for the sweet 3D look are text-shadow, -moz-border-radius, -webkit-border and border.

Here’s how you create that button (without using a CSS stylesheet):

<span style = "padding: 5px 20px; font-weight: bold; background: #0079ce;
color: #fff; -moz-border-radius: 20px; -webkit-border: 20px;
text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span>

So if you integrate it with a link, it would be like:

<a href = "/index.php"><span style = "padding: 5px 20px; font-weight: bold;
background: #0079ce; color:#fff; -moz-border-radius: 20px; -webkit-border:
20px; text-shadow: #00487a 0px -1px 0px; border-bottom: 1px solid #333;
border-right: 1px solid #333; letter-spacing: 1px">Button Good</span></a>

And here’s how you should do it (using a CSS stylesheet):

.myBtn a {
     padding: 5px 20px;
     font-weight: bold;
     background: #0079ce;
     color: #fff;
     -moz-border-radius: 20px; /* for rounded corners in Firefox */
     -webkit-border: 20px; /* for rounded corners in Safari */
     text-shadow: #00487a 0px -1px 0px; /* for the 'engraved text' effect */
     border-bottom: 1px solid #333;
     border-right:1px solid #333;
     letter-spacing: 1px
}

[adsense]And that’s it! Simple.

However, only Firefox, Chrome, Safari, Opera, Konqueror and iCab browsers support the text-shadow CSS property.

And for the rounded corners, current compatible browsers are Firefox, Chrome and Safari.

Both CSS properties aren’t supported by Internet Explorer…

Why, IE why? Aren’t you guys doing something to keep up with the world? Microsoft, what are you guys doing?! Haha! Anyway… it doesn’t really matter. Mozilla Firefox will conquer the Internet! ;-)