You can change your whole site CSS on every reload so that the user will be happy to see the new color theme on your every reload of page. The CSS will also be change when user will open your any new page or post. This can attract your visitor and can make your traffic graph high.
Now this idea can be completed by using pure JavaScript not even jquery of CSS3 so it means that it is cross browser and you dont have to make your blog /site load time high. It is a short code that will add new CSS on your main CSS file on every reload and you can change unlimited CSS on one reload. So now without any more preface, just read the tutorial and garb the code to make your site more beautiful.
Table of Contents
Features:
1.) Pure JavaScript Code.
2.) No JQuery.
3.) No CSS3
4.) CSS will be change on every reload.
5.) CSS wil also be change on next page.
How To Use Auto CSS Changer On Reload?
Step 1:) First of all go to your desired page and add the below JavaScript there.
<script type='text/javascript'>
window.onload = function(){
var colorList = ['#0099cc','#00cc99','#99cc00','#9900cc','#cc9900','#cc0099','#AA0000','#009900','#AA0000','#009900'];
var choice = Math.floor((Math.random()*10)+1);
var style = document.createElement("style");
style.appendChild(document.createTextNode("body{background-color:" + colorList[choice] + ";}h1{color:" + colorList[choice] + ";}p{color:" + colorList[choice] + ";}"));
document.head.appendChild(style);
}
</script>Step 2:) Now add the below style CSS there too.
<style type="text/css">
body{background-color:#000000;}
h1{background-color:#000000;}
p{background-color:#000000;}
</style>Step 3:) Now save it and its done.
Here when you will reload your page then you will see that your page Background, H1, P tags are changing colors every reload. So here you can add more CSS changing rule in JavaScript. If you want to get a complete DEMo then make a .html file in your PC and paste the below code there and run it on browser.
<!DOCTYPE html>
<html>
<head>
<title>Auto CSS Changer On Reload</title>
<script type='text/javascript'>
window.onload = function(){
var colorList = ['#0099cc','#00cc99','#99cc00','#9900cc','#cc9900','#cc0099','#AA0000','#009900','#AA0000','#009900'];
var choice = Math.floor((Math.random()*10)+1);
var style = document.createElement("style");
style.appendChild(document.createTextNode("body{background-color:" + colorList[choice] + ";}h1{color:" + colorList[choice] + ";}p{color:" + colorList[choice] + ";}"));
document.head.appendChild(style);
}
</script>
<style>
body{background-color:#000000;}
*, body{margin:0; padding:0;}
h1{font-size:24px; text-align:center; padding:10px;}
p{font-size:14px; text-align:justify; padding:20px;}
</style>
</head>
<body>
<h1>Auto CSS Changer On Reload</h1>
<h2>Reload The Page To Change The CSS</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</body>
</html>Customization:
You have to change JavaScript only. Rest CSS and HTML codes will be your main template one. Add your desired color in JavaScript that will be pick random. You can add more CSS rule in JavaScript.
Last Words:
This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.
Be the first to write a comment.