wordpress start

download xamp install

then download wp

wordpress download zip extract file into htdoc > teh rename wordpress folder name

as demo like this D:\xampp\htdocs\demo

then go to wp D:\xampp\htdocs\demo\wp-content

then go to    D:\xampp\htdocs\demo\wp-content\themes

then rename   seven twinty theme folder name as demo and work on following pages

header.php
index.php
footer.php

=======go to wp admin and give password======

http://localhost/demo/wp-admin/

=========wordpress===
create database
---------
http://localhost/phpmyadmin/

go to current theme

http://localhost/ur-project-name/wp-login.php

==============get style sheet dir dynamyc============

<link href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css" rel="stylesheet">

==============get imgages dir dynamyc============

<?php bloginfo("template_url");?>/images/

==============get js dir dynamyc============

<?php echo get_template_directory_uri(); ?>/


====go  and open style.css and remove entire css onle leave the theme tile and description====

D:\xampp\htdocs\demo\wp-content\themes\demo/style.css

how to design heading style

How to Design Heading Style

/* css */

 section.practice-areas h1{
    background: url(../images/heading-style.png) no-repeat center bottom;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 50px;
}

html

<section class="practice-areas">
           <div class="container">
              <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <h1>Our <strong>Practice areas</strong></h1>
                  </div>
              </div>
           </div>
</section>
 

Refrence Sites

////-------Refrence Sites------////

http://www.coffeecup.com/     fluid design help

full width container fluid-container working

/*full width container working*/

.lower-middle-section img {

1. height: auto;
2. max-width: 100%;
3. vertical-align: top;

}

.lower-middle-section img {

1. width: 100%;
2. height: 692px !important;
3. object-fit: cover;

}

.about-charis-jhones .container{ this is container of bootstrap
/*width:100%;*/
/*max-width:100%;*/
   max-width: 85.5em;  define this line
}

.lower-middle-section .container {
    max-width: 85.5em;
    width: 100%;
}

shahzad_samejo@yahoo.com

Start Media Quaries by yasir

/* Start Media Quaries
==================================== */
@media only screen and (min-width: 992px) and (max-width:1199px) {
}

@media only screen and (max-width: 991px) {
.main-nav ul li a span {
display:none;
}

.main-nav ul li.active a {
background:#1e8a7b;
}

.menu {
border:none;
}

.main-nav ul li ul {
background-color: transparent;
opacity: 1;
position: static;
transition: none;
}

.main-nav ul li a {
line-height: 0px;
border-radius: 0;
-o-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-webkit-border-radius: 0;
}

.main-nav ul ul li {
border: none;
}

.mean-container .mean-bar {
position:static !important;
}

.main-nav ul ul a ,
.main-nav ul ul a:link {
line-height: inherit;
}

.main-nav ul ul a ,
.main-nav ul ul a:link {
min-width: inherit;
}

.main-nav ul li ul ul {
margin: 0 !important;
}

header .navigation {
display: none;
}

.menues_container {
background:none;
width:auto;
z-index:0;
}

.main-nav li a i {
color: #fff;
}
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 480px) {
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

@media (-webkit-max-device-pixel-ratio) {
}

/* ========================= XXX ========================= XXX ========================= */
/* ========================= XXX ========================= XXX ========================= */

set social icons for all with color

set social icons for all with color

CSS

.stay-in-touch ul { list-style:none; padding-top:50px;}
.stay-in-touch li { float:left; width:20%; font-size:16px; color:#000; text-align:center; padding-right:10px;}
.stay-in-touch li a{font-size:16px; color:#000;font-family: 'Roboto', sans-serif;}
.stay-in-touch li a i {width:90px; height:90px; border:1px solid #fff; margin:0 auto 20px; color:#fff; font-size:35px; border-radius:50%; padding-top:28px;}

.stay-in-touch li a:hover i.fa.fa-bell{ background:#432c7b; border:1px solid #432c7b;}
.stay-in-touch li a:hover i.fa.fa-facebook{ background:#3b5998; border:1px solid #3b5998;}
.stay-in-touch li a:hover i.fa.fa-youtube-square{ background:#bb0000; border:1px solid #bb0000;}
.stay-in-touch li a:hover i.fa.fa-twitter{ background:#55acee; border:1px solid #55acee;}
.stay-in-touch li a:hover i.fa.fa-instagram{ background:#125688; border:1px solid #125688;}

slider

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
   .container{
  width:800px;
  height:500px;
  margin:0px auto;
  border:1px solid red;
  }
     .container ul {
margin:0px;
padding:0px;
list-style-type:none;
}
.container ul li {
  list-style-type:none;
}
.container ul li{
  display:none;
  position:absolute;
}
 
</style>
</head>
<body>

<div class="container">

    <ul id="full">
        <li class="active" id="img1" style="display:block;">
           <img   src="image/img_01.jpg">
         
        </li>
       <li  id="img2">
           <img  src="image/img_02.jpg">

        </li>
      <li id="img3">
           <img   src="image/img_03.jpg">
       
        </li>
        <li id="img4">
           <img   src="image/img_04.jpg">
 
        </li>
    </ul>
       
   
   
</div>
  <a href="#" id="prev">previous</a>
           <a href="#" id="next">next</a>
<script>
$(document).ready(function(){

    $("#prev").click(function(){
     
var elem=  $("#full").children(".active");

if(!elem.is(":last-child"))
{
elem.fadeOut(300);
    elem.removeClass("active");
var news=  elem.next().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
else
{
    elem.fadeOut(300);
    elem.removeClass("active");
var news=  $("#full li").first().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}

     
    });

$("#next").click(function(){
    var elem=  $("#full").children(".active");
if(!elem.is(":last-child"))
{
elem.fadeOut(300);
    elem.removeClass("active");
var news=  elem.next().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}
else
{
    elem.fadeOut(300);
    elem.removeClass("active");
var news=  $("#full li").first().addClass("active").fadeIn();
$("#full").children().removeClass("active");
news.addClass("active");
}

    });



});
</script>



</body>
</html>

Custom Slider

Custom Slider
-------------------------------


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
   .container{
  width:800px;
  margin:0px auto;
  border:1px solid red;
  }
     .container ul {
margin:0px;
padding:0px;
list-style-type:none;
}
.container ul li {
  list-style-type:none;
}
.container ul li{
  display:none;
 
}
 
</style>
</head>
<body>

<div class="container">

    <ul>
        <li  id="img1" style="display:block;">
           <img  class="w3-animate-top" src="image/img_01.jpg">
           <a href="#" id="btn1">previous</a>
           <a href="#" id="btn2">next</a>
        </li>
       <li  id="img2">
           <img class="w3-animate-zoom"  src="image/img_02.jpg">
           <a href="#" id="btn3">previous</a>
           <a href="#" id="btn4">next</a>
        </li>
      <li id="img3">
           <img class="w3-animate-left"   src="image/img_03.jpg">
           <a href="#" id="btn5">previous</a>
           <a href="#" id="btn6">next</a>
        </li>
        <li id="img4">
           <img class="w3-animate-right"  src="image/img_04.jpg">
           <a href="#" id="btn7">previous</a>
           <a href="#" id="btn8">next</a>
        </li>
    </ul>
   
   
</div>

<script>
$(document).ready(function(){

    $("#btn1").click(function(){
        $("#img1").fadeOut()
$("#img2").fadeIn()
    });


$("#btn3").click(function(){
$("#img2").fadeOut()
        $("#img3").fadeIn()
    });

$("#btn5").click(function(){
        $("#img3").fadeOut()
        $("#img4").fadeIn()
    });

$("#btn7").click(function(){
        $("#img4").fadeOut()
        $("#img1").fadeIn()
    });


<!--next-->
$("#btn2").click(function(){
        $("#img1").fadeOut()
$("#img4").fadeIn()
    });


$("#btn4").click(function(){
$("#img2").fadeOut()
        $("#img1").fadeIn()
    });

$("#btn6").click(function(){
        $("#img3").fadeOut()
        $("#img2").fadeIn()
    });

$("#btn8").click(function(){
        $("#img4").fadeOut()
        $("#img3").fadeIn()
    });

 

});
</script>



</body>
</html>


shahzad_samejo@yahoo.com

car center

.choose-customer {

1. margin: 0px auto;
2. text-align: center;
3. margin-bottom: 57px;
4. margin-top: 20px;

}

.front-cars {

1. position: relative;

}

.front-cars-inner-div {

1. background-color: #FFF;
2. border: 1px solid #cf0000;
3. margin-top: 25px;
4. min-height: 130px;

}

.front-cars a {

1. margin-top: -20px !important;
2. min-width: 150px;
3. background: #cf0000;
4. color: #ffffff;

}

.cars-image {

1. position: absolute;
2. top: 20px;
3. left: 0;
4. right: 0;

}

.cars-image img {

1. max-width: 100%;

}

<div class="col-md-4 col-sm-4 col-xs-12">
                <div class="choose-customer">
                    <h3>Sell my car</h3>
 <p>Make more money when you sell your SUV yourself. Choose a package and price that worths for you.</p>
                        <div class="front-cars">
                            <div class="front-cars-inner-div">
                                <a class="btn btn-primary" href="/Car/Dashboard/CreateAd">Sell</a>
                                <div class="cars-image">
                                    <img src="/images/CenterViewCar.png">
                                </div>
                            </div>
                        </div>
</div>
</div>
           

flex item for listing images go into center

html

<div class="revies">
        <div class="flex-item">
                <img src="#" class="img-responsive" />
        </div>
</div>

css

.reviews .flex-item {

1. display: flex;
2. flex-direction: column;
3. justify-content: center;
4. align-items: center;
5. height: 205px;
6. overflow: hidden;
7. padding: 10px;
8. margin-top: 13px;

}

img have bootstrap class or add custom class 

.img-mycustom{

1. display: block;
2. max-width: 100%;
3. height: auto;

}

shahzad_samejo@yahoo.com

image sprite use easy way

Code copy and paste into w3school live editor and easy to understand


<!DOCTYPE html>
<html>
<head>
<style>
 ul.dashboard li a.sprite-icons{
    background: url(img_navsprites.gif) no-repeat top left;
    width: 33px;
    height: 34px;
    margin: 0px 26px auto;
    display: block;
     
     }
  ul.dashboard li a.sprite-icons.icons-car{
        background-position: -45px 0;
     }
  ul.dashboard li a.sprite-icons.icons-suv{
        background-position: -35px 0;
     }

</style>
</head>
<body>

<ul class="dashboard" role="tablist">
   <li>
      <a class="sprite-icons icons-car" href="#">Cars ( 0 )</a>
   </li>
   <li>
      <a class="sprite-icons icons-suv" href="#">SUVs ( 0 )</a>
   </li>
   <li>
      <a class="sprite-icons icons-truck" href="#">Truck ( 0 )</a>
   </li>
   <li   class="active">
      <a class="sprite-icons icons-bikes" href="#">Bikes ( 1 )</a>
   </li>
</ul>

</body>
</html>

shahzad_samejo@yahoo.com

Custom Media Querys For All Devices

Custom Media Querys For All Devices

/*custom media querys*/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
     
}
@media only screen and (min-device-width: 480px) and (max-device-width: 765px) {
 
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
   

}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
   
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1700px) {
 
   
}
@media only screen and (min-device-width: 1700px) and (max-device-width: 1920px) {
   
     
    }

shahzad_samejo@yahoo.com

List image on center css code

List  image on center css code

HTML CODE

 <div class="flex-item">
          <img src="images/mclaren.png" class="img-responsive" />
 </div>

.flex-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    border: 1px solid black;
    background-color: #eee;
}

For cross-browser compatibility for display: flex and align-items, you can add the older flexbox syntax as well:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

shahzad_samejo@yahoo.com