Wapkiz Tutorial] How to design a site like Nairaland in Wapkiz part 1

Wapact Tutorial] How to design a site like Nairaland in Wapact part 1

Building site like Nairaland on wapact seems hard and complicated right? Yeah! But today, we're gonna be giving you guys steps on how to achieve your aim in designing a site like Nairaland on your Wapact site without stress..

Hi guys! Welcome to another 360GpTech Tutorial.

Today, we shall be teaching you guys cool and awesome steps on how to design a site like Nairaland in wapact.

Can this really be achieved? Are you still doubting? oh! C'mon!! Gurusprovince Team never promise and fail you guys. We've run several tuts about it before releasing it to you guys.. See the Screenshots below:

Awesome! isn't it?

So how can I do the same?

Well, achieving that is very simple, we're gonna be giving you guys step by step tutorial along with VIDEO tutorial on how to design it.

STEP I:

Place this CSS on into your CSS board

.menu {color:white;background:#383838;padding:5px}html { -webkit-text-size-adjust: 100%; line-height:1.5}

h1, h2, h3, h4, form, div, p, img { padding: 0; margin: 0; }

h1, h2, h3, h4, h5 { color:#200; font-family: tahoma, verdana, sans-serif; }

p{ margin: 6px 0 0 0}

table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}

div.body {max-width:1024px; margin: 0px auto; width:100%;}

th, td { padding: 8px;
         background: #E8ECE0;
         text-align: center;
         border: 1px solid #444;
         border-bottom-width: 0px;
         overflow:hidden;
}

tr:first-child td, tr:first-child th {
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
    border-bottom: 1px solid #444;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
td.w, tr.w { background: #F6F6EC;}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}

@media screen and (max-width: 320px) and (orientation: portrait) {
 table { padding: 4px 0px}
 th, td { border: 0px; border-top: 1px solid #444; padding: 6px 0px}
 tr:first-child td, tr:first-child th { border-top-left-radius: 4px; border-top-right-radius: 4px; }
 tr:last-child td { border-bottom: 1px solid #444; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
 td.pd {border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}
 td.pu {border-top-left-radius: 4px; border-top-right-radius: 4px;}
}

form.inline { display: inline }

img.img { padding:0; margin:0;}
@media screen and (max-width: 9999px){ img.img, div.narrow { max-width:  976px }}
@media screen and (max-width: 1024px){ img.img, div.narrow { max-width:  976px }}
@media screen and (max-width:  768px){ img.img, div.narrow { max-width:  736px }}
@media screen and (max-width:  640px){ img.img, div.narrow { max-width:  608px }}
@media screen and (max-width:  512px){ img.img, div.narrow { max-width:  480px }}
@media screen and (max-width:  480px){ img.img, div.narrow { max-width:  448px }}
@media screen and (max-width:  411px){ img.img, div.narrow { max-width:  379px }}
@media screen and (max-width:  414px){ img.img, div.narrow { max-width:  382px }}
@media screen and (max-width:  375px){ img.img, div.narrow { max-width:  342px }}
@media screen and (max-width:  360px){ img.img, div.narrow { max-width:  328px }}
@media screen and (max-width:  340px){ img.img, div.narrow { max-width:  320px }}
@media screen and (max-width:  320px){ img.img, div.narrow { max-width:  320px }}
@media screen and (max-width:  240px){ img.img, div.narrow { max-width:  208px }}
 
#postform input[type=text], #postform textarea {
    min-width: 80px; margin: 0px auto; width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
}

td.grad, .grad { background-color: #F6F6EC; margin: 8px}

.grad input[type=text], input[type=text].central {  margin: 0px auto; min-width: 90px; width: 50%;}

body, td, th, div, button.button-link, input, textarea {
    font-family: verdana, sans-serif; font-size: 10pt; margin: 0px
}
body { text-align: center; background: url('/static/bg3.png/1') repeat; }

div.container {
    max-width: 1024px; margin-left: auto; margin-right: auto; padding: 6px; background-color: #fff;
    border-left: 1px solid gray; border-right: 1px solid gray;
}

a { color:#181855; text-decoration: underline;}
a:hover { color:#FFF; background-color:#114; text-decoration: none}
a:hover:visited { color:#E8ECE0; background-color:#114; text-decoration: none}
a.awoof:hover {background-color: transparent;}
a.m, .m { color: #44b; }
a.f, .f { color: #b4b; }
a.user, .user a, .featured td { color:#551818; }
td.homeuser, td.homeuser a, td.homeuser span, div.sig{font-size: 8.5pt;}
td.homeuser h3 { font-size: 12.5pt; color:#000}
td.homeuser a {color:#551818}
td.featured { color:#551818}
a:visited img.nnn {display: none}

.s { font-size: 8.5pt; color:#555518 }
.s a {font-size: 8.5pt; color:#551818 }
.b { font-size: 11.5pt; }
.g { color:#185518; }

.u { font-weight: normal }
.bl{ background-color: #6B8EAE}
.button-link { border: none; background-color: transparent; text-decoration: underline; cursor: pointer; padding: 0; }
td.l, .l {text-align: left}
td.friends { padding-top: 0px; padding-bottom: 0px; }
td.messages { padding-left: 20px; }
td.gr, td.gr span, td.gr a { color: grey }
.friend {border:1px solid #999100; padding:4px; white-space: nowrap; background-color: white}
.friend a {text-decoration: none}

.highlight {font-weight: bold; font-size:12.5pt; background-color: yellow}

span.bold a, p.bold a, a.bold, td.bold a {font-weight: bold}

span.eb img {background-image:url("/icons/bg.gif");
  background-repeat: no-repeat; width:23px; height:22px;}
span.eb:hover img {background-image:url("/icons/hoverbg.gif");}

img.faces {width:15px; height:15px}

blockquote{margin: 1px; background-color: #CBD8BF; border: 1px black solid; padding: 6px; border-radius: 6px}
.small, td.small{font-size:8.5pt}
td.sig{padding:3px 6px 5px 6px; font-size:8.5pt; color:grey}
.upd {background: #993; padding:1px}
.frupd {background: #399; padding:1px}

div.narrow {margin: 0px auto 0px 0px;}

iframe.youtube { width: 420px; height: 280px; max-width: 92%}

.noisy { color: #b00; font-weight: bold}

.pushleft{margin: 0px 0px 0px -8px}
.pushleft2{margin: 0px 0px 0px -2px}

.manual{margin: 0 -8px}
.manual span {padding-left: 6px; padding-right: 6px}

p.nocopy, div.nocopy, td.nocopy {
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 /* user-select: none;*/
}

div.webdesigners {margin: 0px auto; padding: 0px; max-width: 850px;}
div.webdesigners img { margin: 6px; padding: 0px; width: 154px; height:95px; background: url('/static/white.png') no-repeat;}
@media screen and (max-width: 320px) { 
 div.webdesigners {margin: 0px 0px;} 
 div.webdesigners img {margin: 2px 2px}
}

div.ejedudu img {border: 1px solid #000; margin: 8px 8px; padding: 0px; width: 318px; height:106px; background: url('/static/white.png') no-repeat;}

@media screen and (max-width: 1024px) {
 div.ejedudu img {margin: 8px 3px}
}

@media screen and (max-width: 360px) { 
 div.ejedudu img {margin: 8px -8px}
}
.campaign_stats span, .ad_details span{
  margin-right: .5%;
}
.green{
 color: green;
}
.orange{
 color: orange;
}
.red{
 color: red;
}
.blackborder{
    border: 1px solid #000;
    padding: 0;
}
.expansible_input{
    width: 40%;
}

td.grad h1 {
 margin-top: -4px;
}
table th h3 {
 margin: -4px 0px;
}

How was it? Cool right? stay tune for part two:

WATCH THE STEP BY STEP VIDEO HERE:

If you have any question regarding to this, kindly make use of the comment box below, we'll reply you instantly.

REMEMBER: Always visit for more interesting topics.

You can subscribe to our Newletter here.