Webku – cPanel adalah platform administrasi web yang populer dan sangat berguna dalam mengelola situs web. Dirancang untuk memudahkan pengguna dalam melakukan tugas-tugas teknis, cPanel menyediakan antarmuka grafis yang intuitif untuk mengelola hosting dan situs web secara efisien.
Kelebihan Script ini:
– Responsif
Script ini sangat ringan juga mudah diingat untuk kali pertama pengguna baru yang menggunakan cPanel, dengan berbagai fitur script ini memberikan kenyamanan dan kemudahan yang jelas.
– Gratis
Kami memberikan script ini secara gratis untuk digunakan juga mudah untuk cara penginstalannya karena hanya menggunakan HTML dan CSS saja.
– Hanya dapat diinstall oleh admin
Script ini hanya dapat di install oleh admin pemilik website dan akan muncul di tab bagian ubah tema pada cPanel user.
Script cPanel Responsif:
Anda dapat menginstall ini pada cPanel server atau WHM dan hanya mengubah sedikit bagian pada HTML beserta CSS.
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Start Side Menu Bar -->
<aside class="fl-left">
<header class="padding">
<h2>Alt<span>Air</span></h2>
<p><img src="https://cdn2.iconfinder.com/data/icons/flags/flags/48/united-kingdom-great-britain.png" alt="UK-Flag" /></p>
</header>
<ul>
<li class="active"><i class="fa fa-tasks fa-fw" aria-hidden="true"></i> Dashboard</li>
<li><i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Mailbox</li>
<li><i class="fa fa-money fa-fw" aria-hidden="true"></i> Invoices</li>
<li class="menuarrow"><i class="fa fa-commenting fa-fw" aria-hidden="true"></i> Chats</li>
<li><i class="fa fa-bar-chart fa-fw" aria-hidden="true"></i> Scrum Board</li>
<li><i class="fa fa-angle-left" aria-hidden="true"></i><i class="fa fa-angle-right fa-fw" aria-hidden="true"></i> Snippets</li>
<li><i class="fa fa-user fa-fw" aria-hidden="true"></i> User Profile</li>
<li><i class="fa fa-sticky-note fa-fw" aria-hidden="true"></i> Sticky Notes</li>
<li class="menuarrow"><i class="fa fa-align-left fa-fw" aria-hidden="true"></i> Forms</li>
<li class="menuarrow"><i class="fa fa-columns fa-fw" aria-hidden="true"></i> Layout</li>
<li class="menuarrow"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i> Kendo UI Widgets</li>
<li class="menuarrow"><i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> Components</li>
<li class="menuarrow"><i class="fa fa-shopping-cart fa-fw" aria-hidden="true"></i> E-commerce</li>
<li class="menuarrow"><i class="fa fa-plug fa-fw" aria-hidden="true"></i> Plugins</li>
<li class="menuarrow"><i class="fa fa-file fa-fw" aria-hidden="true"></i> Pages</li>
<li class="menuarrow"><i class="fa fa-bars fa-fw" aria-hidden="true"></i> Multi Level</li>
</ul>
</aside>
<!-- End Side Menu Bar -->
<!-- Start The Content Area -->
<article class="fl-right">
<!-- Start Header of The Content Area -->
<header>
<div class="fl-left left">
<ul>
<li>|<i class="fa fa-long-arrow-left fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
<div class="fl-right right">
<ul>
<li><i class="fa fa-tasks fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-search fa-fw" aria-hidden="true"></i></li>
<li><i class="fa fa-bell fa-fw" aria-hidden="true"></i></li>
<li><img class="fl-left" src="https://image.ibb.co/bU0Uj5/profile.jpg" width="25px" height="25px"></li>
<li><i class="fa fa-bars fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
</header>
<!-- End Header of The Content Area -->
<!-- Start First Row In The Content Area -->
<section class="rowN1">
<div class="fl-left visitors">
<div class="fl-left data">
<p>Visitors (last 7d)</p>
<h2>12,456</h2>
</div>
<div class="fl-left diagram">
<ul>
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
<li class="bar4"></li>
<li class="bar5"></li>
<li class="bar6"></li>
</ul>
</div>
</div>
<div class="fl-left sales">
<div class="fl-left data">
<p>Sales</p>
<h2>$142,384</h2>
</div>
<div class="fl-left diagram">
<ul>
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
<li class="bar4"></li>
<li class="bar5"></li>
<li class="bar6"></li>
</ul>
</div>
</div>
<div class="fl-left orders">
<div class="fl-left data">
<p>orders Completed</p>
<h2>64%</h2>
</div>
<div class="fl-right circle">
</div>
</div>
<div class="fl-left visitors">
<div class="fl-left data">
<p>Visitors (Live)</p>
<h2>25</h2>
</div>
<div class="fl-right diagram">
<ul>
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
<li class="bar4"></li>
<li class="bar5"></li>
<li class="bar6"></li>
</ul>
</div>
</div>
</section>
<!-- End First Row In The Content Area -->
<div class="clearfix"></div>
<!-- Start Second Row In The Content Area -->
<section class="row2">
<div class="fl-left messages">
<div class="circle">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<ul>
<li>User Messages</li>
<li><i class="fa fa-ellipsis-v fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
<div class="fl-left conversions">
<div class="diagram">
<ul class="bars">
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
<li class="bar4"></li>
<li class="bar5"></li>
<li class="bar6"></li>
</ul>
</div>
<ul class="data">
<li>Conversions</li>
<li><i class="fa fa-ellipsis-v fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
<div class="fl-left messages">
<div class="circle">
<i class="fa fa-plus-square" aria-hidden="true"></i>
</div>
<ul>
<li>Orders</li>
<li><i class="fa fa-ellipsis-v fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
<div class="fl-left conversions">
<div class="diagram">
<ul class="bars">
<li class="bar1"></li>
<li class="bar2"></li>
<li class="bar3"></li>
<li class="bar4"></li>
<li class="bar5"></li>
<li class="bar6"></li>
</ul>
</div>
<ul class="data">
<li>Usage</li>
<li><i class="fa fa-ellipsis-v fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
<div class="fl-left messages">
<div class="circle">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<ul>
<li>User Registration</li>
<li><i class="fa fa-ellipsis-v fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
</section>
<!-- End Second Row In The Content Area -->
<div class="clearfix"></div>
<!-- Start Third Row In The Content Area -->
<section class="row3">
<table class="fl-left tasks">
<thead>
<tr>
<th>Task</th>
<th>Status</th>
<th>Progress</th>
<th>Due Date</th>
</tr>
</thead>
<tbody>
<tr class="row-1">
<td><a href="#">Altr-231</a></td>
<td><button>In progress</button></td>
<td><progress max="100" value="35"></progress></td>
<td>24.11.2015</td>
</tr>
<tr class="row-2">
<td><a href="#">Altr-82</a></td>
<td><button>Open</button></td>
<td><progress max="100" value="70"></progress></td>
<td>21.11.2015</td>
</tr>
<tr class="row-3">
<td><a href="#">Altr-123</a></td>
<td><button>New</button></td>
<td><progress max="100" value="0"></progress></td>
<td>12.11.2015</td>
</tr>
<tr class="row-4">
<td><a href="#">Altr-164</a></td>
<td><button>Resolved</button></td>
<td><progress max="100" value="60"></progress></td>
<td>17.11.2015</td>
</tr>
<tr class="row-5">
<td><a href="#">Altr-123</a></td>
<td><button>Overdue</button></td>
<td><progress max="100" value="20"></progress></td>
<td>12.11.2015</td>
</tr>
<tr class="row-6">
<td><a href="#">Altr-92</a></td>
<td><button>Open</button></td>
<td><progress max="100" value="85"></progress></td>
<td>08.11.2015</td>
</tr>
</tbody>
</table>
<table class="fl-left statistics">
<tr class="head1">
<th colspan="5">statistics</td>
</tr>
<tr class="row1">
<th>9</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="row2">
<th>8</th>
<td></td>
<td></td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li></li>
<li></li>
<li></li>
</ul>
</td>
<td></td>
</tr>
<tr class="row3">
<th>7</th>
<td></td>
<td></td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td></td>
</tr>
<tr class="row4">
<th>6</th>
<td></td>
<td></td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</td>
</tr>
<tr class="row5">
<th>5</th>
<td></td>
<td></td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li></li>
<li></li>
<li> </li>
<li></li>
</ul>
</td>
</tr>
<tr class="row6">
<th>4</th>
<td>
<ul class="quarter1">
<li> </li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter2">
<li></li>
<li></li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li> </li>
<li></li>
<li> </li>
<li></li>
</ul>
</td>
</tr>
<tr class="row7">
<th>3</th>
<td>
<ul class="quarter1">
<li> </li>
<li></li>
<li></li>
<li> </li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter2">
<li> </li>
<li></li>
<li> </li>
<li></li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter3">
<li></li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
</tr>
<tr class="row8">
<th>2</th>
<td>
<ul class="quarter1">
<li> </li>
<li> </li>
<li></li>
<li> </li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter2">
<li> </li>
<li></li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter3">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
</tr>
<tr class="row9">
<th>1</th>
<td>
<ul class="quarter1">
<li> </li>
<li> </li>
<li></li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter2">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
<td>
<ul class="quarter3">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</td>
</tr>
<tr class="row10">
<th>0</th>
<td>
<ul class="quarter1">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter2">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter3">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
<td>
<ul class="quarter4">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</td>
</tr>
<tfoot>
<tr>
<th></th>
<td>Quarter 1</td>
<td>Quarter 2</td>
<td>Quarter 3</td>
<td>Quarter 4</td>
</tr>
</tfoot>
</table>
</section>
<!-- End Third Row In The Content Area -->
</article>
<!-- End The Content Area -->CSS
/* Start Global Rules */
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0 auto;
padding: 0
}
body {
width: 100%
}
/* End Global Rules */
/* Start Side Menu Bar */
aside {
box-shadow: 0 0 10px #999;
width: 20%
}
aside header {
background-color: #D6D6D6;
padding: 5% 10%;
}
aside header h2 {
color: #333;
font-family: "Zrnic";
font-size: 2vw;
letter-spacing: 2px;
margin-bottom: 12%;
text-transform: uppercase
}
aside header h2 span {
color: #1777D3;
letter-spacing: 3px;
margin-left: 0.5%
}
aside header p img {
border-radius: 6px;
cursor: pointer;
width: 10%
}
aside header p:after {
content: "\f0d7";
color: #5B5A5B;
cursor: pointer;
font-family: fontawesome;
margin-left: 5%;
vertical-align: top
}
aside header p:hover:after {
color: #1777D3;
}
aside ul {
font-family: Arial, Helvetica, sans-serif;
list-style: none;
padding: 5% 10%
}
aside ul li {
color: #333;
cursor: pointer;
font-size: 1vw;
margin: 10% auto
}
aside ul .menuarrow::after {
content: "\f107";
font-family: FontAwesome;
float: right
}
aside ul .active {
color: #1777D3
}
aside ul li:hover {
color: #1777D3
}
/* End Side Menu Bar */
/* Start The Content Area */
article {
background-color: #EEEEEE;
width: 80%;
margin: auto;
overflow: hidden;
}
/* Start Header of The Content Area */
article header {
background-color: #1777D3;
overflow: hidden;
}
article header .left,
article header .right {
padding: 1% 1.5%
}
article header .left {
width: 60%
}
article header .right {
width: 40%
}
article header .left ul,
article header .right ul {
list-style: none
}
article header .right ul {
display: flex;
}
article header .left ul li,
article header .right ul li {
color: #FFF;
cursor: pointer;
display: inline-block;
font-size: 20px;
margin-left: 5%;
vertical-align: middle;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease
}
article header .left ul li i,
article header .right ul li i {
vertical-align: middle;
}
article header .left ul li:hover,
article header .right ul li:hover {
color: #333;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
transition: all .2s ease
}
article header .right ul li img {
border-radius: 50%
}
/* End Header of The Content Area */
/* Start First Row In The Content Area */
article .rowN1 .visitors,
article .rowN1 .sales,
article .rowN1 .orders {
background-color: #FFF;
box-shadow: 0 0 10px #CECECE;
font-family: Arial, Helvetica, sans-serif;
margin: 2.5%;
padding: 2%;
width: 20%
}
article .rowN1 .visitors .data,
article .rowN1 .sales .data,
article .rowN1 .orders .data {
width: 55%
}
article .rowN1 .visitors .data p,
article .rowN1 .sales .data p,
article .rowN1 .orders .data p {
color: #333;
font-size: 0.8vw;
margin-bottom: 5%
}
article .rowN1 .visitors .data h2,
article .rowN1 .sales .data h2,
article .rowN1 .orders .data h2 {
color: #333;
font-size: 1.5vw;
}
article .rowN1 .visitors .diagram,
article .rowN1 .sales .diagram {
width: 45%
}
article .rowN1 .visitors .diagram ul,
article .rowN1 .sales .diagram ul {
list-style: none;
text-align: center
}
article .rowN1 .visitors .diagram ul li,
article .rowN1 .sales .diagram ul li {
background-color: #1777D3;
display: inline-block;
vertical-align: bottom;
width: 7%;
}
article .rowN1 .visitors .diagram ul .bar1,
article .rowN1 .sales .diagram ul .bar1 {
padding-top: 40%
}
article .rowN1 .visitors .diagram ul .bar2,
article .rowN1 .sales .diagram ul .bar2 {
padding-top: 30%
}
article .rowN1 .visitors .diagram ul .bar3,
article .rowN1 .sales .diagram ul .bar3 {
padding-top: 60%
}
article .rowN1 .visitors .diagram ul .bar4,
article .rowN1 .sales .diagram ul .bar4 {
padding-top: 45%
}
article .rowN1 .visitors .diagram ul .bar5,
article .rowN1 .sales .diagram ul .bar5 {
padding-top: 35%
}
article .rowN1 .visitors .diagram ul .bar6,
article .rowN1 .sales .diagram ul .bar6 {
padding-top: 30%
}
article .rowN1 .visitors .diagram ul .bar7,
article .rowN1 .sales .diagram ul .bar7 {
padding-top: 40%
}
article .rowN1 .orders .circle {
border: 8px solid #e0dee0;
border-radius: 50%;
padding: 8%;
border-color: #1777D3;
border-left-color: #e0dee0
}
/* End First Row In The Content Area */
/* Start Second Row In The Content Area */
article .row2 .messages {
background-color: #FFF;
box-shadow: 0 0 10px #CECECE;
font-family: Arial, Helvetica, sans-serif;
margin: 0 2.5%;
width: 15%
}
article .row2 .messages .circle {
border: 4px solid #e0dee0;
border-color: #1777D3;
border-left-color: #e0dee0;
border-radius: 50%;
margin: 10% 20%;
text-align: center;
}
article .row2 .messages .circle i {
color: #757575;
font-size: 2vw;
padding: 33%
}
article .row2 .messages ul {
border-top: 1px solid #DDDDDD;
cursor: pointer;
list-style: none
}
article .row2 .messages ul li {
color: #767676;
display: inline-block;
font-size: 0.8vw;
font-weight: bold;
margin: 10% 0;
text-align: center
}
article .row2 .messages ul li:first-of-type {
padding-left: 5%;
text-align: left;
width: 75%
}
article .row2 .messages ul li:last-of-type {
font-size: 0.8vw;
font-weight: bold;
padding-right: 5%;
width: 20%
}
article .row2 .messages ul li i {
text-align: right;
vertical-align: middle
}
article .row2 .conversions {
background-color: #FFF;
box-shadow: 0 0 10px #CECECE;
font-family: Arial, Helvetica, sans-serif;
margin: 0 2.5%;
width: 15%
}
article .row2 .conversions .diagram {
margin: 10% 20%;
}
article .row2 .conversions .diagram .bars {
list-style: none;
margin: 36% 0;
text-align: center
}
article .row2 .conversions .diagram .bars li {
display: inline-block;
background-color: #1777D3;
vertical-align: bottom
}
article .row2 .conversions .diagram .bar1 {
padding-top: 40%;
width: 8%
}
article .row2 .conversions .diagram .bar2 {
padding-top: 20%;
width: 8%
}
article .row2 .conversions .diagram .bar3 {
padding-top: 60%;
width: 8%
}
article .row2 .conversions .diagram .bar4 {
padding-top: 40%;
width: 8%
}
article .row2 .conversions .diagram .bar5 {
padding-top: 30%;
width: 8%
}
article .row2 .conversions .diagram .bar6 {
padding-top: 60%;
width: 8%
}
article .row2 .conversions .diagram .bar7 {
padding-top: 50%;
width: 8%
}
article .row2 .conversions .data {
list-style: none;
border-top: 1px solid #DDDDDD;
cursor: pointer;
list-style: none
}
article .row2 .conversions .data li {
color: #767676;
display: inline-block;
font-size: 0.8vw;
font-weight: bold;
margin: 10% 0;
text-align: center
}
article .row2 .conversions .data li:first-of-type {
padding-left: 5%;
text-align: left;
width: 75%
}
article .row2 .conversions .data li:last-of-type {
font-size: 0.8vw;
font-weight: bold;
padding-right: 5%;
width: 20%
}
article .row2 .conversions .data li i {
text-align: right;
vertical-align: middle;
}
/* End Second Row In The Content Area */
/* Start Third Row In The Content Area */
article .row3 .tasks {
background-color: #FFF;
border-collapse: collapse;
box-shadow: 0 0 10px #CECECE;
font-family: Arial, Helvetica, sans-serif;
margin: 2.5% 2.5% 6.5% 2.5%;
text-align: left;
width: 45%
}
article .row3 .tasks thead {
color: #767676
}
article .row3 .tasks thead tr th {
border-bottom: 1px solid #CECECE;
font-size: 1vw;
font-weight: normal;
padding: 5% 2% 2% 2%
}
article .row3 .tasks tbody tr td {
padding: 2%;
border-bottom: 1px solid #CECECE;
}
article .row3 .tasks tbody tr td a {
color: #1777D3;
text-decoration: none;
font-size: 1vw;
text-transform: uppercase
}
article .row3 .tasks tbody .row-1 td:nth-of-type(2),
article .row3 .tasks tbody .row-2 td:nth-of-type(2),
article .row3 .tasks tbody .row-3 td:nth-of-type(2),
article .row3 .tasks tbody .row-4 td:nth-of-type(2),
article .row3 .tasks tbody .row-5 td:nth-of-type(2),
article .row3 .tasks tbody .row-6 td:nth-of-type(2) {
width: 20%
}
article .row3 .tasks tbody tr td button {
color: #FFF;
}
article .row3 .tasks tbody .row-1 td button {
background-color: #fd800a;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody .row-2 td button {
background-color: #7faf35;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody .row-3 td button {
background-color: #0e9cff;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody .row-4 td button {
background-color: #078d86;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody .row-5 td button {
background-color: #f82f35;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody .row-6 td button {
background-color: #078d86;
border: none;
font-size: 1vw;
padding: 0 6%
}
article .row3 .tasks tbody tr td progress {
-webkit-appearance: none;
}
article .row3 .tasks tbody tr td progress::-webkit-progress-bar {
background-color: #f3f3f3;
border-radius: 10px;
height: 40%;
margin-top: 3%
}
article .row3 .tasks tbody .row-1 td progress::-webkit-progress-value {
background-color: #fd800a;
border-radius: 10px;
}
article .row3 .tasks tbody .row-2 td progress::-webkit-progress-value {
background-color: #7faf35;
border-radius: 10px;
}
article .row3 .tasks tbody .row-3 td progress::-webkit-progress-value {
background-color: #fd800a;
border-radius: 10px;
}
article .row3 .tasks tbody .row-4 td progress::-webkit-progress-value,
article .row3 .tasks tbody .row-6 td progress::-webkit-progress-value {
background-color: #078d86;
border-radius: 10px;
}
article .row3 .tasks tbody .row-5 td progress::-webkit-progress-value {
background-color: #f82f35;
border-radius: 10px;
}
article .row3 .tasks tbody .row-1 td:nth-of-type(4),
article .row3 .tasks tbody .row-2 td:nth-of-type(4),
article .row3 .tasks tbody .row-3 td:nth-of-type(4),
article .row3 .tasks tbody .row-4 td:nth-of-type(4),
article .row3 .tasks tbody .row-5 td:nth-of-type(4),
article .row3 .tasks tbody .row-6 td:nth-of-type(4) {
color: #767676;
font-size: 12px
}
article .row3 .statistics {
background-color: #FFF;
border-collapse: collapse;
box-shadow: 0 0 10px #CECECE;
font-family: Arial, Helvetica, sans-serif;
margin: 2.5%;
width: 45%
}
article .row3 .statistics tr th {
color: #767676;
font-size: 12px;
font-weight: normal;
padding: 0.5%;
text-align: right;
width: 15%
}
article .row3 .statistics .head1 th {
font-size: 16px;
padding: 4%;
text-align: left
}
article .row3 .statistics tr td {
border-right: 1px solid #f3f3f3;
border-left: 1px solid #f3f3f3;
font-size: 16px
}
article .row3 .statistics .row1 td {
border: none
}
article .row3 .statistics .row2 td {
border-top: 1px solid #f3f3f3
}
article .row3 .statistics .row10 td {
border-bottom: 1px solid #f3f3f3
}
article .row3 .statistics tr td ul {
list-style: none;
text-align: center
}
article .row3 .statistics tr td ul li {
display: inline-block;
width: 10%
}
article .row3 .statistics tr td .quarter1 li:first-of-type,
article .row3 .statistics tr td .quarter2 li:first-of-type,
article .row3 .statistics tr td .quarter3 li:first-of-type,
article .row3 .statistics tr td .quarter4 li:first-of-type {
background-color: #0e9cff;
color: #0e9cff
}
article .row3 .statistics tr td .quarter1 li:nth-of-type(2),
article .row3 .statistics tr td .quarter2 li:nth-of-type(2),
article .row3 .statistics tr td .quarter3 li:nth-of-type(2),
article .row3 .statistics tr td .quarter4 li:nth-of-type(2) {
background-color: #fd800a;
color: #fd800a
}
article .row3 .statistics tr td .quarter1 li:nth-of-type(3),
article .row3 .statistics tr td .quarter2 li:nth-of-type(3),
article .row3 .statistics tr td .quarter3 li:nth-of-type(3),
article .row3 .statistics tr td .quarter4 li:nth-of-type(3) {
background-color: #239825;
color: #239825
}
article .row3 .statistics tr td .quarter1 li:nth-of-type(4),
article .row3 .statistics tr td .quarter2 li:nth-of-type(4),
article .row3 .statistics tr td .quarter3 li:nth-of-type(4),
article .row3 .statistics tr td .quarter4 li:nth-of-type(4) {
background-color: #f82f35;
color: #f82f35
}
article .row3 .statistics tr td .quarter1 li:last-of-type,
article .row3 .statistics tr td .quarter2 li:last-of-type,
article .row3 .statistics tr td .quarter3 li:last-of-type,
article .row3 .statistics tr td .quarter4 li:last-of-type {
background-color: #8961a8;
color: #8961a8
}
article .row3 .statistics tfoot tr td {
border: none;
color: #767676;
padding: 2%;
text-align: center
}
/* End Third Row In The Content Area */
/* End The Content Area */
/* My Framework */
.clearfix {
clear: both
}
.fl-left {
float: left
}
.fl-right {
float: right
}Edit bagian tertentu dan tambahkan sesuatu yang lebih menarik pada cPanel user maka akan banyak user yang lebih puas dengan tampilan Anda, beserta cPanel yang anda jual atau sewakan akan lebih dipercayai.
