Skins and Checked

[Brian]

Hi Telerik,

We use buttons across the page as navigation. So all buttons are setup as follows:

<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="false">
        <Rows>

            <telerik:LayoutRow CssClass="LayoutRowStyle LayoutRowHamburger">
                <Columns>
                    <telerik:LayoutColumn Span="2" SpanXs="12" SpanSm="6" SpanMd="3">
                        <div class="divStandard">
                            <telerik:RadButton runat="server" ID="RadButtonBoardDetails" CausesValidation="false" AutoPostBack="false" Text="Details" Width="100%"
                                OnClientClicked="OnClientClickedNavSubButton" RenderMode="Lightweight" ToggleType="CheckBox" Checked="true" CommandArgument="../boards/boarddetails.aspx">
                            </telerik:RadButton>
                        </div>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanXs="12" SpanSm="6" SpanMd="3">
                        <div class="divStandard">
                            <telerik:RadButton runat="server" ID="RadButtonCreate" CausesValidation="false" AutoPostBack="false" Text="New" Width="100%"
                                OnClientClicked="OnClientClickedNavSubButton" RenderMode="Lightweight" CommandArgument="../boards/helper/boardcreate.aspx">
                                <Icon PrimaryIconCssClass="rbAdd" />
                            </telerik:RadButton>
                        </div>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" SpanXs="12" SpanSm="6" SpanMd="3">
                        <div class="divStandard">
                            <telerik:RadButton runat="server" ID="RadButtonBoardGroupLinks" CausesValidation="false" AutoPostBack="false" Text="Group Links" Width="100%"
                                OnClientClicked="OnClientClickedNavSubButton" RenderMode="Lightweight" CommandArgument="../boards/boardgrouplinks.aspx">
                            </telerik:RadButton>
                        </div>
                    </telerik:LayoutColumn>

.....
        </Rows>
    </telerik:RadPageLayout>

 

So when the button is clicked we keep it "checked" and the theme looks like an "active" page for that button. This ONLY works with some themes. How can we change this in our Skin specific CSS, that would let us keep a checked state, like its being Hovered.

 

Ex: The first  button is marked checked and if using the "Simple" theme, it looks nice when checked. If the "Web20" is used, the checked does nothing to the checked state CSS of the button.

As you can see from the attach files, the Web20 has the same CSS as checked and unchecked.

 

All of the Skins handle the checked state CSS differently. We would like to control is via stylesheets.

 

Thanks for the help!

 

 

 

 

[Brian]

Figured it out. Quite easy if you spend a min looking at the css rules.

I created my own linear-gradient scheme and then had to revert on rbHovered state, so it will change. When its not checked, is already taken care off. This is for my custom Web20 stylesheet, so i dont need "Web20" in the pointer, its already passed in for the client using the theme.

/*this is for toggle CHECKED option of theme, which doesnt have a theme for checked state*/
.RadButton.rbToggled {
    /*background-image: linear-gradient(#8d9dd2,#5762a3 50%,#3c4d8f 50%,#687dc1);  #3c4d8f  #a8cc00*/
    /*background-image: linear-gradient(#83a1ec, #5d79c3 50%, #204dd0 50%, #3c4d8f) !important;*/
    background-image: linear-gradient(#6e92f7, #4d72dc 50%, #204dd0 50%, #3c4d8f) !important;
    color: white !important;
}

    /*this is for toggle CHECKED option of theme, when hover it needs original CSS rules*/
.RadButton.rbToggled.rbHovered {
    background-image: linear-gradient(#dee7f4,#afbede 50%,#98acd5 50%,#cddcf1) !important;
    color: #0f3789 !important;
}

[Doncho]

Hi Brian,

I am glad to know you have solved the issue!

As you correctly observed, the built-in styles of Telerik Controls can be overridden by applying custom CSS with stronger selectors (with higher specificity) than the ones used in the Skin files. 

If the custom styles have the same specificity, the custom styles should be loaded in the beginning of the <body> instead of the <head> element. This is because the default Telerik styles are added programmatically as the last child elements of the head, meaning they will override all styles with the same specificity declared earlier in the head:

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/themebuilder-custom-skin-gets-overridden-and-not-applied

The first two points in the Improve Your Debugging Skills with Chrome DevTools blog showing how to inspect HTML elements and the applied styles could be in help in troubleshooting style-related issues in the future.

Kind regards,
Doncho
Progress Telerik