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

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.

Hello,

I wonder if you have bootstrap themes to use in my projects?

Skin is not applied to RadLabel, when i am using Sass Theme Builder for Bootstrap.

Even if I select all the controls, there is no css file in the downloaded archive that would contain the class name .RadLabel

i followed the doc of telerik

create new material theme in theme builder, download, unzip to App_themes -> MyTheme folder

Added a MySkin.skin file and add <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 

in web.config, add app settings

<add key="Telerik.Skin" value="MySkin"/>
<add key="Telerik.EnableEmbeddedSkins" value="false" />
<add key="Telerik.EnableEmbeddedBaseStylesheet" value="false" />

<add key="Telerik.Web.UI.RenderMode" value="lightweight"/>

Create a new aspx page, add a telerik button control, but skin not implement

I tried add skin="MySkin" on the control, not working

i saw the source code, the button already have "RadButton_MySkin" class there

do i missing anything?

Please help

Thx

Hi..

Again .. I have a custom skinned window. But the CLOSE button does not appear on the 'title'. If I remove the skin. It shows the close.

Any ideas?  thx again!!

            <telerik:RadWindow  Skin="Flom" EnableEmbeddedSkins="false" rendermode="Lightweight" runat="server" ID="RadWindow_NavigateUrl" NavigateUrl="About.aspx" Height="300" Width="350" EnableShadow="true"  IconUrl="images/GlobeSmall.png"  
                  Modal="true" Behaviors="Close" ShowContentDuringLoad="true" RestrictionZoneID="NavigateUrlZone"  Animation="FlyIn" VisibleStatusbar="False">
            </telerik:RadWindow>

    if (e.CommandName == "btnPrint")
            {
                GridEditableItem editedItem = (GridEditableItem)e.Item;

                Session["PO_NO"] = editedItem.GetDataKeyValue("po_no").ToString();
       
                RadWindow_NavigateUrl.NavigateUrl = "ReportViewer.aspx";

                string _title = String.Concat("Flom PO ", " - ", editedItem.GetDataKeyValue("po_no").ToString());

                RadAjaxManager1.ResponseScripts.Add(String.Format("var wnd = $find('{0}'); wnd.show(); wnd.set_title('{1}')", RadWindow_NavigateUrl.ClientID, _title));

            }
     

Hi..

I'd like to apply my custom skin to a GridButtonColumn.

What do I set the ButtonCssClass to?   Skins/Flom/Button.Flom.css ?

thx again!!

The RadWindow right below my RadMenu will not skin. Can't figure that one out!

Any ideas? thx!!!!

This is the masterpage.... 

             <telerik:RadMenu rendermode="Lightweight" Skin="Flom" EnableEmbeddedSkins="false"  runat="Server" ID="RadMenu" EnableShadows="true" EnableRoundedCorners="true"  OnClientItemClicked="openWinNavigateUrl"
                Style="float: none; position: absolute; top: 50px; z-index: 2000" Width="100%" CssClass="RadMenu">
                <Items>

                        <telerik:RadMenuItem IsSeparator="true" />

                    <telerik:RadMenuItem runat="server" Text="Purchase Orders"  NavigateUrl="PurchaseOrders.aspx"/>

                        <telerik:RadMenuItem IsSeparator="true" />

                    <telerik:RadMenuItem runat="server" Text="Shipment History" NavigateUrl="ShippingHistory.aspx"/>

                        <telerik:RadMenuItem IsSeparator="true" />

                    <telerik:RadMenuItem runat="server" Text="Payments" NavigateUrl=""  />

                        <telerik:RadMenuItem IsSeparator="true" />

                    <telerik:RadMenuItem runat="server" Value="About" Text="About" />               
                    
                        <telerik:RadMenuItem IsSeparator="true" />      
                 
                </Items>
            </telerik:RadMenu>
       
        
            <telerik:RadWindowManager ID="RadWindowAbout" rendermode="Lightweight" Skin="Flom" EnableEmbeddedSkins="false" runat="server" Animation="FlyIn" Modal="True" />

            <telerik:RadWindow  Skin="Flom" EnableEmbeddedSkins="false" rendermode="Lightweight" runat="server" ID="RadWindow_NavigateUrl" NavigateUrl="About.aspx" Height="300" Width="350" EnableShadow="true"  IconUrl="images/GlobeSmall.png"  
                  Modal="true" Behaviors="Close" ShowContentDuringLoad="true" RestrictionZoneID="NavigateUrlZone"  Animation="FlyIn" VisibleStatusbar="False">
            </telerik:RadWindow>

     
            <telerik:RadCodeBlock ID="RadCodeBlock1"  runat="server">
                <script type="text/javascript">
                    function openWinNavigateUrl(sender, args) {

                        var itemValue = args.get_item().get_value();
                        if (itemValue == "About") {
                            $find("<%=RadWindow_NavigateUrl.ClientID %>").show();
                        }
                    }

              </script>
                
            </telerik:RadCodeBlock>

Hi.. I created a new theme (as you know)

When I apply the theme - the 'Expand' symbol/graph does not appear.  See attachment. If i remove it I see the '>'.

Here's the generated CSS - how can I make the arrow appear or add my own image?

thx again!

.RadGrid_Flom .rgActiveRow td:not(.rgExpandCol) {
  box-shadow: inset 0px 5px 5px -5px #676767, inset 0px -5px 5px -5px #676767; 
}

.RadGrid_Flom .rgActiveRow td:first-child:not(.rgExpandCol),
.RadGrid_Flom GTT06222018 + td {
    box-shadow: inset 0px 5px 5px -5px #676767, inset 0px -5px 5px -5px #676767, inset 5px 0px 5px -5px #676767;
}

.RadGrid_Flom .rgActiveRow td:not(.rgExpandCol):last-child {
    box-shadow: inset 0px 5px 5px -5px #676767, inset 0px -5px 5px -5px #676767, inset -5px 0px 5px -5px #676767;
}

Hi.

When I apply my custom theme the RadDatePicker does not show the small calendar icon on the right in the input text field.

Any ideas?

thx

Hi..

I added my custom theme. But it does not skin the Radmenu or any of the controls on a page. Page contains master page.

Any ideas what is wrong?  I have the following in the Master

    <link href="~/Skins/Flom/Window.Flom.css" rel="stylesheet" /> 

See attachment

thx again!