Choose Background color

[anagase]

Hi guys!
I would like to add to my site an option to let the user choose the background color.
This is a nice example for that:
https://www.photosalonhelga.com/

Any idea or suggestions for including this?
thank you as usual!!

[Richard]

Dear @anagase

Thats a cool addition! :)

If i am correct, you can create this will some basic knowledge of Custom HTML, CSS & JS:

https://laytheme.com/documentation.html#custom-javascript

https://www.khanacademy.org/computing/computer-programming/html-css

We could apply this code using ' + More - +HTML ' in the Gridder or through 'Lay Options - Custom HTML & CSS '

When we inspect the page, ( https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools )

we can see that each colour has a 'data-color'- attribute: with each having its own 'background-color'.

Now when we look at the 'body' of the website we see the data-color attribute, controlling the background colour of the website:

So when the Colour button is clicked on the website, based on what was clicked; the 'data-color' atrribute is changed in the 'body'

I did some quick research and found what i think to be similar ideas:

https://stackoverflow.com/questions/33555810/how-to-make-each-element-change-color-when-clicked

https://stackoverflow.com/questions/7874320/updating-the-value-of-data-attribute-using-jquery

I hope this helps, let me know :)

Have a wonderful day and thank you for using Lay Theme

Best
Richard

[Remco van Dun]

Hi @anagase

Do you perhaps care to share how you made this work on your website!? Looks great and trying to figure it out myself.

best,
Remco

[arminunruh]

hey man!

js like

<script>
jQuery(".blue").on("click", function(){
jQuery("body").attr("data-bg-color", "blue");
})
</script>

css like:

body[data-bg-color="blue"],
body[data-bg-color="blue"] #grid,
body[data-bg-color="blue"] .cover-region-desktop .cover-inner,
body[data-bg-color="blue"] #footer-region,
body[data-bg-color="blue"] #custom-phone-grid, 
body[data-bg-color="blue"] .cover-region-phone .cover-inner
{
background-color: blue;
}

then of course you'd need to add some html for your blue button and style it
in "custom html at bottom"

<div class="blue"></div>

css:

.blue{
position: fixed;
bottom: 20px;
left: 50%;
z-index: 10;
transform: translateX(-50%);
}

something like that

and then you'd need to create more buttons, not just blue