Wednesday, October 28, 2009

Vertical expandable WordPress menu

In the default WordPress theme if you apply the Pages widget you get a multi-level menu which is pretty cool but as you might notice the menu is fully open from the first element to the very end of the list showing all the parent an children items.

What i'm going to show you is how to make all the other sub-items disappear and show only the sub-items of the currently active parent menu item.

Just add these three entries to your css file:
 
.widget_pages ul ul li{
  display:none;
}
.widget_pages ul li.current_page_item ul li{
  display:block;
}

.widget_pages ul li.current_page_parent ul li{
  display:block;
}

Tuesday, October 20, 2009

Changing WordPress TinyMCE color palette

Would you like your Wordpress wysiwyg editor to show only the colors you choose? Smth like i've got here:











  1. Find and extract wp-includes/js/tinymce/wp-tinymce.js.gz
  2. Search for "000000" in wp-tinymce.js so you'll find the default colors list and replace it w/ your own.
  3. Archive (gzip) the file back and upload it to the server.
More details:
wp-includes/js/tinymce/wp-tinymce.js.gz This is the gzip encoded version of the file wp-tinymce.js in the same folder. To edit the contents of the encoded file you first need to extract it, edit the .js file, then archive the file back to .gz. Easy but not that easy on a windows machine. Well actually you can skip the extracting part, because you have the original .js file sitting right next to the .gz version.

I used WinRAR to extract wp-tinymce.js.gz but found out that it can't archive files back to .gz, so i needed another program for that.. For gzipping files you'll need smth like GNU Zip (command line) or most probably Win-GZ (Graphical UI).

Ok, so once you've got the wp-tinmymce.js file extracted open it up in a text-editor. Search for "000000" in the file. That's where the default colors for the palette are defined. Just replace 'em with the ones you want and save the file.








Now all you need to do is gzip the file (so that it's named wp-tinymce.js.gz again) and replace it with the one on the server.