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";
5 Answers, 1 is accepted
You can make the selector heavier with CSS:
CSS:
<style>
html .RadDock_Bootstrap div.rdTitleBar em {
color
:
white
;
}
</style>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadDock
ID
=
"dock"
runat
=
"server"
Title
=
"title"
Skin
=
"Bootstrap"
>
<
ContentTemplate
>
some content
</
ContentTemplate
>
</
telerik:RadDock
>
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

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.
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>
<
telerik:RadDock
ID
=
"dock"
runat
=
"server"
Title
=
"title"
Skin
=
"Bootstrap"
CssClass
=
"myDock"
>
<
ContentTemplate
>
some content
</
ContentTemplate
>
</
telerik:RadDock
>
Regards,
Danail Vasilev
Telerik

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?
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