Color changer

[Snake_]

Your best chance would be trying to integrate a jQuery plugin like this

https://github.com/infario/colorpanel

Seems really difficult. I'll try to figure it out. Thank you for helping

You are welcome

PS : You can also contact the theme author @envira for the same. He would be taking custom skin requests.

https://forum.jquery.com/topic/add-cooki...or-changer

[ChatPlus]

Your best chance would be trying to integrate a jQuery plugin like this

https://github.com/infario/colorpanel

Seems really difficult. I'll try to figure it out. Thank you for helping

You are welcome

PS : You can also contact the theme author @envira for the same. He would be taking custom skin requests.

https://forum.jquery.com/topic/add-cooki...or-changer

This is still blowing my mind.. Is there any way you can come onto my forum and do this for me? I will give you all the permissions required. I'd really appreciate it..

[Snake_]

Add to CSS:

.colormenu {
    width:auto;
    height:40px;
    line-height:40px;
    background:#FFF;
    padding: 10px;
}
.colormenu ul {
    margin: 0;
    padding:0;
}
.colormenu ul li {
    list-style:none;
    margin:0;
    display:inline-block;
    padding: 10px 20px;
    display:inline;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2);
}
.red {
    background: #e74c3c;
}
.green {
    background: #2ecc71;
}
.blue {
    background: #3498db;
}
.yellow {
    background: #f1c40f;
}
.black {
    background: #222;
}
.links {
    float:right;
}
.bar2, .bar3 {
    background: #FFF;
    height:50px;
    line-height:50px;
    padding:0px 20px;
    box-shadow: 0px 0px 8px #111;
    margin-top:30px;
}
html.red .bar2 {
    color:pink;
}
html.green .bar2 {
    color:teal;
}
html.blue .bar2 {
    color:orange;
}
html.yellow .bar2 {
    color:brown;
}
html.black .bar2 {
    color:violet;
}
html.red .bar3 {
    background:pink;
}
html.green .bar3 {
    background:teal;
}
html.blue .bar3 {
    background:orange;
}
html.yellow .bar3 {
    background:brown;
}
html.black .bar3 {
    background:violet;
}

Header template (?) - Where to display choices:

<div class="colormenu">
    <ul class="colchange">
        <li class='red'></li>
        <li class='green'></li>
        <li class='blue'></li>
        <li class='yellow'></li>
        <li class='black'></li>
    </ul>
</div>

And to headerinclude:

<script>jQuery(function ($) {
    $.fn.cookieChoose = function (attr, name) {
        var value = $.cookie(name)
        return this.on("click change", function () {
            value = $(this).attr(attr)
            $("html").attr(name, value)
            $.cookie(name, value, {
                expires: 365,
                path: '/'
            });
        }).filter(function () {
            return $(this).attr(attr) === value
        }).click()
    }
    $('.colchange li').cookieChoose('class', 'class')
});
</script>

[ChatPlus]

Add to CSS:

.colormenu {
    width:auto;
    height:40px;
    line-height:40px;
    background:#FFF;
    padding: 10px;
}
.colormenu ul {
    margin: 0;
    padding:0;
}
.colormenu ul li {
    list-style:none;
    margin:0;
    display:inline-block;
    padding: 10px 20px;
    display:inline;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2);
}
.red {
    background: #e74c3c;
}
.green {
    background: #2ecc71;
}
.blue {
    background: #3498db;
}
.yellow {
    background: #f1c40f;
}
.black {
    background: #222;
}
.links {
    float:right;
}
.bar2, .bar3 {
    background: #FFF;
    height:50px;
    line-height:50px;
    padding:0px 20px;
    box-shadow: 0px 0px 8px #111;
    margin-top:30px;
}
html.red .bar2 {
    color:pink;
}
html.green .bar2 {
    color:teal;
}
html.blue .bar2 {
    color:orange;
}
html.yellow .bar2 {
    color:brown;
}
html.black .bar2 {
    color:violet;
}
html.red .bar3 {
    background:pink;
}
html.green .bar3 {
    background:teal;
}
html.blue .bar3 {
    background:orange;
}
html.yellow .bar3 {
    background:brown;
}
html.black .bar3 {
    background:violet;
}

Header template (?) - Where to display choices:

<div class="colormenu">
    <ul class="colchange">
        <li class='red'></li>
        <li class='green'></li>
        <li class='blue'></li>
        <li class='yellow'></li>
        <li class='black'></li>
    </ul>
</div>

And to headerinclude:

<script>jQuery(function ($) {
    $.fn.cookieChoose = function (attr, name) {
        var value = $.cookie(name)
        return this.on("click change", function () {
            value = $(this).attr(attr)
            $("html").attr(name, value)
            $.cookie(name, value, {
                expires: 365,
                path: '/'
            });
        }).filter(function () {
            return $(this).attr(attr) === value
        }).click()
    }
    $('.colchange li').cookieChoose('class', 'class')
});
</script>

Okay thanks, how would I go about making it change the link color of everything, as well as everything that I have in that green color: 
I know the class names of everything I need to be changeable, but how do I incorporate that to the script?

Thanks for all the help

[Snake_]

The code above is the attribute of the <head>. You can combine with the evolution of .thead etc. Outcome do not know.

Headerinclude:

<script>
	jQuery(function ($) {
    var color = $.cookie('color');
    $('.click').on('click', function (e) {
        color = $(this).data('color')
        $('.thead').css('background', color);		
        $('a:link').css('color', color);
        $.cookie('color', color, {
            expires: 365,
            path: '/'
        });
        return false;
    }).filter(function () {
        return $(this).data('color') === color
    }).click()
});
</script>

Header (?):

<div class="colormenu" style="clear:both">
	<br />
    <ul class="colchange">
        <li class='red'><a href='#' class='click' data-color='#99140D'></a></li>
        <li class='green'><a href='#' class='click' data-color='#2ecc71'></a></li>
        <li class='blue'><a href='#' class='click' data-color='#3498db'></a></li>
        <li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a></li>
        <li class='black'><a href='#' class='click' data-color='hsl(271, 70%, 53%)'></a></li>    
	</ul>
</div>

CSS:

.colormenu ul {
    margin: 0;
    padding:0;
    clear: both;
    text-align: center;
}
.colormenu ul li {
    list-style:none;
    margin: 0%;
    width: 18%;
    height: 40px;
    border: 1px solid;
    display:inline-block;
}
.colormenu ul li a {
    display:inline;
    padding: 0px 44px 24px 44px;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2);
}
.red {
    background: #99140D;
}
.green {
    background: #2ecc71;
}
.blue {
    background: #3498db;
}
.yellow {
    background: #f1c40f;
}
.black {
    background: hsl(271, 70%, 53%);
}
.links {
    float:right;
}
.linkcolor {
    color: #999;
}
		

[ChatPlus]

The code above is the attribute of the <head>. You can combine with the evolution of .thead etc. Outcome do not know.

Headerinclude:

<script>
	jQuery(function ($) {
    var color = $.cookie('color');
    $('.click').on('click', function (e) {
        color = $(this).data('color')
        $('.thead').css('background', color);		
        $('a:link').css('color', color);
        $.cookie('color', color, {
            expires: 365,
            path: '/'
        });
        return false;
    }).filter(function () {
        return $(this).data('color') === color
    }).click()
});
</script>

Header (?):

<div class="colormenu" style="clear:both">
	<br />
    <ul class="colchange">
        <li class='red'><a href='#' class='click' data-color='#99140D'></a></li>
        <li class='green'><a href='#' class='click' data-color='#2ecc71'></a></li>
        <li class='blue'><a href='#' class='click' data-color='#3498db'></a></li>
        <li class='yellow'><a href='#' class='click' data-color='#f1c40f'></a></li>
        <li class='black'><a href='#' class='click' data-color='hsl(271, 70%, 53%)'></a></li>    
	</ul>
</div>

CSS:

.colormenu ul {
    margin: 0;
    padding:0;
    clear: both;
    text-align: center;
}
.colormenu ul li {
    list-style:none;
    margin: 0%;
    width: 18%;
    height: 40px;
    border: 1px solid;
    display:inline-block;
}
.colormenu ul li a {
    display:inline;
    padding: 0px 44px 24px 44px;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.2);
}
.red {
    background: #99140D;
}
.green {
    background: #2ecc71;
}
.blue {
    background: #3498db;
}
.yellow {
    background: #f1c40f;
}
.black {
    background: hsl(271, 70%, 53%);
}
.links {
    float:right;
}
.linkcolor {
    color: #999;
}
		

Now it's not working at all. I can't seem to get anything to work..

[Snake_]

The code you added to 'headerinclude' at the beginning, before defining jQuery. Move it even at the end.

[ChatPlus]

The code you added to 'headerinclude' at the beginning, before defining jQuery. Move it even at the end.

I managed to get it working, but can't seem to get some of the things to properly change color. I want the nav at the top to change, and only some links. Do I have to make a new class for the links that I don't want changed?

[meetdilip]

Try this

Header Include

<script>
    jQuery(function ($) {
   var color = $.cookie('color');
   $('.click').on('click', function (e) {
       color = $(this).data('color')
       
       $('.nav').css('background-color',color);
       $('.shadetabs').css('background-color',color);
       $('.thead').css('background', color); 
       $('.forum_on').css('color',color);

       $.cookie('color', color, {
           expires: 365,
           path: '/'
       });
       return false;
   }).filter(function () {
       return $(this).data('color') === color
   }).click()
});
</script>

[ChatPlus]

Try this

Header Include

<script>
    jQuery(function ($) {
   var color = $.cookie('color');
   $('.click').on('click', function (e) {
       color = $(this).data('color')
       
       $('.nav').css('background-color',color);
       $('.shadetabs').css('background-color',color);
       $('.thead').css('background', color); 
       $('.forum_on').css('color',color);

       $.cookie('color', color, {
           expires: 365,
           path: '/'
       });
       return false;
   }).filter(function () {
       return $(this).data('color') === color
   }).click()
});
</script>

Okay, I think I got it working. Is there a way I can keep the fade on thead? And is there a way I can add a hue over the logo?