Lectra Wilcom

Apparel Software

» » Wordpress Programming and Theme Customization Part 3

Wordpress Programming and Theme Customization Part 3

Wordpress Programming and Theme Development 

Class Date : 01/04/17

Theme Basic

  • Personal portfolio 
  • WordPress setup on online
  • How to create subdomain
  • Responsive Theme customization 
  • Plugin Development 
  • Service, Skill, Company, Google Map, Home, About, Terms and condition, policy
  • Wp settings , general, Title, Subtitle, Registration, Email, Address, Author, Contributor etc. 
  • https://colorlib.com/wp/themes/ is best free wordpress theme 
  • I can change the original theme name by renaming it . Though I rename it somebody may understand the original theme name through header and footer. 
  • If we need to change any content writing than we need to change it through database. 
  • Generally we should not work on online. First we will work on xampp/wampp than we will upload int into online
  • In canvas theme to change continuous and read more position we should work in padding

Theme - Assignment by Shakil

Result of Assignment by Shakil


Theme - Assignment CSS Code:
@charset "utf-8";
/* CSS Document */

body
{ background:#CCC; margin:0px;}

.main
{ width:1024px; height:1220px; margin:0px auto; background:#0A0A0A;}

.header
{ width:1024px; height:150px; margin:0px; float:left; background:#0A0A0A;}

.logo
{ width:250px; height:60px; margin:20px 10px 0px 10px; float:left; background:#;
font-weight:bolder; font-size:32px; line-height:60px; color:#FFF; text-align:center;}

.searchbox
{ width:250px; height:60px; margin:20px 10px 0px 10px; float:right; background:#;}

.search
{ width:230px; height:30px; margin:15px 10px 0px 10px; float:right; background:#fff;
border-radius:10px; font-weight:bolder; font-size:14px; line-height:30px; text-indent:10px; color:#999;}

.menu
{ width:1004px; height:50px; margin:20px 10px 0px 10px; float: left; background:#;}

.menu ul{ margin:0px; padding:0px; list-style:none;}

.menu li{ display:inline;}

.menu a{ width:196.4px; height:50px; margin:0px 2px; padding:0px; float:left;
text-align:center; text-decoration:none; color:#FFF; line-height:50px; font-weight:bolder;
font-size:16px; background:#333; border-radius:5px 5px 0px 0px;}

.menu a:hover,#active{ background:#096; text-decoration:underline;}

.line{ width:1024px; height:5px; margin:0px 0px 0px 0px; float:left; background:#060;}

.container
{ width:1004px; height:300px; margin:0px 10px 0px 10px; float:left;
background-image: url(../images/1.jpg); background-repeat:no-repeat;}

.main_box
{ width:1024px; height:215px; margin:0px 0px 0px 0px; float:left; background:#000;}

.box1
{ width:200px; height:200px; margin:8px 70px 0px 10px; float:left; background:;
}

.box2
{ width:200px; height:200px; margin:8px 0px 0px 0px; float:left; background:#;}

.box3
{ width:200px; height:200px; margin:8px 65px 5px 65px; float:left; background:#;}

.box4
{ width:200px; height:200px; margin:8px 0px 0px 0px; float:left; background:#;}

.box_text1
{ width:200px; height:30px; margin:0px 0px 5px 0px; float:left; background:#;
font-weight:bolder; font-size:24px; line-height:30px; color:#FFF; font-family: 'Roboto Slab', serif;}
.box_text2
{ width:200px; height:30px; margin:0px 0px 5px 0px; float:left; background:#;
font-weight:bolder; font-size:24px; line-height:30px; color:#FFF; font-family: 'Roboto Slab', serif;}
.box_text3
{ width:200px; height:30px; margin:0px 0px 5px 0px; float:left; background:#;
font-weight:bolder; font-size:24px; line-height:30px; color:#FFF; font-family: 'Roboto Slab', serif;}
.box_text4
{ width:200px; height:30px; margin:0px 0px 5px 0px; float:left; background:#;
font-weight:bolder; font-size:24px; line-height:30px; text-indent:20px; color:#FFF; font-family: 'Roboto Slab', serif;}

.box1_text
{ width:200px; height:160px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:normal; font-size:18px; color:#FFF; text-align:justify; font-family: 'Yanone Kaffeesatz', sans-serif;}
.box2_text
{ width:200px; height:160px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:normal; font-size:18px; color:#FFF; text-align:justify; font-family: 'Yanone Kaffeesatz', sans-serif;}
.box3_text
{ width:200px; height:160px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:normal; font-size:18px; color:#FFF; text-align:justify; font-family: 'Yanone Kaffeesatz', sans-serif;}
.box4_text
{ width:200px; height:160px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:normal; font-size:18px; color:#FFF; font-family: 'Yanone Kaffeesatz', sans-serif;}


.wrappper
{ width:1024px; height:450px; margin:0px 0px 5px 0px; float:left; background:#333;}

.com_details
{ width:700px; height:445px; margin:0px 0px 0px 15px; float:left; background:#333;}

.com_name
{ width:700px; height:35px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:bolder; font-size:24px; line-height:35px; color:#FFF;}

.box_image
{ width:200px; height:200px; margin:10px 10px 0px 10px; float:left;
background-image:url(../images/box_image.jpg); background-repeat:no-repeat;}

.com_text_box1
{ width:700px; height:230px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:lighter; font-size:16px; color:#FFF; text-align:justify;}

.com_text_box2
{ width:700px; height:100px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:lighter; font-size:16px; color:#FFF; text-align:justify;}

.com_box1
{ width:700px; height:180px; margin:0px 0px 0px 0px; float:left; background:#;
}

.read_more
{ width:120px; height:40px; margin:5px 10px 0px 10px; float:left; background:#0C6;
border-radius:10px; font-weight:bolder; font-size:22px; line-height:40px; text-align:center;
color:#FFF;}

.read_more a{ text-decoration:none; color:#FFF;}


.publication
{ width:240px; height:445px; margin:0px 15px 0px 0px; float: right; background:#;}

.pub_name
{ width:240px; height:35px; margin:0px 0px 0px 0px; float: left; background:#333;
font-weight:bolder; font-size:24px; color:#FFF; line-height:35px; }

.pub_name_box1
{ width:240px; height:80px; margin:10px 0px 26px 0px; float:left; background:#;
font-weight:bolder; font-size:14px; line-height:20px; color:#0F0;}

.title_box1
{ width:240px; height:20px; margin:0px 0px 0px 0px; float: left; background:#;}

.text_box1
{ width:240px; height:60px; margin:0px 0px 0px 0px; float:left; background:#;
text-align:center; color:#fff;}

.circle
{ width:6px; height:6px; margin:8px 5px 0px 5px; float:left; background:#000;
border-radius:10px;}

.pub_name_box2
{ width:240px; height:80px; margin:0px 0px 27px 0px; float:left; background:#;
font-weight:bolder; font-size:14px; line-height:20px; color:#0F0;}

.title_box2
{ width:240px; height:20px; margin:0px 0px 0px 0px; float: left; background:#;}

.text_box2
{ width:240px; height:60px; margin:0px 0px 0px 0px; float:left; background:#;
text-align:center; color:#fff;}

.circle2
{ width:6px; height:6px; margin:8px 5px 0px 5px; float:left; background:#000;
border-radius:10px;}

.pub_name_box3
{ width:240px; height:80px; margin:0px 0px 27px 0px; float:left; background:#;
font-weight:bolder; font-size:14px; line-height:20px; color:#0F0;}

.title_box3
{ width:240px; height:20px; margin:0px 0px 0px 0px; float: left; background:#;}

.text_box3
{ width:240px; height:60px; margin:0px 0px 0px 0px; float:left; background:#;
text-align:center; color:#fff;}

.circle3
{ width:6px; height:6px; margin:8px 5px 0px 5px; float:left; background:#000;
border-radius:10px;}

.pub_name_box4
{ width:240px; height:80px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:bolder; font-size:14px; line-height:20px; color:#0F0;}

.title_box4
{ width:240px; height:20px; margin:0px 0px 0px 0px; float: left; background:#;}

.text_box4
{ width:240px; height:60px; margin:0px 0px 0px 0px; float:left; background:#;
text-align:center; color:#fff;}

.circle4
{ width:6px; height:6px; margin:8px 5px 0px 5px; float:left; background:#000;
border-radius:10px;}

.footer
{ width:1024px; height:100px; margin:5px 0px 0px 0px; float:left; background:#000;}

.footer_left
{ width:502px; height:70px; margin:0px 0px 0px 0px; float:left; background:#000;
font-weight:bolder; font-size:18px; color:#FFF; padding-top:30px; padding-left:10px;}

.footer_right
{ width:512px; height:100px; margin:0px 0px 0px 0px; float:left; background:#;
font-weight:bolder; font-size:18px; color:#FFF;}

.follow_us
{ width:512px; height:30px; margin:0px 0px 20px 0px; float:left; background:#;
font-weight:bolder; font-size:20px; line-height:30px; text-align:center; text-indent:100px; color:#FFF;}

.icon_box
{ width:512px; height:40px; margin:0px 0px 0px 0px; float:left; background:#;
}

.icon1
{ width:30px; height:30px; margin:5px 0px 0px 260px; float:left; background:#333; border-radius:6px; transition:2s;}
.icon2
{ width:30px; height:30px; margin:5px 10px 0px 10px; float:left; background:#333; border-radius:6px; transition:2s;}
.icon3
{ width:30px; height:30px; margin:5px 0px 0px 0px; float:left; background:#333; border-radius:6px; transition:2s; }
.icon4
{ width:30px; height:30px; margin:5px 10px 0px 10px; float:left; background:#333; border-radius:6px; transition:2s;}

.icon1:hover { background:#06F;}
.icon2:hover{ background:#3FF;}
.icon3:hover{ background:#069;}
.icon4:hover{ background:#f00;}


#fa1{ color:#FFF; font-size:20px; margin-left:8px; margin-top:5px;}
#fa2{ color:#FFF; font-size:20px; margin-left:5px; margin-top:5px;}
#fa3{ color:#FFF; font-size:20px; margin-left:5px; margin-top:5px;}
#fa4{ color:#FFF; font-size:20px; margin-left:5px; margin-top:5px;}

Theme Assignment HTML Code

Index.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
</head>

<body>
<div class="main">
<div class="header">
<div class="logo">Superio<span style="color:#090">.com</span> </div>
<div class="searchbox">
<div class="search"> Search</div>
</div>
<div class="menu">
<ul>
<li><a href="index.html" id="active">HOME</a></li>
<li><a href="company.html">COMPANY</a></li>
<li><a href="soluation.html">SOLUATION</a></li>
<li><a href="service.html">SERVICE</a></li>
<li><a href="contacts.html">CONTACTS</a></li>
</ul>
</div>
</div>
<div class="line"> </div>
<div class="container"></div>
<div class="main_box">
<div class="box1">
<div class="box_text1"> Consulting</div>
<div class="box1_text">
Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.
</div>
</div>
<div class="box2">
<div class="box_text2"> Analysis</div>
<div class="box2_text">

Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.

</div>
</div>

<div class="box3">
<div class="box_text3"> Strategy</div>
<div class="box3_text">

Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.
Superio.com is one of free website templates.

</div>

</div>

<div class="box4">

<div class="box_text4"> Service</div>

<div class="box4_text">

<ul>

<li>Superio.com is website.</li>

<li>Superio.com is website.</li>

<li>Superio.com iswebsite.</li>

<li>Superio.com is website.</li>

</ul>

</div>

</div>

</div>

<div class="wrappper">

<div class="com_details">

<div class="com_name">Welcome to Our Company! </div>

<div class="com_text_box1">

<div class="box_image"> </div>

<h4>Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor

dit amet Lorem ipsum dolor dit amet.</h4><br/>

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

</div>

<div class="com_box1">

<div class="com_text_box2">

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet

Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet Lorem ipsum dolor dit amet.

</div>

<div class="read_more"> <a href="#">Read more</a></div>

</div>

</div>

<div class="publication">

<div class="pub_name">Publication </div>

<div class="pub_name_box1">

<div class="title_box1">

<div class="circle"> </div>

PR MANAGEMENT<br/>

</div>

<div class="text_box1">

Lorem ipsum dolor dit amet<br/>

Lorem ipsum dolor dit amet

</div>

</div>

<div class="pub_name_box2">
<div class="title_box2">

<div class="circle2"> </div>

PR MANAGEMENT<br/>
</div>

<div class="text_box2">

Lorem ipsum dolor dit amet<br/>

Lorem ipsum dolor dit amet </div>

</div>

<div class="pub_name_box3">

<div class="title_box3">

<div class="circle3"> </div>

PR MANAGEMENT<br/>

</div>

<div class="text_box3">

Lorem ipsum dolor dit amet<br/>

Lorem ipsum dolor dit amet

</div>

</div>

<div class="pub_name_box4">

<div class="title_box4">

<div class="circle4"> </div>

PR MANAGEMENT<br/>

</div>

<div class="text_box4">

Lorem ipsum dolor dit amet<br/>

Lorem ipsum dolor dit amet

</div>

</div>

</div>

<div class="footer">

<div class="footer_left">&copy;Copyright | Superio.com<br/>

A template design by shahriar

</div>

<div class="footer_right">

<div class="follow_us">Follow us</div>

<div class="icon_box">

<div class="icon1"><a href="#"><i class="fa fa-facebook" id="fa1"></i> </a></div>

<div class="icon2"><a href="#"> <i class="fa fa-twitter" id="fa2"></i></a></div>

<div class="icon3"><a href="#"> <i class="fa fa-linkedin" id="fa3"></i></a></div>

<div class="icon4"><a href="#"><i class="fa fa-pinterest" id="fa4"></i> </a></div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>


Company.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>


<body>

<div class="main">

<div class="header">

<div class="logo">Superio.com </div>

<div class="searchbox">

<div class="search"> Search</div>

</div>



<div class="menu">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="company.html" id="active">COMPANY</a></li>

<li><a href="soluation.html">SOLUATION</a></li>

<li><a href="service.html">SERVICE</a></li>

<li><a href="contacts.html">CONTACTS</a></li>

</ul>

</div>

</div>

</div>

</body>


</html>



Contact.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="main">

<div class="header">

<div class="logo">Superio.com </div>

<div class="searchbox">

<div class="search"> Search</div>

</div>

<div class="menu">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="company.html">COMPANY</a></li>

<li><a href="soluation.html">SOLUATION</a></li>

<li><a href="service.html">SERVICE</a></li>

<li><a href="contacts.html" id="active">CONTACTS</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>


Service.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="main">

<div class="header">

<div class="logo">Superio.com </div>

<div class="searchbox">

<div class="search"> Search</div>

</div>

<div class="menu">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="company.html">COMPANY</a></li>

<li><a href="soluation.html">SOLUATION</a></li>

<li><a href="service.html" id="active">SERVICE</a></li>

<li><a href="contacts.html">CONTACTS</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>


Solution.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>


<body>

<div class="main">

<div class="header">

<div class="logo">Superio.com </div>

<div class="searchbox">

<div class="search"> Search</div>

</div>


<div class="menu">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="company.html">COMPANY</a></li>

<li><a href="soluation.html" id="active">SOLUATION</a></li>

<li><a href="service.html">SERVICE</a></li>

<li><a href="contacts.html">CONTACTS</a></li>


</ul>

</div>


</div>


</div>

</body>

</html>







Share :

Facebook Twitter Google+
0 Komentar untuk "Wordpress Programming and Theme Customization Part 3"

Back To Top