Ajax Control Toolkit - Accordion

[Aarsh]

Hi ! I am using this control and looking for some css for it, at the moment it looks odd with my Windows 7 theme. Please refer to the attached screen snip for details.

[Danail Vasilev]

Hello Aarsh,

The AjaxControlToolkit project is not related to our software and therefore we do not support custom implementations of its skins. This also means that you cannot apply a RadControl's skins to it directly.

Nevertheless you can inspect the colors from the skin you want to mimic and use them in your CSS for the Accordion control, essentially creating your own AjaxControlToolkit skins. For example, some of the colors that our Windows7 skin applies are:

• #dde9f7 - light blue
• #c3dcfc - active color
• #b8cbde - border normal
• #c1dbfc - border hover

Note that RadFormDecorator is supposed to decorate Buttons, Checkboxes, FieldSets, Labels, Headings etc (you can find the full list of supported elements here and here, it is essentially the standard form HTML elements). Therefore if you have some of these elements in the Accordion and they do not have a CSS class applied and your page uses RadFormDecorator they will be decorated.

Kind regards,
Danail Vasilev
the Telerik team

[Aarsh]

Hi Danail,

Thanks for your reply, the thing here is I already am using the RadFormDecorator control on that page where I made sure that all controls are being decorated except the scrollbar. You may notice the same, from the screen shot that I've provided in my first post, and it may give some idea about the colours that I want Any way, I've also attached the layout of my screen and below is the CSS classes I am using for the accordion control.

Thank you so much,,,
-Aarsh

<style type="text/css">
08.        .accordion {
09.            width: 400px;
10.        }
11.
12.        .accordionHeader {
13.            border: 1px solid #2F4F4F;
14.            color: white;
15.            background-color: #2E4d7B;
16.            font-family: Arial, Sans-Serif;
17.            font-size: 12px;
18.            font-weight: bold;
19.            padding: 5px;
20.            margin-top: 5px;
21.            cursor: pointer;
22.        }
23.
24.        .accordionHeaderSelected {
25.            border: 1px solid #2F4F4F;
26.            color: white;
27.            background-color: #5078B3;
28.            font-family: Arial, Sans-Serif;
29.            font-size: 12px;
30.            font-weight: bold;
31.            padding: 5px;
32.            margin-top: 5px;
33.            cursor: pointer;
34.        }
35.
36.        .accordionContent {
37.            background-color: #D3DEEF;
38.            border: 1px dashed #2F4F4F;
39.            border-top: none;
40.            padding: 5px;
41.            padding-top: 10px;
42.        }
43.    </style>

[Danail Vasilev]

Hi Aarsh,

Styling of the scrollbars is not included in the W3C standards. The idea is that the scrollbars are part of the browser and not the website. Nevertheless there are browsers that allow the styling of the scrollbars (e.g. IE9 and WebKit). You can find useful that discussion on the topic and this request in BugZilla treats this functionality.

Regarding the styling of the Accordion contrl - as I have already mentioned in my previous post - it is out of the scope of our support and you can create your own styles for it as you see fit.

Kind regards,
Danail Vasilev
the Telerik team

[Aarsh]

Tell you what, you can overlook the scrollbar thing, I somehow feel complete distraction to my original question.









Bottom line: how can I make this guy to look like the telerik them that looks like the accordion control on this page ? (I tried to use the css on that page could get it done)

Did I made my self clear ?
____________________________________________________________