What's New?

[CLOSED] custom css style with settings driven by theme

  1. #1
    Oct 20, 2014, 11:19 PM

    [CLOSED] custom css style with settings driven by theme

    Hello:

    How would you handle a situation where you have to have a custom style sheet that looks different for different themes?

    For instance, let's say I want to have a stylesheet that defines the text color for a row description (or row preview). For themes that have a white background I like to use dark blue but that doesn't work for the accessibility theme where I want to use white or a very light gray.

    So basically I would have to change the style sheet color based on the current theme.

    It would be great If you could provide a sample that shows how to do this.

    Another idea would be to use one of the current stock styles (field note, as an example in this particular case) that change based on the current theme.

    Thank you!
    Last edited by Daniil; Oct 23, 2014 at 4:29 AM. Reason: [CLOSED]
  2. #2
    Oct 21, 2014, 6:42 AM
    Hi @bogc,

    I see the two different approaches, at least.

    1. Register the respective CSS from server side basing on the current theme.

    Example 1
    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string cssPath = "default.css";
            
            if (X.ResourceManager.Theme == Ext.Net.Theme.Gray)
            {
                cssPath = "gray.css";
            }
            else if (X.ResourceManager.Theme == Ext.Net.Theme.Neptune)
            {
                cssPath = "neptune.css";
            }

            X.ResourceManager.RegisterClientStyleInclude("my-css", cssPath);
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Gray" />
        
        <div class="my-div">Hello!</div>
    </form>
</body>
</html>
    default.css
    .my-div {
    color: black;
}
    gray.css
    .my-div {
    color: gray;
}
    neptune.css
    .my-div {
    color: blue;
}
    2. Using the special CSS selector like ".x-theme-gray", ".x-theme-neptune", etc. The "x-theme-[theme name]" CSS class is added on the <html> element.

    Example 2
    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <style>
        .my-div {
            color: black;
        }

        .x-theme-gray .my-div {
            color: gray;
        }

        .x-theme-neptune .my-div {
            color: blue;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Neptune" />

        <div class="my-div">Hello!</div>
    </form>
</body>
</html>
  3. #3
    Oct 23, 2014, 12:54 AM
    Thank you, Daniil. #2 is what I was looking for.

Similar Threads

  1. [CLOSED] New theme style info
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 04, 2014, 9:50 AM
  2. [CLOSED] Neptune Theme - Panel Frame Border Style
    By iansriley in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 09, 2014, 1:11 PM
  3. [CLOSED] Apply Theme-Style to Bottombar
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 27, 2014, 10:31 AM
  4. [CLOSED] Data driven Accordion MVC
    By webppl in forum 1.x Legacy Premium Help
    Replies: 20
    Last Post: Nov 12, 2010, 11:01 AM

Tags for this Thread

Posting Permissions