You probably noticed that after you customize the styles for your Wygwam drop-down menus, all the options in the menus become harder to read because uncessary css shows up.

A typical Styles menu before customizing the css:

That same Styles menu after customizing css (nasty!):

What you're seeing is the drop-down menu inheriting the background image and color of this website (scroll up and compare!) and then displaying the styles for Headings 1–5 on top of them, which makes reading and selecting options hard to do.

The Solution

Log into your site's FTP and find panel.css in this folder:
/themes/third-party/wygwam/ckeditor/skins/wygwam2

Open the file and find the class .cke_panel_listItem a. Add a background-color and a background-image rule to the top:

.cke_panel_listItem a
{
background-color:#fff !important;
background-image:none !important;
padding:2px;
display: block;
border: 1px solid #fff;
color: inherit !important;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
}

This will unapply the background image and color from your drop-down menu, but there might still be a small border around your drop-down menu options. To fix that, in the same file find the class ul.cke_panel_list and change the margin from 3px to 0px:

ul.cke_panel_list
{
list-style-type: none;
margin: 0px;
padding: 0px;
white-space: nowrap;
}

Now, all your toolbar drop-down menus in Wygwam should be cleaned up and still display the correct css without having a distracting background image or color inside them:

1 Comment

Jerry Price

May 17, 2012

the panel.css file is no longer there but you can add the rules to editor.css and should be found in the same folder