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!!
GridButtonColumn btnFSR = new GridButtonColumn();
btnFSR.ButtonCssClass = ????
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!