You would like to put some Module at your site but don’t know where to put it…. Or “Nice site, is it Joomla! ?”… Or “How did they use some area at that Joomla! site? Is it a Module?”… You can easily find out yourself, without being logged in!

Add the parameter ?tp=1 behind the URL, e.g. http://www.joomla.org/?tp=1
The following parameters can be used: 0=normal, 1=horiz, -1=no wrapper.

@font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG.

@font-face implementation:

CSS:

@font-face {
font-family: “Museo 300″;
src: url(“fonts/Museo300-Regular.eot”);
src: local(“Museo 300″), local(“Museo 300″),
url(“fonts/Museo300-Regular.otf”) format(“opentype”),
url(“fonts/Museo300-Regular.woff”) format(“woff”),
url(“fonts/Museo300-Regular.svg#Museo 300″) format(“svg”);
}

Explanation:

font-family: “Museo 300″;
This is the font name, and how you will call it in your stylesheet.

src: url(“Museo300-Regular.eot”);
This will enable your font on Internet Explorer.

src: local(“Museo 300″), local(“Museo 300″),
This is the local setting which will call it from your machine if it exists.

url(“Museo300-Regular.otf”) format(“opentype”),
This covers Safari, Opera and Firefox below 3.6

url(“Museo300-Regular.woff”) format(“woff”),
This is the Firefox 3.6 file type.

url(“Museo300-Regular.svg#Museo 300″) format(“svg”);
This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)

Usage:
#main {font: 18px “Museo 300″, Helvetica, Arial, sans-serif;}

When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.

You can download the example along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses.
If you have the .OTF file you can use the  Font Squirrel Generator, http://www.fontsquirrel.com/fontface/generator  , which will create the .SVG, .WOFF and .EOT formats for you to use.

Download Bekijk Demo

Equal Corners

The Code:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Unequal Corners

Targeting specific corners requires just a bit more code

The Code:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 60px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 60px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 60px;

Here is the basic use of the box shadow.

The Code:

-webkit-box-shadow: 5px 5px 5px #888;
-moz-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;

Normal Shadow

Here is how to create a normal single color shadow with a slight blur.

The Code:

text-shadow: 1px 1px 2px #000;

Letter Press Effect

Here’s a quick example for pulling it off with text shadows.

The Code:

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

body {
  background:
    url(../images/bottom-left.png) top right fixed no-repeat,
    url(../images/bottom-right.png) top left fixed no-repeat,
    url(../images/top-left.png) bottom left fixed no-repeat,
    url(../images/top-right.png) bottom right fixed no-repeat;
  background-color:#ffffff;
}

Until an official way is developed, you could disable and re-enable your extensions in the order you want them to appear (this of course becomes less practical if you have lots of extensions or add new ones often). but this might help a few people bring a bit of order to ‘the toolbar.’