Button that changes site color

Question

Button that changes site color

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm trying to make a button on my website that is sticky, by clicking this button, it collapses right and shows a container with a certain number of colors available for the user to choose, the user choosing the color pallette , the site will change the color of the layout to the pallette chosen by the user ...

My code so far ...

HTML:

<!---- color changer ---->

    <div class="color-chg">
        <a href="#" class="color-btn"><i class="ion-ios-settings-strong"></i></a> 
    </div>

CSS:

.color-chg {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    z-index: 2000;
}

/* Stylyng the icon */
.color-chg a {
  display: block;
  text-align: center;
  padding: 30px;
  transition: all 0.3s ease;
  color: white;
  font-size: 100%;
}

.color-chg a:hover {
  background-color: white;
    color: #74c8d2;
    border: 2px solid #74c8d2;
}

.color-btn {
    border: 2px solid transparent;
  background: #74c8d2;
  color: white;
}

What I want:

Please give me some tips, I have no idea how to do this, I researched, but I can not find anything on the internet, I was checking the source code of this site, but it does not help much ...

Thank you guys!

html css cores layout

asked by anonymous 08.05.2018 / 03:39

2 answers

1

You can via javascript when clicking the colors add a class to the body and create a css for each color.

JS:

$(document).ready(function(){$("#azul_bt").click(function(){$("body").toggleClass("skin_azul");

CSS:

body.skin_azul h1 {
    color: blue;
}

It would be a little painful and it would be ideal to mount everything already thinking about this transition, but it works.

08.05.2018 / 04:20

Function to allow only one vote for equipment I can not list a table in php

score 1 · Accepted Answer

Just the part of collapse with the colors you can do using position:fixed and transition with right to put the hidden palette off the screen.

I made a very simple example only of the collapse part, the dynamics for it to change the colors of the other elements after clicking it, I'll leave it to you. It uses flex , so whenever you add more colors it will break the 4 by 4 line

As I said it is a simple example, but with what you have CSS you can develop this component much more.

See how it went:

html, body {
    width: 100%;
    height: 200%;
    margin: 0;
    padding: 0;
}

.cores {
    display: flex;
    width: 200px;
    position: fixed;
    right: -160px;
    top: 20%;
    transition: right 350ms;
}
.btn {
    width: 40px;
    height: 40px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255,0.6);
    font-size: 2rem;
    transition: color 350ms;
    cursor: pointer;
    line-height: 0;
}
.btn:hover {
    color: rgba(255, 255, 255,1);
}
#btn {
    display: none;
}
.paleta {
    box-sizing: border-box;
    border: 1px solid black;
    width: 160px;
    margin: 0;
    padding: 1rem;
    background-color: #eee;
    display: flex;
    flex-wrap: wrap
}
.paleta h4 {
    margin: 0 0 0.5em;
    width: 100%;
}
.paleta .box {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #666;
    cursor: pointer;
    opacity: 0.65;
    transition: background-color 350ms;
}
.paleta .box:hover {
    opacity: 1;
}
.paleta .box.red {
    background-color: red;
}
.paleta .box.blue {
    background-color: blue;
}
.paleta .box.green {
    background-color: green;
}
.paleta .box.purple {
    background-color: purple;
}
.paleta .box.orange {
    background-color: orange;
}
.paleta .box.black {
    background-color: black;
}
input:checked + .cores {
    right: 0;
}
input:checked + .cores > .btn {
    color: rgba(255, 255, 255,1);
}

<input type="checkbox" id="btn">
<div class="cores">
    <label for="btn" class="btn" role="checkbox">&#x270E;</label>
    <div class="paleta">
        <h4>Cores</h4>
        <div class="box red"></div>
        <div class="box blue"></div>
        <div class="box green"></div>
        <div class="box purple"></div>
        <div class="box orange"></div>
        <div class="box black"></div>
    </div>
</div>