I am trying to use a custom css for slider control for that I created new theme folder with name SliderCustom, inside I pasted the CSS and Images from default skin and changed the name of css like "Slider. SliderCustom.css" and changed all the css class name as well. but while I am refereing this custom css, the track bar and drag hand is getting disappear, here I hav attached a screen shot of my code sample, please let me know how can I fix this issue?
3 Answers, 1 is accepted
0
Hello Dony,
Your code looks correct. Could you please post the code of your Vista skin here so that I can test it locally? I noticed that you have some additional styles defined in the HEAD of your page - could you please post those here as well? It would be best if you could post the whole code of your page that demonstrates the problem in this thread.
I would additionally need the exact version of the Telerik.Web.UI assembly that you use and the browser, with which you tested.
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Your code looks correct. Could you please post the code of your Vista skin here so that I can test it locally? I noticed that you have some additional styles defined in the HEAD of your page - could you please post those here as well? It would be best if you could post the whole code of your page that demonstrates the problem in this thread.
I would additionally need the exact version of the Telerik.Web.UI assembly that you use and the browser, with which you tested.
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
dony
Top achievements
Rank 1
Rank 1
answered on 07 Oct 2009, 08:38 AM
Hi This is my Compleat designer page code...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
<style type="text/css">
.sliderView
{
width:435px;
}
.horizontalSliderView .RadSlider
{
margin-top:70px;
margin-left:30px;
}
.horizontalSliderView .ItemsSlider
{
margin-top:10px;
}
.horizontalSliderView .TicksSlider
{
margin-top:60px;
}
.verticalSliderView .RadSlider
{
float:left;
margin-left:65px;
margin-top:0px;
}
.verticalSliderView .TicksSlider
{
margin-left:45px;
}
/* IE6 */
* html .verticalSliderView .RadSlider
{
margin-left:45px;
}
</style>
<link href="Vista/Slider.Vista.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All">
</telerik:RadFormDecorator>
<asp:Label runat="server" ID="lbl"></asp:Label>
<table cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: top;">
<telerik:RadSlider ID="RadSlider_Ticks" runat="server" MinimumValue="0" MaximumValue="100" EnableEmbeddedSkins="false"
Skin="Vista"
SmallChange="5" LargeChange="10" ItemType="tick" Height="70px" Width="350px" AutoPostBack="true"
AnimationDuration="400" CssClass="TicksSlider">
</telerik:RadSlider>
</td>
</tr>
</table>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadSlider_Items">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="lbl" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
</form>
</body>
</html>
--------------------------------------------------------------
THIS IS THE VISTA CSS
--------------------------------------------------
/* r.a.d.slider Telerik skin */
/* -------------------------------------------------------- GLOBAL SLIDER CLASSES -------------------------------------------------------- */
.RadSlider_Vista a
{
cursor: pointer;
}
/* -------------------------------------------------------- GLOBAL SLIDER CLASSES END ----------------------------------------------------- */
/* -------------------------------------------------------- HORIZONTAL SLIDER CLASSES -------------------------------------------------------- */
.RadSlider_Vista.horizontal
{
height: 14px;
}
.RadSlider_Vista.horizontal a.handle
{
width: 10px; height: 7px; line-height: 7px;
background-image: url('Slider/Handles.gif');
background-repeat: no-repeat;
margin-top: 4px;
}
.RadSlider_Vista.horizontal .decrease
{
background-position: 0 0;
}
.RadSlider_Vista.horizontal .increase
{
background-position: -10px 0;
}
.RadSlider_Vista.horizontal a.draghandle
{
top: 0;
width: 9px; height: 14px; line-height: 14px;
margin-top: -4px;
background-image: url('Slider/DragHandle.gif');
background-repeat: no-repeat;
}
.RadSlider_Vista.horizontal a.draghandle:hover
{
background-position: -9px 0;
}
.RadSlider_Vista.horizontal a.draghandle:focus,
.RadSlider_Vista.horizontal a.draghandle:active
{
background-position: -18px 0;
}
.RadSlider_Vista.horizontal .track
{
left: 10px; top: 0;
margin-top: 6px;
height: 4px; line-height: 4px;
background: url('Slider/TrackBgr.gif') repeat-x;
}
.RadSlider_Vista.horizontal .selectedregion
{
height: 4px; line-height: 4px;
background: url('Slider/SelectedRegionHorizontalBgr.gif') right top no-repeat;
}
/* -------------------------------------------------------- HORIZONTAL SLIDER CLASSES END ---------------------------------------------------- */
/* -------------------------------------------------------- VERTICAL SLIDER CLASSES -------------------------------------------------------- */
.RadSlider_Vista.vertical
{
width: 21px;
}
.RadSlider_Vista.vertical a.handle
{
width: 7px; height: 10px; line-height: 10px;
background-image: url('Slider/HandlesVertical.gif');
background-repeat: no-repeat;
margin-left: 4px;
}
.RadSlider_Vista.vertical .decrease
{
background-position: 0 0;
}
.RadSlider_Vista.vertical .increase
{
background-position: 0 -10px;
}
.RadSlider_Vista.vertical a.draghandle
{
left: 0;
}
.RadSlider_Vista.vertical .track
{
left: 0; top: 10px;
margin-left: 6px;
width: 8px;
background: url('Slider/TrackVerticalBgr.gif') repeat-y;
}
.RadSlider_Vista.vertical .selectedregion
{
width: 4px;
background: url('Slider/SelectedRegionVerticalBgr.gif') left bottom no-repeat;
}
.RadSlider_Vista.vertical a.draghandle
{
top: 0; left: 0;
width: 14px; height: 9px; line-height: 9px;
margin-left: -4px;
background: url('Slider/DragVerticalHandle.gif') no-repeat;
}
.RadSlider_Vista.vertical a.draghandle:hover
{
background-position: 0 -9px;
}
.RadSlider_Vista.vertical a.draghandle:focus,
.RadSlider_Vista.vertical a.draghandle:active
{
background-position: 0 -18px;
}
/* -------------------------------------------------------- VERTICAL SLIDER CLASSES END ----------------------------------------------------- */
I tested this in IE8,chrome and Mozilla, no where its displaying the track and handle.
Product Version Number :2009.01.0311.20, this I took from the dll properties.
And I checked with lower version dll(AJAX Q1 2008) its working fine. Here I have Attached a file showing the output that I am getting in browser
0
Hi Dony,
There are no CSS selectors for the items and ticks elements in your Vista skin. I suppose that you copied the Vista skin from a previous version of the suite, in which we had not yet implemented the Items and Ticks functionality. I would recommend that you use the Vista skin from the 2009.01.0311 version and modify it according to your requirements.
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
There are no CSS selectors for the items and ticks elements in your Vista skin. I suppose that you copied the Vista skin from a previous version of the suite, in which we had not yet implemented the Items and Ticks functionality. I would recommend that you use the Vista skin from the 2009.01.0311 version and modify it according to your requirements.
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.