This is a migrated thread and some comments may be shown as answers.

Apply style of a control to an another

3 Answers 53 Views
SkinManager
This is a migrated thread and some comments may be shown as answers.
SCT
Top achievements
Rank 1
SCT asked on 07 Aug 2012, 06:21 AM

 

Good day,

We would like to know if is there any way to apply style of a control to an another. We have table inside RadPanelBar. Its looks fine with Metro style. Text is gray (#767676) and also there is bigger space between rows. If table is outside RadPanelBar, text is black and row space is not so big.

Question is how to apply style from RadPanelBar to another object. We apply class rfdAspLabel. Text is good colored but that’s all. There is now style for table formatting.


Thank you in advance for your advice.

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 10 Aug 2012, 07:51 AM
Hello,

This cannot be achieved out of the box using RadSkinManager as it styles only RadControls.

To have an element that is not a part of a RadPanelBar use its styles, you could inspect the CSS rules applied inside the control in a tool like Firebug and assign them to the outside element through a different class, for example:
.metroTable{
    color: #767676;
    font: 12px/24px "Segoe UI",Arial,sans-serif;
}


<table class="metroTable">
    <tr>
        <td>
            Row1
        </td>
    </tr>
    <tr>
        <td>
            Row2
        </td>
    </tr>
    <tr>
        <td>
            Row3
        </td>
    </tr>
</table>

Or you can see what is the selector used to apply these styles to the table and give the outside table the same class name as the one used there. However, this may lead to the need of adding a container element to build the same hierarchy in the classes:
<div class="RadPanelBar_Metro">
    <table class="rpTemplate">
        <tr>
            <td>
                Row1
            </td>
        </tr>
        <tr>
            <td>
                Row2
            </td>
        </tr>
        <tr>
            <td>
                Row3
            </td>
        </tr>
    </table>
</div>


Greetings,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
SCT
Top achievements
Rank 1
answered on 15 Aug 2012, 06:37 AM

Hi,

Thank you very much. Yes that’s the way to solve the problem. But in our web site is possible to change style by user. Metro is default style, but this option is available. So we are looking for a solution where is possible to use the style of RadPanelBar outside RadPanelBar.
Something similar like Panel etc. Where a style is automatically changed in depends on user settings.
In our context is RadPanelBar used as “configuration” panel like in yours web site. So there is content inside and outside RadPanelBar on one page. So we need to make it look the same.

Thank you in advance for your advice.

0
Accepted
Tsvetina
Telerik team
answered on 17 Aug 2012, 02:00 PM
Hello,

You can use a code block to evaluate the skin currently used by the panel bar and render it in the class name of the wrapper div. Or if you have a skin manager, directly the Skin value of the manager:
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true">
</telerik:RadSkinManager>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server">
    <Items>
        <telerik:RadPanelItem Text="Item1">
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item1">
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item2">
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <div class="RadPanelBar_<%=RadSkinManager1.Skin %>">
        <table class="rpTemplate">
            <tr>
                <td>
                    Row1
                </td>
            </tr>
            <tr>
                <td>
                    Row2
                </td>
            </tr>
            <tr>
                <td>
                    Row3
                </td>
            </tr>
        </table>
    </div>
</telerik:RadCodeBlock>



Greetings,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
SkinManager
Asked by
SCT
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
SCT
Top achievements
Rank 1
Share this question
or