Change Titlebar Text Color (Forecolor)

[John]

Hi, I'm creating docks dynamically in codebehind (c#) and i'm trying to change colors of each dock.

I am able to change Titlebar's background color but seems like i can't change the forecolor.

I think it's because bootstraps css is overwriting it.

Any idea how i can do this in codebehind?

here is part of the code i have:

dock.TitlebarContainer.BackColor = Color.Black;  //works fine

dock.TitlebarContainer.ForeColor = Color.White;  //DOES NOT WORK, inspecting the element, i can see that it is actually set but is getting overwritten by bootstrap

dock.ContentContainer.BackColor = Color.Back;  //works fine

dock.ContentContainer.ForeColor = Color.White;  //works fine

 

I also tried the following:

dock.TitlebarContainer.Style["color"] = "White !important";

[Danail Vasilev]

Hi John,

You can make the selector heavier with CSS:

CSS:

<style>
    html .RadDock_Bootstrap div.rdTitleBar em {
        color: white;
    }
</style>

ASPX:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadDock ID="dock" runat="server" Title="title" Skin="Bootstrap">
    <ContentTemplate>
        some content
    </ContentTemplate>
</telerik:RadDock>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    dock.TitlebarContainer.BackColor = Color.Black;  //works fine
    dock.TitlebarContainer.ForeColor = Color.White;  //DOES NOT WORK, inspecting the element, i can see that it is actually set but is getting overwritten by bootstrap
    dock.ContentContainer.BackColor = Color.Black;  //works fine
    dock.ContentContainer.ForeColor = Color.White;  //works fine
}

Regards,
Danail Vasilev
Telerik

[John]

Thank you for the reply,

 I have seen this solution before but it does not work for me because this would change ALL of my dock's Title Header Forecolor to be white.

 I would like some docks to have white title forecolor and some docks to have red title forecolor etc.

[Danail Vasilev]

Hi John,

You can use a particular CssClass through which you can make the cascade.

CSS:

<style>
    html .myDock.RadDock_Bootstrap div.rdTitleBar em {
        color: white;
    }
</style>

ASPX:

<telerik:RadDock ID="dock" runat="server" Title="title" Skin="Bootstrap" CssClass="myDock">
    <ContentTemplate>
        some content
    </ContentTemplate>
</telerik:RadDock>

Regards,
Danail Vasilev
Telerik

[John]

thank you Danail that is helpful.

then am i limited to what I set up in my CSS file? i'll have to create CSS class for each color i want to use then correct?

[Danail Vasilev]

Hi John,

The provided selector in my previous post shows how to apply the styles to all RadDocks having "myDock" class and using the "Bootstrap" skin. You can also modify the selector to cascade through other custom class or skin or create different selectors for different colors if you'd like.

Regards,
Danail Vasilev
Telerik