flink.gr

There is a very useful add-on for Firefox, necessary for every web designer. It is the famous Web Developer add-on.

You can download it from the official Firefox add-ons site or go directly here.

It contains many cool tools that can give you a full image of how a website is designed. One of my favorites is that you can “edit” online the css of a website and directly see the results. Another one favorite is the “Display Element Information” (under the Information menu) which does what it’ s name says. You can have all the information for every element in a website, nice and easy.

I believe that this add-on is a MUST for every web designer, so check it out!

There is an easy way to adjust the images transparency (or opacity if you want) and make a nice hover effect with it.

First let’ s make clear that Firefox browser uses the style.opacity parameter with values from 0.0 – 1.0 and Internet Explorer uses the filters.alpha.opacity parameter with values from 0 – 100.

So in our html we insert the image like this:

<img src=”images/image_name.jpg” alt=”something goes here” width=”400″ height=”200″ border=”0″
style=”opacity:0.5; filter:alpha(opacity=50)”
onmouseover=”this.style.opacity=1; this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.5; this.filters.alpha.opacity=50″ />

So the image has an opacity 50% normal, when we hover it with our mouse the opacity becomes 100% and when we move the mouse away the opacity returns to 50%.

If you are using Joomla! you must be careful if you have the “Clean HTML” option on the WYSIWYG editor, because it will remove some parameters and you will not get the result you want ;) The best is to turn off the WYSIWYG editor, insert the image and then turn the editor back on again.

My portfolio design (although it’ s a simple html) is inspired from the Joomla! template of Portfolio Design. You can see a demo here.

There you will find a very good portfolio component for Joomla! 1.5.x supporting images, videos. and many more nice things ;) The best is that you can fully configure it through its css. For more details and download you can visit the official Portfolio Design website here.

Having your template 100% height it can be very cool sometimes. Especially if you want to show some kind of picture at the bottom.
To do so first you must say that you want the whole body/html part to have height 100%. So you can add to your css the following:

html, body {
height:100%;
margin:0px;
padding:0px;
}

The marging and padding are not mandatory but it looks better if there is no space at the top, left, right and bottom of the screen ;)

Now the most part is done. You have to assign an id to the table or div you want to have height 100% at your index.php file of your template. Then you have to return to your css file and add the parameters for this id. For example let’ s say that our id is id=myfullheighttable then we have this in css:

#myfullheighttable {
height:100%;
}

of course you can add anything else you want for this specific id.

If you are using Joomla! 1.5.x and your site is working just fine but you get the following error:

Notice: Undefined index: mosConfig_live_site in /home/user_name/public_html/templates/template_name/index.php on line 15

Where on line 15 is the favicon part of the template something like that:

<?php echo “<link rel=”shortcut icon” href=”$GLOBALS[mosConfig_live_site]/images/favicon.ico” />” ; ?>

You probably must change it with this:

<link rel=”shortcut icon” href=”images/favicon.ico” />

(if you want to have the favicon at the default images folder) and the error will go away.
I suppose that this error has something to do with the hosting company because you may not get any error if you check the same template at another hosting company.