CSS Variables 2

jshurst · May 17, 2006

I've been wondering how to programmatically change the background color for my whole website. I really wanted to continue to just use my css page. I've been thinking about it, but hadn't really worked on it today until a little while ago. This might be really obvious to some people, but I thought that I would share what I did. So here it goes.

I created a sytle sheet called "css.css." Here's what it looks like...

Code:

body 
{
	background-color:@BackgroundColor;
	color:@Font;
}

Then I created a webform called "css.aspx" and ripped out all of the code except for the page directive. Here's what that looks like...

Code:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="css.aspx.vb" Inherits="MyWebApp.css"%>

Then in the page load of css.aspx I added the following code...

Code:

'Open a file for reading
            Dim FILENAME As String = Server.MapPath("css.css")

            'Get a StreamReader class that can be used to read the file
            Dim objStreamReader As StreamReader
            objStreamReader = File.OpenText(FILENAME)

            'Now, read the entire file into a string
            Dim contents As String = objStreamReader.ReadToEnd()

            'replacing my css "variables"
           
            contents = Replace(contents, "@BackGroundColor", "Black")
            contents = Replace(contents, "@Font", "White")

            'write the contents (which will really just be my css file!
            Response.Write(contents)

            objStreamReader.Close()

Then I created a regular webform and placed the reference to css.aspx in the <head> of the page, like so...

Code:

<link href="css.aspx" rel="stylesheet" type="text/css">

And that's it. Now I can change my variables in my css page. Just thought I would share that with everyone. If anyone has any better ideas then I'm definitely open to them.

L8r.

J

jshurst · May 17, 2006

Ok, so this doesn't appear to work in firefox. I hate when that happens! All I really wanted to do was to change the background color of my css, referenced in my masterpage. So I wound up doing it in with multiple css pages. Geez, what a waste.

If I first render the page in IE and then save it to the desktop and then open it in firefox it works perfectly. asp.net seems to do that a lot (like with width of asp.net controls for example).

Anyway I used the code below to change my stylesheet randomly.

Code:

protected void Page_Load(object sender, EventArgs e)
    {
        //Get the htmlHead your aspx page is using (from the Master page)
        //Master page must include the runat server attribute in the head tag: <head runat="server">
        HtmlHead head = (System.Web.UI.HtmlControls.HtmlHead)Page.Header;

        HtmlLink lnk = new HtmlLink();

        string cssName = @"css/" + GetCSSName();

        lnk.Attributes.Add("href", cssName);
        lnk.Attributes.Add("type", "text/css");
        lnk.Attributes.Add("rel", "Stylesheet");

        head.Controls.Add(lnk);
    }
    private string GetCSSName()
    {
        string[] ColorArray = {"gray.css", "green.css", "navy.css", "purple.css", "black.css"};
        Random random = new Random();
        return ColorArray[random.Next(0, 5)];
    }

BoulderBum · May 17, 2006

Did you try changing the Response.ContentType to "text/css". You should be able to do the CSS/ASPX trick and cross-browser compatible.

The way I've seen it done before, you clear out the ASPX markup (except for the directives) and add controls that don't need to be contained in the form. I believe Labels and Literal controls will do the trick. From there, you can set the label/literal values in the code-behind (which you'd do in lieu of running a replace on the @Background, etc.).

That said, are you running 2.0? You can do something similar with actual CSS files and Themes if you'd like.

ca8msm · May 18, 2006

I'm not sure of any benefit that this method has. With standard css files, you move all the styling out to a seperate file which can then be modified outside of the system without having to release a new version. With your method, all of the styling is hardcoded into the application and any changes will mean a new release will have to be issued.

If you simply had a link to the stylesheet on every page of your site (or used Master Pages/Page Inheritance) then you'd only need one link and any changes to the CSS file would change the styling for the whole site. This is a much better method in my opinion.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

jshurst · May 18, 2006

BoulderBum, I'll try your way and see if it works.

ca8msm, I just want to be able to change different attributes on all of my pages. Let's say that I want to change the header and footer color each time the page loads (for every page on the site). I have a link to the stylesheet only in the master page and all other pages inherit their layout from the master page. How else would I change the colors on the page_load?

As far as releasing a new version all I would have to do would be to push out the master page. Maybe there is an easier way to do it though...

ca8msm · May 18, 2006

Maybe there is an easier way to do it though...

I think there's a much easier way. If you define a class in your CSS file, then all you have to do is change the CSSClass of the relevant control (i.e your header/footer). This way, the CSS can still be updated externally and doesn't involve re-publishing the website.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

BoulderBum · May 18, 2006

I think the advantage to doing this dynamically is that you can make the stylesheet data-driven and presented in a way that doesn't require the users to know CSS. For instance, if each user logs in and wants to change the background color of the pages to suite their fancy, each user may do so by using a color-picker which saves the background color to their profile in a database which is read in turn by the ASPX stylesheet.

That way you can tap the power and ease of use of CSS, but make it customizeable and dynamic.

Otherwise, if you don't need that level of, um, dynamism (is that a word?) I think ca8msm is absolutely right.

jshurst · May 18, 2006

You're the man BoulderBum. Looks like the changing the response type worked. Thanks.

BoulderBum · May 18, 2006

No problem.

ca8msm · May 19, 2006

I think the advantage to doing this dynamically is that you can make the stylesheet data-driven and presented in a way that doesn't require the users to know CSS. For instance, if each user logs in and wants to change the background color of the pages to suite their fancy, each user may do so by using a color-picker which saves the background color to their profile in a database which is read in turn by the ASPX stylesheet.

Good point BoulderBum. I guess I hadn't thought about that level of personalisation.

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Variables 2

jshurst

Programmer

jshurst

Programmer

BoulderBum

Programmer

ca8msm

Programmer

jshurst

Programmer

ca8msm

Programmer

BoulderBum

Programmer

jshurst

Programmer

BoulderBum

Programmer

ca8msm

Programmer

Similar threads

Part and Inventory Search

Sponsor