Change Titlebar Text Color (Forecolor)

6 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Jul 2015

    Posted 06 Aug 2015 Link to this post

    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";

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    5 posts
    Member since:
    Jul 2015

    Posted 11 Aug 2015 Link to this post

    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.

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. John
    John avatar
    5 posts
    Member since:
    Jul 2015

    Posted 12 Aug 2015 Link to this post

    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?

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Aug 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017