Missing styles for Bootstrap themes with RadEditor

[Tom]

I used the Telerik Theme Builder to create several themes based on Bootstrap.  They work great with all the controls I've tested so far except for the Editor.

In the Editor, the Color Pickers for text work, but when you go into the table wizard, the Color Picker as well as Alignment, Back Color, and CSS Class have transparent backgrounds, so I'm missing some styles.

The Editor has: 

EnableEmbeddedSkins="false"
ExternalDialogsPath="~/EditorDialogs"  
RenderMode="auto"
ContentAreaMode="Iframe" 
DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd">

Code Behind calls a function to get the correct theme: 

Dim DialogPath As String = SetEditorDialogCss.DialogSkinCSS
radeditorpagetext.DialogsCssFile = DialogPath.ToString
radeditorpagetext.TableLayoutCssFile = DialogPath.ToString

SetEditorDialogCss Function: 

Return "/site/theme1.css"

theme1.css contains: 

@import url("/App_Skins/Bootstrap/theme/Button.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Card.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/ColorPicker.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/ComboBox.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/DataForm.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Dock.Bootstrap.css");
@import url('/App_Skins/Bootstrap/theme/DropdownGrid.MDparty1.css');
@import url('/App_Skins/Bootstrap/theme/DropDownList.MDparty1.css');
@import url('/App_Skins/Bootstrap/theme/DropDownTree.MDparty1.css');
@import url("/App_Skins/Bootstrap/theme/Editor.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/FormDecorator.Bootstrap.css");  
@import url("/App_Skins/Bootstrap/theme/Grid.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Input.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Label.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/ListBox.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Menu.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/MultiSelect.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/PanelBar.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Ribbonbar.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Rotator.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Slider.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Splitter.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/TabStrip.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/ToolBar.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/TreeList.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/TreeView.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Upload.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Window.Bootstrap.css");
@import url("/App_Skins/Bootstrap/theme/Wizard.Bootstrap.css");

What am I missing?  I made several themes and the problem happens with all of them. 

One note about the ThemeBuilder.  The Bootstrap zip file download has 10 copies of Button.Mytheme.css that seem to be identical.

[Rumen]

Hi Tom,

To style the dropdown contents open the theme1.css file that you load via the DialogsCssFile property and put the following CSS class in the end and save it:

.reDropDownBody {
    border-color: #e6e6e6;
    color: #333;
    background-color: #fff;
}

After that clean the browser cache and refresh the page to retest.

For your convenience, I have attached my test project. The Bootstrap skin has been produced with the help of the AJAX ThemeBuilder app.

Regards,
Rumen
Progress Telerik