sangat penting bagi kawan untuk membaca artikel saya sebelumnya, karena sifatnya hanya pengulangan saja. Adapun langkah kerjanya sama. Saya sedikit improvisasi dengan Opera Mobile emulator untuk melakukan preview.
Dan, saya anggap kawan sudah pada tahap advance, sila simak.
1. langkah kerja sila ikuti apa yang sudah saya tulis di artikel "Cara Membuat Website seperti detik Mobile"
2. ternyata, viva news menaruh cssnya tidak pada file terpisah (misal style.css). tapi ada di headernya diapit fungsi <style>.. </style>
ini kode css mentahnya
sedangkan, kode berikut ini yang sudah saya rapihkan. Kenapa dirapihkan? supaya enak dipelajarinya. begitu.
@charset "utf-8";
html.noads .banner { display: none }
.xsmallview ul.listberita { font-size: medium }
.normalview ul.listberita { font-size: large }
.xlargeview ul.listberita { font-size: x-large }
body,
ul,
div,
input,
img {
margin: 0;
list-style: none;
padding: 0;
border: 0;
background: none;
outline: none;
vertical-align: bottom;
}
strong { font-weight: bold }
.clear { clear: both }
.clear.gap { height: 10px }
body {
width: 100%;
margin: 0;
font-size: large;
font-family: Helvetica, Arial, sans-serif;
min-width: 300px;
color: #333;
}
a,
a:active,
a:link {
color: #666;
text-decoration: none;
}
a:visited { color: #156D9F }
a:hover { color: #AA000B }
.container { padding: 5px }
.container.specialbox { background-color: #ededed }
.container.specialbox .titlebar.type1 {
border-bottom: none;
margin: 0;
}
.container.specialbox .listberita li { border-color: #ccc }
#vivaportal ul.listberita li a,
#vivanews ul.listberita li a { color: #0e355c }
#vivaportal ul.listberita li a:hover,
#vivanews ul.listberita li a:hover { color: #AA000B }
#vivaportal .titlebar.type1,
#vivanews .titlebar.type1,
#vivaportal .titlebar.type2,
#vivanews .titlebar.type2 { border-color: #D70000 }
#vivaportal .titlebar.type1 .title,
#vivanews .titlebar.type1 .title { background-color: #d70000 }
#vivaportal .titlebar.type2 .title,
#vivanews .titlebar.type2 .title,
#vivaportal .titlebar.type2 .title a,
#vivanews .titlebar.type2 .title a { color: #D70000 }
#vivaportal .container.specialbox .titlebar.type1 .title,
#vivanews .container.specialbox .titlebar.type1 .title { background-color: #d70000 }
#wrapper {
margin: 0 auto;
padding: 0 5px;
}
.banner {
padding: 5px 0;
text-align: center;
width: 100%;
}
ul.listberita li .banner img {
width: 100%;
margin: 0;
float: none;
}
.ads_little {
font-size: 60%;
color: #999;
text-align: center;
padding-bottom: 5px;
}
#toplink {
text-align: center;
border-bottom: 1px solid #000;
font-size: small;
padding: 3px 0;
margin-bottom: 10px;
}
#logo {
height: 40px;
width: 185px;
background: url('f440464128logo.png') no-repeat center top;
margin-top: 20px;
cursor: pointer;
}
#logo.portal {
background-position: 0 0;
margin: 0 auto;
}
#logo.vivanews { background-position: 0 -40px }
#logo.vivabola { background-position: 0 -80px }
#logo.vivalog { background-position: 0 -120px }
#logo.vivalife { background-position: 0 -160px }
#main-nav {
background-color: #C70607;
text-align: center;
color: #fff;
padding: 7px 0;
font-size: 70%;
letter-spacing: 1px;
}
#main-nav a { color: #fff }
#main-nav img {
vertical-align: middle;
color: #fff;
}
#sub-nav {
font-size: 65%;
color: #666;
}
#sub-nav a { color: #666 }
.titlebar { margin-top: 10px }
.titlebar.type1 { border-bottom: 1px solid }
.titlebar.type1 .title {
color: #fff;
font-weight: bold;
padding: 3px 5px;
float: left;
background-color: #666;
font-size: 80%;
}
.titlebar.type1 .title a { color: #fff }
.titlebar.type2 { border-bottom: 1px solid }
.titlebar.type2 .title {
font-weight: bold;
padding: 3px 0;
float: left;
font-size: 80%;
}
.titlebar.type2 .title a { color: #666 }
#livescore { width: 100% }
#livescore td {
padding: 5px 0;
border-bottom: 1px solid #ccc;
}
#livescore .team { width: 40% }
#livescore .team.left { text-align: right }
#livescore .center {
width: 20%;
text-align: center;
}
ul.listberita li {
padding: 10px 0;
font-size: 90%;
border-bottom: 1px solid #eee;
}
ul.listberita li a { font-size: 110% }
ul.listberita li p {
margin-top: 8px;
margin-bottom: 0;
}
ul.listberita li img {
width: 30%;
float: left;
margin-right: 10px;
}
ul.listberita li span {
font-size: 80%;
color: #888;
}
.headline {
width: 100%;
position: relative;
background-color: #f9f9f9;
padding-top: 10px;
}
.headline img { width: 100% }
.headline .title {
background: url('f-1821201818transparent-dark.png') repeat;
position: absolute;
bottom: 0;
width: 100%;
}
.headline .title .container { padding: 5px 10px }
.headline .title a {
color: #fff;
font-weight: bold;
}
.sort-berita {
text-align: center;
margin: 10px 0;
}
.sort-berita .cari_btn {
background-color: #aa0000;
padding: 1px;
color: #fff;
}
#font-sizer {
text-align: center;
font-size: small;
margin: 10px 0;
}
#font-sizer .container {
width: 150px;
margin: 0 auto;
}
#font-sizer .container a {
padding: 0 5px;
margin: 0px 2px;
text-decoration: underline;
}
#font-sizer a.small {
font-size: small;
margin-top: 3px;
}
#font-sizer a.medium {
font-size: medium;
margin-top: 1px;
}
#font-sizer a.large { font-size: x-large }
#search {
width: 250px;
border: 1px solid #999;
margin: 0 auto;
padding: 2px;
background-color: #fff;
}
#search input { vertical-align: middle }
#search input[type="text"] {
width: 150px;
font-size: 60%;
}
#search input[type="button"],
#search input[type="submit"] {
width: 70px;
display: block;
padding: 5px;
color: #fff;
background-color: #a00;
font-size: 60%;
font-weight: bold;
float: right;
}
#bottomnav,
#footer {
text-align: center;
font-size: 70%;
padding: 5px 0;
margin-bottom: 10px;
}
.toplink {
text-align: center;
line-height: 50%;
padding: 20px 0;
}
.toplink a { color: #666 }
.pagination {
height: 25px;
width: 100%;
overflow: hidden;
line-height: 25px;
padding: 5px 0 2px;
border-bottom: 3px solid #bbbbbb;
font-weight: bold;
}
.pagination .pagination_nav {
display: block;
float: left;
height: 25px;
line-height: 25px;
width: 25px;
color: #fff;
background-color: #d70000;
margin-right: 2px;
text-align: center;
font-size: 18px;
}
.pagination .pagination_nav.disabled {
background-color: #bbbbbb;
cursor: default;
}
.pagination .pagination_info {
padding-left: 30px;
float: left;
font-size: 14px;
}
.pagination .pagination_info li {
float: left;
color: #bbb;
}
.pagination .pagination_info li a {
display: block;
height: 25px;
width: 25px;
color: #bbb;
text-align: center;
}
.pagination .pagination_info li a.active {
background-color: #D70000;
color: #fff;
}
.head-title {
border-bottom: 1px solid #D70000;
background-color: #eee;
color: #a00;
font-weight: bold;
font-size: 80%;
}
.galeriFoto .galeriList {
float: left;
width: 50%;
}
.galeriFoto .galeriList .container {
background-color: #eee;
padding: 10px;
margin: 3px 0;
}
.galeriFoto .galeriList.odd .container { margin-right: 3px }
.galeriFoto .galeriList .container img { width: 100% }
.galeriFoto .galeriList.even .container { margin-left: 3px }
a.galeriMoreBtn {
display: block;
margin: 0 auto;
width: 60%;
background-color: #999999;
text-align: center;
font: normal 18px/32px helvetica , arial , sans-serif;
color: #fff;
}
a.galeriMoreBtn:hover {
color: #fff;
background-color: #666666;
}
Nah, ada baiknya kawan mengambil kode yang sudah dirapihkan tadi dan menyimpannya ke file terpisah (kan ceritanya theme wp ala viva news?), simpanlah file css itu dengan nama style.css lalu tambahkan kode ini diantara ..
Berikut tampilan pada Opera Mobile Browser emulator
0 komentar:
Post a Comment