To do this, in Joomla’s root folder go to administrator/templates/khepri/css. In file rounded.css find the style for div.m and add position:relative to it. That’s it for that file. Now open the file general.css and that’s where you’ll need to make several changes. I’ve put the modified styles below — the highlighted lines are the ones that take care of the new, and improved, position; the rest are colors, font sizes, margins, etc., basically stuff you can adjust to your liking.

div.header {
	font-size:20px;
	font-weight:bold;
	color:#0b55c4;
	background-repeat:no-repeat;
	position:absolute;
	top:0px; left:4px;
	padding-left:30px;
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
}
div.toolbar {
	float:left;
	text-align:right;
	padding:0;
	margin-top:26px;
}
table.toolbar td { padding:1px 1px 1px 4px; text-align:center; color:#666; height:24px; }
table.toolbar span {
	display:block;
	width:20px; height:20px;
	float:left;
	margin-right:4px;
	-moz-background-size:100%;
	-webkit-background-size:100%;
}
table.toolbar a {
	display:block;
	float:left;
	white-space:nowrap;
	line-height:22px;
	border:1px solid #fbfbfb;
	padding:1px 6px 0px;
	background:#fdfdfd;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-moz-box-shadow:rgba(0,0,0,.3) 0 0 4px;
	-webkit-box-shadow:rgba(0,0,0,.3) 0 0 4px;
	border:1px solid #fff;
	color:#0b55c4;
}
table.toolbar a:hover { border-color:#ccc; text-decoration:none; background:#fff; }

Obviously these would work best in Firefox or Chrome, but the new position should work in IE as well. The biggest issue you’re going to have in IE is that the icons will not scale (since the styles are using background-size to rescale them to smaller dimensions), and they’ll be cutoff.

This will also work with the Joomla 1.6 and the new default theme Bluestork. You’ll be working with file template.css, and instead of .header it’s going to be .pagetitle, and instead of table with cells it’ll be an unordered list.

Personally I find this style of menu much easier to work with, not to mention that it’s a bit more compact.

There are three main steps to creating a customized share button. There’s some javascript to include in the footer.php, few lines of html to add at the end of your posts, and of course some styles and the icon itself.

JavaScript

You’ll want to add this js code in the footer file as probably the last piece of code. This means it won’t be loading until everything else is done. You can read detailed explanation of what you can do on AddThis’ API page but the short of it is — include this script file “http://s7.addthis.com/js/250/addthis_widget.js”. If you want to keep track of various stats AddThis provides, you’ll need to provide your username. This is done with the “addthis_config” variable. So for example, what I have is

<script type="text/javascript">
var addthis_config = { username:"2late2die", data_track_clickback:true };
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

HTML

The HTML is pretty much just a regular link, but with certain href target, class and a couple of special addthis attributes. You can style it anyway you want, as you would any other link. Here’s how said link might look

<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=[username]"
  class="addthis_button" addthis:url="<?php the_permalink() ?>"
  addthis:title="<?php the_title_attribute() ?>">Share</a>

“http://www.addthis.com/bookmark.php?v=250&username=[your username here]” is the url the link should be pointing to. It must have the “addthis_button” class, otherwise AddThis js won’t recognize it, and then the addthis:url and addthis:title attributes. These attributes are self explanatory, just remember to use PHP so that they are assigned dynamic values. If you have any code, or plugins, that insert tags with attributes or class names into the title (like in my case, wp-typography, which puts <span class="caps"> around any caps-only words, like acronyms and such) then use the “the_title_attribute()” function, instead of the typical “the_title()”. It strips the tags and escapes any problematic characters.

CSS

This is really all up to you, depending on how you want to style the button and the tooltips with the various sites. By default the AddThis scripts provides its own style, so if you don’t mind the white tooltip box, all you’ll need to style is the link itself. If you want to style the tooltips as well, then you’ll need to dig into the generated code for them and the styles used by default, and figure out which ones you want to change. (You can check out my styles to see how I gave it a dark theme by switching a few colors.)

If you like optimizing your code you might decide to not include the AddThis styles file at all. You can do this by adding “ui_use_css:false” to “addthis_config”, i.e.

var addthis_config = { ui_use_css:false };

That CSS file weighs in at about 52k, which is actually quite hefty. There are, however, two reasons to keep, instead of removing it.
First of all, by removing it, you will have to provide all the styles to AddThis widget from scratch, as it were, including all those icons for the various services, which are backgrounds of the links, not image tags in the HTML. It’s certainly doable but it’s a hastle that might be not worth it at the end (depending on how anal you are about optimizing your code). The other reason is that, because AddThis is a fairly popular widget, many of your users are likely to have already downloaded that css file when they encountered the AddThis button on other sites. This means it’s cached in the browser and takes little to no time to download.

Now, as for that FB “like” button, looks like it might be tricky…

Here is the page I’m going to go over. Feel free to dig into the code and if you’ve got any ideas on how to make it even sleeker let me know.

Update: It’s been brought to my attention that Safari in fact supports actual css reflections in the form of –webkit-box-reflect. It’s very cool as it actually allows for dynamic reflections and you can even reflect video. It is however, much like gradients, a webkit only property and so doesn’t do anything for Firefox reflections.

Reflections

Simple reflections are very easy — make a copy of the content, flip it, shift it down and reduce opacity.
To make a copy of the content you have two options, in some cases you can use CSS, and in some you just have to create the content twice in HTML — this may seem “wasteful” but if you think about it, any reflections, JavaScript or otherwise (even native, when/if they come) involve duplicating the content — that’s just the nature of the beast.

To duplicate content in CSS we need to use :after and content (it is somewhat limited though). Here is how I did it for menu links

<a href='#' title='Home'>Home</a></li>

.menu a:after { content:attr(title); }

:after tells CSS what to add after the current element, and content can take text in quotes or a number of elements (W3C spec). In this case I use the title attribute of the link, which is exactly the same as the text of the link. The obvious limitation here is that content can’t contain tags, but it can contain URLs to other content (such as image). I also couldn’t see any way to use the text inside the tag (i.e. innerHTML), which I think is an unfortunate omission since that could’ve been quite useful.

The :after element can be styled just like anything else. So, here is the complete style for the menu item reflection

.menu a:after {
	content:attr(title);
	display:block;
	width:100%;
	position:absolute;
	bottom:-.88em; left:0;
	opacity:.2;
	text-align:center;
	-moz-transform:scaleY(-1);
	-webkit-transform:scaleY(-1);
}

As you can see, I shifted the element, modified its opacity and ‘flipped’ it using scaleY. Here is the spec for –moz-transform, it seems to be identical to Safari/Chrome implementation, they just use the –webkit– prefix instead.

Apparently IE has transforms, using filter property. So if you want to use this and need to make this IE compatible, you should be able to achieve at least some of these effects.

The last touch to make reflections perfect is the fade-out, but it’s only possible in Safari and only on solid background. To do this we need to use gradients. Basically you just put a short div alongside the bottom of the container (with the reflected objects) and make it fade from transparent to the background colour (from top to bottom). This will cover part of the reflection and make it look like it fades out. Here is the complete style for this div

.reflection-gradient {
	display:block;
	width:100%; height:1.6em;
	position:absolute;
	bottom:0; left:0;
	background:-webkit-gradient(linear, left bottom, left top, color-stop(.2, rgba(35,35,41,1)), to(rgba(35,35,41,0)));
}

Here is the breakdown of –webkit-gradient. The short of it is — the first attribute can be “linear” or “radial”; the next two pairs tell the gradient where it goes from and to (if I were to use ‘left bottom, right top’ it would go in a diagonal), next is any number of points where colour changes (i.e. it can be 3, 5, 20 points, etc.). In this case there are only two and they’re telling the browser that, from 0% to 20% of height use colour A, and at 100% height use colour B (“from” and “to” are shortcuts for “color-stop(0,#xxx)” and “color-stop(1,#xxx)” respectively). The thing to note here is that I use rgba colour format, instead of hex, because “transparent” (for the second colour) doesn’t seem to work quite as well — the gradient doesn’t transition properly from transparent to opaque for some reason. Although I think I probably could’ve used hex colour for the first value, but I decided not to mix them up.

One more thing I decided to add to the menu is a bit of animation — as mouse hovers over a menu item it grows a bit. This works in all browsers (since it’s just a font increase) but it’s only animated in Safari/Chrome. The code for that is simple — just add –webkit-transition to the initial style, and in the :hover style make the changes you want, and they’ll be animated. Here are the styles I used for the menu items

.menu a {
	display:block;
	position:relative;
	font-size:1.6em;
	padding:0 .8em;
	...
	-webkit-transition: font-size .1s linear;
}

.menu a:hover {
	font-size:2em;
	padding:0 .4em;
	color:#c8c8c8;
}

The first property of transition specifies what property triggers the animation. So in this case all the attributes, that were changed (on :hover), will animate but only if font-size is among them. You can use “all” to specify that any attribute can trigger the animation. The next property is the time of the animation, and the last one is the timing function. Here is a nice break down of that. I could’ve used scale in this case (instead of font-size), but it didn’t maintain the correct vertical alignment, so I kept it as is. (I change the padding as well to prevent too much shifting around of the other menu items.)

If you check out the example page, you’ll see that there are two menus. The reason for it is that the first one seemed better in my head, but in practise turned out to be more annoying. So I created a variation of it that I think works better (it uses fixed item width), but I decided to leave the first version anyway.

Accordion

Accordion uses the :target trick. You know those in-page links like <a href=‘currentpage.html#top’> — apparently, when an item is activated using a link like that it gets the :target property. In other words, let’s say you have a header like this

<h2 id='header'>Some title here</h2>

and at the bottom of the page you have a ‘top’ link like this

<a href='#header'>Back to top</a>

Then, when you click the “back to top” link, whatever styles are defined in h2:target will be applied to the header.

So then if instead of a header you have a content block with default height/width of 0px, and that block changes its width/height using :target style, then you’re essentially ‘showing’ the content ‘on click’ — pretty nifty ain’t it. Taking it a bit further, stack up (vertically or horizontally) a bunch of links and divs, and have the links target the divs — and voila, you’ve got yourself an accordion.

So that’s how I did the accordion on the example page. The extra “flare” that I added to it is vertical text (using transform, rotate(-90deg)), and for Safari, I also used –webkit-gradient to make the accordion tabs a bit nicer, and –webkit-transition to animate the “opening” and “closing” of the content divs.

Finally, that “gallery” at the bottom of the page uses more or less the same tricks as the menus. I did however run into a problem with it — I couldn’t centre (horizontally) the images, while keeping them “on the floor”. To put them there I had to use absolute positioning (vertical-align:bottom didn’t do the trick for some reason), which doesn’t work with auto-centring (image widths are not consistent) using margin:auto or display:inline-block. If somebody figures it out please let me know.

I find it very cool that all that with new CSS techniques it’s possible to do many of these things without any JavaScript. I only hope that Mozilla adds transitions and gradients soon to their CSS engine.

For example, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights — regular, bold, light and semibold. Each is encapsulated in its own file with a distinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of reading I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a particular element it would use a different version. For example, ArnoPro-Light for 200, ArnoPro-Regular for 400 or normal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t recognized at all, only if I specify explicitly “ArnoPro-Smbd” does it recognize the font. And of course when it’s done like that all but the regular version are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.

In short, the situation is less than ideal. However, there may be a at least a partial fix.

Using @font-face, which was introduced in CSS3, you can simulate the extra font-weights by assigning the specific fonts to each weight. This is a kind of a hack, and one that will not work in all browsers. In fact, I only managed to get it to work in FF3.5. I think IE only supports this for their proprietary font format, which I didn’t used, and for some reason it didn’t work in Chrome 2 either (which I thought supported @font-face), but I didn’t investigate this further, at least not for now.

The way @font-face works is that whatever font attributes you specify for a @font-face rule, they don’t determine how the font looks but rather when it’s gonna get used. For example if you have the following two rules

@font-face {
	font-family: newfont;
	src: local(Arial);
	font-weight: 200;
}
@font-face {
	font-family: newfont;
	src: local(Calibri);
	font-weight: 300;
}

Then if you use the “newfont” font-family with weight 200 it’s going to use Arial, but if you use it with weight 300 it’s going to use Calibri. So we can take advantage of that, and since it uses @font-face we don’t even have to worry if the user’s computer has fonts or not.

For this test I used a Kaffeesatz, a nice looking opentype sans-serif font from Yanone Schriftgestaltung. The font comes with four weights, Thin, Light, Regular and Bold. I used the following styles to create 200 and 300 weights, in addition to normal and bold.

@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Thin.otf);
	font-weight: 200;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Light.otf);
	font-weight: 300;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Regular.otf);
	font-weight: normal;
}
@font-face {
	font-family: Kaffeesatz;
	src: url(YanoneKaffeesatz-Bold.otf);
	font-weight: bold;
}
h3, h4, h5, h6 {
	font-size:2em;
	margin:0;
	padding:0;
	font-family:Kaffeesatz;
	font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

As you can see I defined one font family — Kaffeesatz, and for each weight imported a different font file. After the @font-face rules are defined I can use the 200 and 300 font weights just as I would normal and bold, and the HTML below

<h6>The quick brown fox Jumps over the lazy Dog. 1234567890</h6>
<br>
<h5>The quick brown fox Jumps over the lazy Dog. 1234567890</h5>
<br>
<h4>The quick brown fox Jumps over the lazy Dog. 1234567890</h4>
<br>
<h3>The quick brown fox Jumps over the lazy Dog. 1234567890</h3>

produces the following text

Pretty neat if I may say so myself.

This is definitely more hassle than it should be, and of course requires you to find an open font that you can use with all the weights you need. However, as more browsers begin supporting @font-face, and as font support in browsers grows in general, typography will become more important on the web and hopefully many more fonts will start supporting multiple weights.