zParacha.com » Web Development

How to redirect homepage in Joomla

Zaheer Paracha — Tue, 08 Nov 2011 18:29:18 +0000

Joomla is a wonderful platform to publish websites. With readily available templates you can have your website up and running in no time. Sometimes though you may need to direct your visitors to a different page than your regular home page, for instance you may want to direct all the visitors to a promotion page during special sales events. There is a very simple and easy way of doing this in Joomla.

Create and upload the standalone webpage to your domain.
Backup your index.php file in templates/YOUR_TEMPLATE_FOLDER.
Add following lines to the index.php file under the templates/YOUR_TEMPLATE_FOLDER.

Now when the visitors come to your website they will be taken to NEW_PAGE.php.
After the need to redirect the traffic is over simply replace the index.php file with the file you backed up in step 1.

Happy coding..

How to redirect homepage in Joomla is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'Joomla',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

How to limit number of posts on your WordPress homepage. If you have been blogging regularly for more than few...

An HTML element you don't want to omit.

Zaheer Paracha — Thu, 18 Feb 2010 04:57:51 +0000

Doctypes

As web developers we have the tendency to blame web browsers for inconsistencies and for not displaying the pages as designed. Most of the time the blame is justified, but there are instances when the blame lies at the feet of the web developers. For example, incorrect CSS declarations, missing closing tags in HTML documents will break you website. Another common and often overlooked reason of broken web pages is the missing or incorrect DOCYTYPE declaration.

If your website is not rendered properly by some browsers, the first thing you need to check is the first line in your HTML document.

The first line of every HTML document should have a valid DOCTYPE declaration. A missing or invalid DOCTYPE sends browsers in to the quirks mode and then the web browser uses its own methods to parse and render your page.

What is DOCTYPE?

A Document Type Declaration (DOCTYPE) informs the browsers which version of (X)HTML your web page is using. Browsers use this information to validate and render your documents. All compliant web pages must begin with a valid DOCTYPE declaration. If you don’t include a DOCTYPE declaration or if it is not valid, your web pages will not be validated and the web browser won’t be able to render your web pages properly.

Why DOCTYPE is important?

All standard-compliant browser need some information about the page to validate its content and then display it properly. There are several versions of HTML and XHTML and browsers need to know the version you are using.
A DOCTYPE tells browsers which (X)HTML version you are using and help them to render your page in standards–compliant mode. This will ensure that your pages are displayed by all browsers like you want them.

[ad#GreyLeft]But if you don’t include the DOCTYPE or if your DOCTYPE declaration is invalid, most browsers will assume that you are using an older version HTML and your page does not meet latest standards. The browser will then try to parse and render your page in backward compatible fashion (known as quirks mode) and may use browser-specific DOM.
Of course, you don’t want this. So save yourself some time and frustration by adding one of the following DOCTYPES in all your HTML page.

Version	DTD list	DOCTYPE Declaration in documents
HTML 4.01	Strict, Transitional, Frameset
XHTML 1.0	Strict, Transitional, Frameset

I copied these DOCTYPE declarations from W3C website. You can find complete table of DOCTYPE declarations at http://www.w3.org/QA/2002/04/Web-Quality.

This one line in all your HTML pages will make your relationship with browsers a little less stressful. My advise to all web developers, “Don’t publish a web page without DOCTYPE.”

An HTML element you don't want to omit. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'doctype,html,Web Development',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

How to position HTML element in the center using CSS. Positioning text in the center of an element is easily...
Encode / Decode HTML Entities Image credit:lloydi Have you been typing HTML entities by hand...
Set focus on the first text field of HTML form. A HTML form is a very good channel that you...

Why you should stop using onload method.

Zaheer Paracha — Tue, 02 Feb 2010 03:46:27 +0000

Onload

It is amazing that many web developers still use onload method embedded in the BODY tag, like

There are two problems with this line of code.

Embedding code (behavior) with HTML (structure) makes it difficult to maintain the page.
onload() method will executes only after the page is fully displayed.

Let’s see how to fix these problems.
Fixing problem # is quite simple. Just move your JavaScript code to the header section of you HTML page.

Even better approach would be to move the code to an external Javascript file and add a reference to that file in the header section of the HTML document. For example, if the code is in script.js you can import the code like

or more formally.


$(function(){
	document.contact.userID.focus();
}

So now your HTML code will be like

Now our JavaScript code will be executed as soon as the DOM is fully constructed, without waiting for images and other multimedia resources. In this example the focus will be set to your input text field almost instantly and user can start typing in the information without waiting for rest of the page to be downloaded. This is a simple but effective way of improving your website's usability.

Why you should stop using onload method. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'focus,Javascript,jQuery,JS,onload',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Set focus on the first text field of HTML form. A HTML form is a very good channel that you...
Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...
AJAX Contact Form Want to collect input from your web site’s visitors? Don’t...

Google says Adios to IE6.

Zaheer Paracha — Sat, 30 Jan 2010 17:31:31 +0000

Google agrees that the time has come for us to lay IE6 to rest. Google announced in a blog post that it will stop supporting IE6 from March 01, 2010. Google will start by phasing out IE6 support for Google Docs and Google Sites, but I believe eventually all Google products will stop supporting IE6.

From Google’s official blog:

Many other companies have already stopped supporting older browsers like Internet Explorer 6.0 as well as browsers that are not supported by their own manufacturers. We’re also going to begin phasing out our support, starting with Google Docs and Google Sites. As a result you may find that from March 1 key functionality within these products — as well as new Docs and Sites features — won’t work properly in older browsers.

Even Microsoft itself recommends users to stop using IE6. Many corporations have already stopped supporting or using IE6, with the addition of an Internet giant like Google I hope the drive to abandon the aging IE6 will get some momentum. Hopefully 2010 will be year where wen can move away from IE6. That would be an awesome news for all web developers.

What are your thoughts on IE6?

Image src: http://www.ferdychristant.com

Google says Adios to IE6. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'browsers,Google,IE6',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

How to incorporate Google Custom Search engine with Adsense into your WordPress blog. AdSense is by far the most popular and easy to...
Publish your blog posts to Twitter with Feedburner. One of earliest third party tools that I started using...

Five free tools to choose perfect colors for your website.

Zaheer Paracha — Fri, 29 Jan 2010 06:03:07 +0000

Rainbow colors

Color coordination plays a big role in the look and feel of a website. An appealing color scheme is an important prerequisite for eye catching web design. Dull or very sharp colors or mismatch colors will not only look ugly it may overshadow other nice elements of your website. Choosing vibrant, harmonious colors that are pleasant to eyes enhance the aesthetics appeal of a website. Following is a list of online resources you can use to construct the color schemes for your next web design project.

Kuler

Kuler is a featured-rich online color free tool from Adobe that you can use to create your color themes or browse through thousands of themes generated by community members. As a registered user you can save your themes and then view them in MyKuler. You can create themes using single color or by using color wheel. You can also extract color scheme from your images, for that you can upload your images or import them from Flickr. Kuler is my favorite.

ColorRotate:

Like Adobe Kuler, Colorrotate is also a free, online tool to generate color templates, but this is a 3D tool. Its intuitive 3D interface is fun to use and it enables you to quickly see the multidimensional nature of your colors and the relationships between colors. You can use its drag-and-drop option to adjust hue, brightness, and saturation. You can load color themes from you images. It also has a vast collection of community generated themes that you can browse to get some inspiration.

ColorSchemeDesinger

ColorSchemeDesigner is another free, online tool to generate color palettes. Its unique, easy-to-use color theme creator packs many useful featuers. You can generate single monochromatic, complimentary, triad, tetrad, analogic, and accented analogic color palettes. Not only you can create the color palette , you can also user their preview function to apply your palette to a dummy web page, to see how your colors will look on your website. This will definitely save many designers lot of time.
Another great feature is the ability to export your color palette as a Photoshop palette, HTML+CSS, XML, TXT, and GPL .
This tool does not work in IE6.

ColourLovers

If you need color inspiration, you will love ColourLovers. Designers from all over the world share their creative ideas on this website. It has over 286,866 members and showcase more than 2,407,124 colors, 1,090,882 palettes and 732,299 patterns. You can create your own color palettes or just pick one from this enormous collection.

COLOURlovers is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

4096 Color Wheel

If you don’t want all the bells and whistles of above mentioned tools, you may want to try Color Wheel. This is a simple web-based tool to view and choose web-safe colors. It offers you a palette of seven colors, displayed on the left side of the screen. You can change these 7 colors one by one by clicking on a color wheel. It is a nice little tool to generate a color palette.

What are your favorite tools for creating color schemes?

Five free tools to choose perfect colors for your website. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'color wheel,colorrotate,colors,colourlovers,kuler,tools,webdesign',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Best free tools for Twitter Twitter provides an excellent platform to bloggers to promote their...
Colors by name with hex and RGB codes. Today I stumbled upon a rather useful website. CSS Color...
Top 10 tools for bloggers. If you are looking for ways to improve your blogging...

How to position HTML element in the center using CSS.

Zaheer Paracha — Wed, 20 Jan 2010 04:56:58 +0000

Positioning text in the center of an element is easily done using text-align:center property. But how do you position an entire element, for e.g; a div or an image in the center of the containing parent element?

For example, if you want to put an image at the center of your header div how do you accomplish this?

There are several ways to align an element in the center but the preferred and elegant method is to use margin property.

By setting left and right margin widths to “auto” you tell the browser to put this element at the horizontal center of the the parent element.

Outer DIV

THIS DIV is in the center of the parent div. We used following CSS declaration to align this div.

#outerDiv{
 background:#fff;
 border:1px solid #333;
 width:450px;

}
#innerDiv{
  margin:auto;
  background:#eee;
  width:50%
}

Piece of cake, huh? Not so fast. This approach will work in all browsers except, you guessed it, in IE6. I am sure you are not surprised that IE6 will not render this div as you would have expected. But there is a workaround for this IE6 behavior. You can set text-align property of the outer div to center and this will align your inner div nicely in the center in IE6.

This will, however, introduce a side effect. Since you are setting text-align property of the parent element to center, your inner div (the child) will inherit this property also and the text will be center-aligned. If you don’t want your text to be in the center, reset text-align property at the child level by adding text-align:left;

So your final style sheet will have this declaration.

Outer DIV

THIS DIV is in the center of the parent div. We used following CSS declaration to align this div.

#outerDiv{
 background:#fff;
 border:1px solid #333;
 width:450px;
 text-align:center;
}
#innerDiv{
 margin:auto;
 background:#eee;
 width:50%
 text-align:left;
}

Good luck!

How to position HTML element in the center using CSS. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'cascading_style_sheet,CSS,positioning,web development tools',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Position Ad Units in Posts Photo credit: AMagill Ever since I started placing AdSense units...
An HTML element you don't want to omit. As web developers we have the tendency to blame web...
Set focus on the first text field of HTML form. A HTML form is a very good channel that you...

Reset CSS: A simple solution to browsers’ inconsistencies.

Zaheer Paracha — Mon, 11 Jan 2010 00:52:34 +0000

One of the challenges web designers face is to get various web browsers render their web pages in a consistent manner. The reason is every browser assigns slightly different default styles to certain page elements.

A simple approach to handle this cross-browser inconsistency is to overwrite browsers’ default styles. This technique is known as resetting CSS. To me it is more like setting a starting point for your web page being rendered by various browser. By setting (or resetting) the base styles you start with a consistent base for each browser.
Now the question is how to reset browser’s default style. Eric Meyer created the following style sheet to reset browsers’ default CSS style.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Many web developers considered this as the standard reset style sheet. Save this CSS as reset.css and include this file in your header file (or header section of every web page). Make sure that this style sheet comes before your other style sheets otherwise it will overwrite your styles.

Reset CSS: A simple solution to browsers’ inconsistencies. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'CSS,web development tools',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Simple tips to make you a better blogger. Image credit:Kelly Sims To become a successful blogger is not...
How to position HTML element in the center using CSS. Positioning text in the center of an element is easily...
Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...