Allow user to select colors

Question

I have a page where the user inputs a twitch username. It then creates an iframe using javascript with the persons twitch details (name, online or offline etc..) they can then use this iframe on their own website.

However, the style of the frame is determined from a CSS file. What I want is that for the user to use a color picker to pick the background and font color so they can have the iframe match their own website theme.

How would I go about this? I wouldn't want to edit the CSS file because this will change it for everyone using the iframe on their website.

I have seen a website where they create a directory specifically for the colors chosen e.g www.mysite.com/01234/098766/username. But don't know how this is achieved.

I would recommend making a scroll menu (https://www.w3schools.com/howto/howto_js_dropdown.asp), and link each option in the scroll menu to a new stylesheet (https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript). — beefoak, Oct 02 '18 at 17:07
Welcome to SO, Chris. You'll want to store the users' selections somewhere, so you could create a css file for each user, then write to that file when their color selections are made/updated, but for just a few variables, a better way would be to store their selections in a database. Without knowing the details of your architecture it's hard to give specific advice. — nvioli, Oct 02 '18 at 17:08
I dont have user accounts. There is just a textbox for the twitch username and 2 colour selectors for the background and font colour. This then runs the javascript on another page (www.test.com/twitch/?username=USERNAMEHERE)....It is this page that is referenced in the iFrame. — Chris Wright, Oct 02 '18 at 22:53

score 1 · Answer 1 · answered Oct 02 '18 at 17:05

1

How would i go about this?

The style can be modified from js, or you just ship another css file with userspecific colors that overrides the other one:

 <link type="stylesheet" href="yourstyle.css" />
<style>
 * {
  color: #333 !important;
 }
</style>

I have seen a website where they create a directory specific for the colours chosen e.g www.mysite.com/01234/098766/username

They arent directories, thats routing. The server takes the requested path, splits it up and takes the parts as arguments. How that can be done depends on your backend.

answered Oct 02 '18 at 17:05

Jonas Wilms

132,000
20
149
151

1

He's asking for the user to pick a color – Fernando Carvajal Oct 02 '18 at 17:20
If i modified the style via JS wouldnt this change the style for anyone else that is using the iFrame on their website. As mentioned above the webpage contains a textbox for the twitch username and 2 colour selectors for the background and font colour. This then runs the javascript on another page (www.test.com/twitch/?username=USERNAMEHERE)....It is this page that is referenced in the iFrame. They can then go off an put the iframe on thier website. – Chris Wright Oct 02 '18 at 22:59
Does the routing option pull the CSS data from the URL? Im sorry if thats a silly question. This project is something i have been doing to learn HTML, CSS and Javascript. So im only just starting out. – Chris Wright Oct 02 '18 at 23:09

score 1 · Answer 2 · answered Oct 02 '18 at 17:18

1

You can use a input color picker

function colorSelected (element) {
    document.body.style.background = element.value
}

<div>
  Pick a color <input onchange="colorSelected(this)" type="color">
</div>

answered Oct 02 '18 at 17:18

Fernando Carvajal

1,869
20
19

Allow user to select colors

2 Answers2