Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Theme Changing Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 96
    Comment on it

    Hello Readers! In this blog we will be creating an application through which we can change the theme of a device. For an example we can consider a mobile theme application. In mobile, when we select particular theme the settings changes according to that selected theme like background color, text-styles, font-styles, images, etc. In this application we will be doing the similar work, on selecting a particular theme the background color and the image will change according to the theme. And will be doing this by using simple css and jquery. So, let's start!!

     

    Step 1 : Your are required to create an HTML file and copy the following code to it.

    <div class="listView">
    		<ul>
    			<li data-image="images/1.jpg" class="pink" data-color="#ff6666"><a href="javascript:;">Theme 1</a></li>
    			<li data-image="images/2.jpg" class="grey" data-color="#999"><a href="javascript:;">Theme 2</a></li>
    			<li data-image="images/3.jpg" class="aqua" data-color="#128ED8"><a href="javascript:;">Theme 3</a></li>
    			<li data-image="images/4.jpg" class="light-green" data-color="#BAD877"><a href="javascript:;">Theme 4</a></li>
    		</ul>
    	</div>
    	<div class="container">
    		<div class="heading">
    			<h2> *** Theme Changing Application ***</h2>
    			<p>This application is designed to show the effect of the theme changing program that we use in our mobile phones.</p>
    			<img src="images/1.jpg">
    		</div>
    		<div class="textContent">
    			<p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
    			<p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source</p>
    		</div>
    	</div>

     

    Step 2: Give some style to your sheet.

    *{
    	text-decoration: none;
    	list-style: none;
    }
    body{
    
    	background: #000;
    }
    .container{
    	margin-top: 60px;
    	width: 800px;
    	background: #667499;
    	border-radius: 5px;
    	box-shadow: 0px 1px 15px 5px #fff;
    	color: #fff;
    }
    .heading{
    	text-align: center;
    	font-weight: bold;
    	/* color: #fff; */
    	padding: 20px;
    }
    .heading h2{
    	font-size: 36px;
    	/* color: #23B2D2; */
    }
    .heading p{
    	/* color: #45D9E7; */
    	font-size: 24px;
    	/* text-align: justify; */
    }
    .heading img{
    	width: 100%;
    	border:1px solid #fff;
    }
    .textContent{
    	padding: 20px;
    }
    .textContent p{
    	text-align: justify;
    }
    .listView{
    	position: absolute;
    	right: 40px;
    }
    .listView ul{
    	padding: 30px;
    	background: #fff;
    	border-radius:20px; 
    }
    
    .pink a{
    	color: #ff6666;
    }
    .grey a{
    	color: #999;
    }
    .aqua a{
    	color: #00FFFF;
    }
    .light-green a{
    	color: #BAD877;
    }

     

    Step 3: The jquery code to add functionality

    $(function(){
    
    	$(".listView ul li").click(function(){
    
    		var getValue = $(this).attr('data-color');
    		console.log(getValue);
    
    		$(".container").css("background", getValue);
    		var imgbg = $(this).attr('data-image');
    		$(".heading img").attr("src", imgbg);
    
    	});
    });

     

    Note: you are required to add following links to your HTML file :

    <meta charset="UTF-8">
    
    <title>Theme Changer</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script

     

    Happy Coding :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: