Implementing User-Controlled Style Changes in ASP.NET

Question

Ok, so we have clients and those clients get to customize their web facing page. One option we are giving them is to be able to change the color of a graphic (it's like a framish-looking bar) using one of those hex wheels or whatever.

So, I've thought about it, and I don't know where to start. I am sending comps out this week to my xhtml guy and I want to have the implementation done at least in my mind before I send things out.

Something about System.Drawing sounds about right, but I've never worked with that before and it sounds hella complicated. Does anyone have an idea?

UPDATE: The color of an image will be changing. So if I want image 1 to be green, and image 2 to be blue, I go into my admin screen and enter those hex values (probably will give them an interface for it) and then when someone else looks at their page they will see the changes they made. Kind of like customizing a facebook or myspace page (OMFGz soooo Werb 2.0)

I don't know, what you exactly wants. How to create a color picker? Or how to work with graphics? If you want only changeing colors, you need only System.Drawing.Color type. If you want a web color picker, on internet are tons of examples. — TcKs
– TcKs, Commented Sep 23, 2008 at 15:22
Edited the title, hope the OP doesn't mind, I hope this helps.. I am not sure what the OP wants though? Colour changing? Themeing? — Rob Cooper
– Rob Cooper, Commented Sep 23, 2008 at 15:24

clweeks · Accepted Answer · 2008-09-23 17:09:04Z

1

I'm sort of intuiting that you'll have a black on white bitmap that you use as the base image. The client can then select any other color combination. This may not be exactly your situation, but it should get us started. (The code below is VB -- it's what I know, but converting to C# should be trivial for you.)

Imports System.Drawing

Private Function createImage(ByVal srcPath As String, ByVal fg As Color, ByVal bg As Color) As Bitmap
    Dim img As New Bitmap(srcPath)
    For x As Int16 = 0 To img.Width
        For y As Int16 = 0 To img.Height
            If img.GetPixel(x, y) = Color.Black Then
                img.SetPixel(x, y, fg)
            Else
                img.SetPixel(x, y, bg)
            End If
        Next
    Next
    Return img
End Function

And then you can do whatever with the image...

answered Sep 23, 2008 at 17:09

clweeks

8747 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Jensen · Accepted Answer · 2008-09-23 15:22:42Z

1

What exactly will be changing? Depending on what's changing you may be able to overlay a transparent png on top of an html background color. Just change the background color and the logo color will change. Of course this limits what you can change, but you'd be surprised how much you can get away with.

And yes, the alternative is to paint the image on the web server. Here's a post on it from hanselman.

answered Sep 23, 2008 at 15:22

Aaron Jensen

6,0701 gold badge33 silver badges40 bronze badges

Comments

TcKs · Accepted Answer · 2008-09-23 15:30:00Z

1

You maybe search for this example. But I'm not sure.

answered Sep 23, 2008 at 15:30

TcKs

26.8k11 gold badges72 silver badges110 bronze badges

Comments

Matt · Accepted Answer · 2008-09-23 15:34:18Z

1

EDIT (since you changed the title):

If you have a small number of colours on the hex-wheel thing then you could simply use JavaScript to change the image source from some pre-made graphics.

If you have a large or changeable set of colours for the user to choose from then I'd use an AJAX call to generate the graphic using the relevant ASP functions you'll find online or in a book.

We'd need to see the frame or graphic that you're talking about.

Might be doable client-side with CSS and JavaScript, or might need to be a server-side graphic generation using PHP or ASP etc.

edited Sep 23, 2008 at 15:34

answered Sep 23, 2008 at 15:25

Matt

9336 silver badges16 bronze badges

Comments

JohnIdol · Accepted Answer · 2008-09-23 15:36:01Z

Standard way to obtain something like this is linking to different CSS files (or classes) depending on the user choice (You probably want to store the user choice and retrieve whenever the same user logs in, but that's out of scope here).

If you're using ASP.NET you could use Themes as an optimized and centralized way to control presentation for your web application. You can have stylesheets in your themes and easily programmatically switch between themes, automatically applying associated stylesheets.

To see how to define ASP.NET page themes have a look at this link:

http://msdn.microsoft.com/en-us/library/ms247256.aspx

To see how to programmatically switch between themes follow this other link:

http://msdn.microsoft.com/en-us/library/0yy5hxdk(VS.80).aspx

Max Cantor · Accepted Answer · 2008-09-23 15:23:23Z

0

I've done stuff like this in PHP before, and I used ImageMagick and GD libraries. I'm not sure if ASP and C# can plug into that using the .NET framework, but it's a start.

answered Sep 23, 2008 at 15:23

Max Cantor

8,3777 gold badges49 silver badges59 bronze badges

Comments

Quibblesome · Accepted Answer · 2008-09-23 15:24:20Z

0

System.Drawing is GDI+ based. Only useful if you're drawing bitmaps in teh worlda web.

answered Sep 23, 2008 at 15:24

Quibblesome

25.4k10 gold badges64 silver badges104 bronze badges

Comments

Andrew Morton · Accepted Answer · 2020-11-06 14:21:57Z

0

Your solution will depend on how complex the graphics are. If you have simple graphics (you can make with MS Paint), then you can use the System.Drawing namespace to re-create the image fairly reliably.

If you have complex graphics, like ones made in photoshop or Paint.NET with multiple layers, you may be better off by allowing the client a choice of only a few colors (4-8-16) and pre-make the graphics to match the selections.

edited Nov 6, 2020 at 14:21

Andrew Morton

25.3k9 gold badges66 silver badges96 bronze badges

answered Sep 23, 2008 at 15:28

StingyJack

19.6k11 gold badges69 silver badges127 bronze badges

Collectives™ on Stack Overflow

Implementing User-Controlled Style Changes in ASP.NET

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related