PDA

View Full Version : [CLOSED] custom css style with settings driven by theme



bogc
Oct 21, 2014, 12:19 AM
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!

Daniil
Oct 21, 2014, 7: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>

bogc
Oct 23, 2014, 1:54 AM
Thank you, Daniil. #2 is what I was looking for.