Saturday, June 28, 2008

TinyMCE Editor Width in Joomla

Wow, I can't believe it's been so long since I wrote anything here. I've been incredibly busy with some really interesting stuff. One of the things I'm working on is a redesign of the soundtraining.net website. It's going to be based on Joomla 1.5. If you have anything to do with website design and you're not familiar with Joomla, you need to get to know it. The website is www.joomla.org. It's an incredibly powerful content management system and it's going to allow us to offer you some really cool stuff on our website. But that's not what I wanted to write about. One of the challenges I've been dealing with is the width of the TinyMCE text editor. Problem is that it has been intruding into the right column and I couldn't figure out how to change it. Turns out the issue was with the toolbar not wrapping. I found this hack which seems to be working. In template.css, I added the following code at the end of the file:

.mceToolbarTop * {
float:left;
}

.mceToolbarTop select {
width:auto!important;
}

.mceToolbarTop option {
float:none;
}

Like I said, so far it seems to be working and I thought maybe some other people could use that info. I found the hack on a Drupal site, but it looks like it works just fine in Joomla. Check back in a few weeks and see if I'm still enthusiastic about it!