Install CSS Viewer add-on in Firefox 6.0.*

2011.08.16

Using exactly the same steps as in my previous posts I created a .xpi file for Firefox 6.0.
You can get it here: CSSViewer for Firefox 6.0 v. 1.0.3

Enjoy ;)

Install CSS Viewer add-on in Firefox 5.0.*

2011.06.20

Following the same steps as in my previous post “Install CSS Viewer add-on in Firefox 4.0.*” you can install CSS Viewer in Firefox 5.0.*

You can download a .xpi file I created and checked that it works fine with Firefox 5.0.
Download:
CSSViewer for Firefox 5.0 v. 1.0.3

I was really happy when I discovered that the CSS Viewer is available for Chrome for free from M. ed.
In case that you did not know it check here (visit the link with Chrome browser to be able to install the extension).

Check if javascript is enabled/disabled/installed

2009.08.10

Nowadays almost every website uses Javascript. You can make really cool things with Javascript and it is worthy spending some time learning some scripts ;)

The bad thing is that many users disable Javascript to their browsers, usually for security reasons. Your website may look really messed up to a browser without Javascript enabled and sure is something that you do not want.

So, there is an easy way to check if Javascipt is enabled, and if it is not you can redirect to a simple html page to inform the visitor that need to enable Javascript (the example is for a Joomla! template but you can implement it to any website template)

First you make a simple html page informing that Javascipt must be enabled to see the website correctly (nothing special, just a html file with text). For example lets say that our file is named nojs.html and in the body tags has the following:

<body>
Please enable Javascript to see this website.
<br />
<br />
<a href=”http://www.youdomain.com”>Go back to home page </a>
</body>

Now edit the index.php file of your Joomla! template and just after the <body> element add the following:

<script type=”text/javascript”>
// just a holder to check if javascript is enabled
</script>
<noscript>
<div style=”color:#FF0000; font-weight:bold; text-align:center;”>Javascript must be enabled to see this site!</div>
<meta http-equiv=”refresh” content=”0; url=http://www.yourdomain.com/nojs.html”>
</noscript>

After this part you can have the rest of your template as usual. Now lets see what every part does.

The <script>…</script> actually does nothing ;)

You enter the <noscript>…</noscript> part only when Javascript is disabled/not installed. The <meta> part is the redirection part. The content=0 means that you redirect the visitor in 0 seconds to http://www.yourdomain.com/nojs.html (there you add the path you have upload the nojs.html file).

You are done! Now if someone has disabled or not installed Javascript, will be prompted to enable/install it.

PS: If you want to check your script you can use a Firefox add-on called NoScript.

If you like the tip or have any question please comment ;)

Creating a Joomla! template with divs

2009.06.28

3columnsdivs

Probably you have heard that using divs instead of tables in your Joomla! template is better.
This is true, as a template with divs loads faster than a template with tables. Moreover, and probably the most important, is that with a template with divs you have better browser compatibility. It is more likely that your template will look correctly to all major browsers (in Windows and Linux), which is very important nowadays.

In the attached zip file you can find a really simple template for Joomla! 1.5.x that uses divs. When I say simple, I mean SIMPLE… without any module positions and images, and it is just to give you an idea on how you can create 3 columns with divs (as the picture above).
You can download Divs Joomla Template v. 1.0 and install it to your Joomla! website normally. Then you can experiment creating your own template.

Hope to find it useful. Feel free to comment and post any recommendation.

Download Divs Joomla Template v. 1.0 ;)

BrowserShots – check browser compatibility, cross platform browser test

2009.05.28

browsershots

As more people every day use a browser different than Internet Explorer and everyone uses a browser that fullfil his/her requirements,  it is very important for a web designer to know how the website looks in the mayor browsers.

It is impossible to have all the available browsers in different versions installed on your PC and check how your website looks.

Here comes the BrowserShots! A free open-source online service created by Johann C. Rocholl where you can choose from Linux, Windows and MacOS browsers, submit the URL of your website and in a few minutes you will have screenshots of how your website looks in the mayor browsers you selected.
One more good feature is the you can select the version of the browser (not only the latest version).

The service is fast and really helpful. Surely you must have a look!

BrowserShots URL: http://browsershots.org

Categories : Web design