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
    • 313
    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">
    			<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>
    	<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 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>


    Step 2: Give some style to your sheet.

    	text-decoration: none;
    	list-style: none;
    	background: #000;
    	margin-top: 60px;
    	width: 800px;
    	background: #667499;
    	border-radius: 5px;
    	box-shadow: 0px 1px 15px 5px #fff;
    	color: #fff;
    	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;
    	padding: 20px;
    .textContent p{
    	text-align: justify;
    	position: absolute;
    	right: 40px;
    .listView ul{
    	padding: 30px;
    	background: #fff;
    .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

    	$(".listView ul li").click(function(){
    		var getValue = $(this).attr('data-color');
    		$(".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="">
    <!-- jQuery library -->
    <script src=""></script>
    <!-- Latest compiled JavaScript -->
    <script src=""></script


    Happy Coding :)

 0 Comment(s)

Sign In

Sign up using

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: