CODEWITHSUNDEEP
asp.netcss
DNR
DNR

Reputation: 3736

Customizing CSS classes in ASP.NET

I am working on an application where the user will be allowed to change the font color of header titles.

The header titles use a value from cssClass (the cssClass uses font-size, font-color, font-weight & font-family).

Is there a way that I can allow a custom font-color in the css file itself?

One option would be to eliminate font-color from the cssClass, and use Font-Color in the .aspx page.

Upvotes: 2

Views: 128

Answers (5)

FishBasketGordo
FishBasketGordo

Reputation: 23142

If you are letting user's pick just their own font color, it's probably easiest to set the Font-Color attribute or set an inline style attribute on the client side. If you did it on the client side, the interface would be snappier (not requiring a postback for a color change), but you would need to save the user's choice somewhere and set it again on postback.

Here's an example of setting the header colors on the client-side:

With jQuery

function setHeaderColor(color) {
    // The color parameters should be of the form '#000000'
    $('h1, h2, h3').css({ color: color });
}

Without jQuery

function setHeaderColor(color) {
    var hdrs = [].concat(document.getElementsByTagName('h1'))
                 .concat(document.getElementsByTagName('h2'))
                 .concat(document.getElementsByTagName('h3')),
        ii, jj;

    for (ii = 0; ii < hdrs.length; ii += 1) {
        for (jj = 0; jj < hdrs[ii].length; jj += 1) {
            hdrs[ii].item(jj).style.color = color;
        }
    }
}

Upvotes: 0

user898756
user898756

Reputation:

Use javascript to dynamic change the style of the element.

Upvotes: 0

Johnny5
Johnny5

Reputation: 6862

You could use a dynamically created css file, i.e. an aspx page that only output css.

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

h1 {
font-size: 15px;
color: <%= myUsersColor () %>;
}

Upvotes: 0

Erick Petrucelli
Erick Petrucelli

Reputation: 14872

There isn't any problem in having color inside your CSS file and also inline on any HTML element, since inline styles will override the color defined on the file.

Imagine your CSS have this:

a#lnkTest { color: #ff0000; }

But you do it on your aspx.vb:

lnkTest.ForeColor = Color.Blue;

Your generated HTML will be:

 <a id="lnkTest" style="color: #0000ff">Bla bla bla</a>

So, the overrided color works without problems. Also, if you want to do it with JavaScript, it works in the same way:

document.getElementById("lnkTest").style.color = "#0000ff";

Upvotes: 1

IrishChieftain
IrishChieftain

Reputation: 15253

Use a label control between the <h1> tags and use System.Drawing.Color to apply the color.

Upvotes: 0

Related Questions