Joomla Toolbar fix

August 4
2010
in CSS

If you work with Joomla 1.5 and like me, find the right align­ment of tool­bar icons coun­ter­pro­duc­tive (in the default admin theme), then you can fix it with just a few CSS tweaks. Here’s what I mean.

joomla menu fix

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 sev­eral changes. I’ve put the mod­i­fied styles below — the high­lighted lines are the ones that take care of the new, and improved, posi­tion; the rest are col­ors, font sizes, mar­gins, etc., basi­cally 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 posi­tion 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 dimen­sions), and they’ll be cutoff.

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

Personally I find this style of menu much eas­ier to work with, not to men­tion that it’s a bit more compact.

Leave a comment

Reflections and Accordion using CSS only, in Safari and Firefox

July 28
2009
in CSS

Using com­bi­na­tion of CSS trans­forms, tran­si­tions, gra­di­ents and :tar­get it’s pos­si­ble to cre­ate things that usu­ally require JavaScript — such as accor­dion and reflec­tions (in Firefox). Unfortunately, this only works 100% in Safari and Chrome (and I guess any other webkit using browser). In Firefox these ele­ments behave prop­erly, they just don’t have ani­ma­tions or gra­di­ents. As for IE, I didn’t bother with it at all.

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. Keep Reading

Comments 2

Using CSS3 @font-face to “fake” multiple font weights

July 21
2009
in CSS

CSS2 spec­i­fies addi­tional font weights, beyond Normal and Bold. In par­tic­u­larly there are 9 font weights in total — 100, 200, 300, 400 (nor­mal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still some­what lack sup­port for this fea­ture, but more impor­tantly fonts lack sup­port for this. Many fonts how­ever, still come with only nor­mal and bold weights. Moreover, based on a few tests, even pro­fes­sional fonts that come with mul­ti­ple weights (such as thin, light, reg­u­lar, bold, heavy, etc.) don’t actu­ally sup­port these weights in the same way as the CSS2 spec­i­fi­ca­tion dic­tates, in other words they can’t be used out of the box like that.

For exam­ple, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights — reg­u­lar, bold, light and semi­bold. Each is encap­su­lated in its own file with a dis­tinct 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 read­ing 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 par­tic­u­lar ele­ment it would use a dif­fer­ent ver­sion. For exam­ple, ArnoPro-Light for 200, ArnoPro-Regular for 400 or nor­mal, 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 rec­og­nized at all, only if I spec­ify explic­itly “ArnoPro-Smbd” does it rec­og­nize the font. And of course when it’s done like that all but the reg­u­lar ver­sion 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 sit­u­a­tion is less than ideal. However, there may be a at least a par­tial fix.

Using @font-face, which was intro­duced in CSS3, you can sim­u­late the extra font-weights by assign­ing the spe­cific fonts to each weight. This is a kind of a hack, and one that will not work in all browsers. In fact, I only man­aged to get it to work in FF3.5. I think IE only sup­ports this for their pro­pri­etary font for­mat, which I didn’t used, and for some rea­son it didn’t work in Chrome 2 either (which I thought sup­ported @font-face), but I didn’t inves­ti­gate this fur­ther, at least not for now. Keep Reading

Comments 21