Theme Generator

Here is a link to one of my Theme Generators. Click the “Working” button to see the project I created in this Udemy Course.  Now, let me tell you about these Theme Generators.

Sometimes I call this Theme Generator a css generator because a theme for a web page is all about css. This is what makes a web page pretty.

 Some css properties that are very tedious to code.  TEXT SHADOWS   are very beautiful but not too easy to code. The css code for this text shadow is text-shadow:0px 0px 2px #0ff , 0px 0px 2px #0ff , 0px 0px 6px #0ff ; Now you can change these values and create a lot of different and amazing effects, but you will need to save it in your code editor and then go back to the browser and refresh the page to view your effect. Now that would be very tedious and time consuming unless you have a css generator! Because if you had a css generator then you could change the styles or css as you watch it on the page. All you would have to do is change some form elements as you watch your web page light up with beautiful and amazing effects. So this is how you can create a css generator.

First you will need to know a little html, css and JavaScript. I will use JQuery because it makes things a lot easier. So here are the steps.

Create html form elements with unique ids and a common class (For Example, class=’generator’ because it will generate css). Form elements have a value property, and when you change the value of the form element, you can capture that value in a JavaScript variable. 

Next, create a JavaScript function that is called whenever you change any of your form elements with a class=’generator’. So, for example, I would write

$(‘.generator’).change(function(){});

And then inside the curly braces I would target the element I want to style (For Example, <h1 id=’text’>Text</h1> and call the JQuery css method like this $(‘#text’).css({}); So the complete function would look like this:

$('.generator').change(function(){

var horizontal = $('#horizontal_number').val() + 'px';  
var vertical = $('#vertical_number').val() + 'px';  
var spread = $('#spread_number').val(); 
var spread_2 = spread * 1.5 + 'px';  
var spread_3 = spread * 2 + 'px';  
var spread = $('#spread_number').val() + 'px';  
var shadow_color = $('#shadow_color').val(); 

$('#text').css({
'text-shadow' :' ' +horizontal + ' ' + vertical + ' ' + spread +' ' + shadow_color + ' , 0px 0px ' + spread_2 + ' ' + shadow_color + ', 0px 0px ' + spread_3 + ' ' + shadow_color
});
});

So on this web page you would need four form elements, one for the horizontal, one for the vertical, one for the spread, and one for the color. Each of these elements must have a class of generate. 

So go and check out my theme generator. Click the “Working” button to view the final project in my Udemy Course

I hope you have fun!