Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
54 views

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
Telerik team
 answered on 18 Feb 2025
3 answers
1.4K+ views

Hello,

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

 

 

Vessy
Telerik team
 answered on 13 Jan 2021
1 answer
122 views

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

Rumen
Telerik team
 answered on 16 Dec 2019
1 answer
114 views

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

 

 

 

 

 

Vessy
Telerik team
 answered on 10 Aug 2018
17 answers
402 views

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));

            }

     

 


Jonathan
Top achievements
Rank 1
Iron
Veteran
 answered on 16 Jul 2018
2 answers
240 views

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!!

 

 

   GridButtonColumn btnFSR = new GridButtonColumn();
   btnFSR.ButtonCssClass =  ????

Jonathan
Top achievements
Rank 1
Iron
Veteran
 answered on 10 Jul 2018
3 answers
75 views

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>

Rumen
Telerik team
 answered on 05 Jul 2018
8 answers
229 views

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;
}

Rumen
Telerik team
 answered on 04 Jul 2018
1 answer
167 views

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

Rumen
Telerik team
 answered on 03 Jul 2018
3 answers
115 views

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!

Jonathan
Top achievements
Rank 1
Iron
Veteran
 answered on 29 Jun 2018
Narrow your results
Selected tags
Tags
+123 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?