Sunday, 31 January 2016

Totorial edit template Style joomla dengan mudah

Tags

Totorial edit template Style joomla dengan mudah
Dibawah ini tutorial mengedit tempalate CMS Joomla. Untuk mengetahui cara edit kode template Joomla, Anda bisa masuk ke kode HTML dan CSS template Joomla melalui halaman Customize Template nya, yang berisi tombol Edit HTML dan Edit CSS. Klik file CSS, Anda akan melihat kode HTML atau CSS. Ketika Anda menyesuaikan template di Joomla, Anda biasanya membuat perubahan pada kode CSS nya. Untuk membuka file template CSS untuk mengedit, ikuti langkah berikut: 1. Dalam Rincian halaman template, klik tombol Edit CSS. Halaman Customize Template akan terbuka. Halaman ini berisi daftar file CSS yang terkait dengan template. 2. Klik nama style yang ingin Anda edit. File style CSS itu (template.css) untuk mengedit di Template Manager. File template.css cukup panjang - sekitar 16 halaman - dan itu hanya salah satu file yang ada di template Joomla.
Ini adalah file CSS Laucuada: /*LAYOUTS*/
#wrapper
{
            width: 960px;
            margin-left: auto;
            margin-right: auto;
}
#top
{
}
#middle
{
            background-color: #FFFFFF;
            padding-top: 10px;
            padding-bottom: 10px;
}
#bottom
{
            padding-bottom: 10px;
            padding-top: 10px;
}
#bottom_inner
{
            width: 940px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 10px;
            padding-bottom: 10px;
}
#bottom, #bottom_inner
{
            background-color: #FCFCFC;
}
/*HEADER*/
#header
{
            background-color: #FFFFFF;
            padding: 10px;
}
#header_inner
{
            background: url(../images/backgrounds/header_bg_default.png);
            background-repeat: no-repeat;
            padding: 10px 10px 10px 0px;
            min-height: 100px;
}
#logo
{
            float: left;
}
.site-title
{
            font-size: 24px;
            font-weight: bold;
            padding-left: 10px;
            padding-top: 10px;
            color: #000000;
}
.site-description
{
            padding-left: 23px;
            font-size: 15px;
            color: #666666;
}
#search
{
            padding: 10px;
            float: center;
}
#search .inputbox
{
            width: auto;
            height: 23px;
            border: none;
            background-image: none;
            background-repeat: repeat;
            background-attachment: scroll;
            background-position: 0 0;
            border: 1px solid #EAEAEA;
            padding-left: 10px;
            color: #666666;
            background-color: rgba(255, 255, 255, 0.9);
}
#search .search_button
{
            background: url(../images/search-button.png) no-repeat;
            width: 30px;
            height: 23px;
            border: none;
            text-indent: -9999em;
            margin: 0 0 0 5px;
            cursor: pointer;
}
/*COLUMNS*/
#left_col
{
            float: left;
            background-color: inherit;
            margin-left: 10px;
            margin-right: 10px;
}
#right_col
{
            float: right;
            background-color: inherit;
            margin-right: 10px;
            margin-left: 10px;
}
#content_col
{
            float: left;
            background-color: inherit;
            margin-left: 10px;
            margin-right: 10px;
}
#content_col_inner
{
            margin: 0px 10px 10px;
            padding-top: 0px;
}
#bottom1
{
            float: left;
            margin-left: 10px;
}
#bottom2
{
            float: left;
            margin-left: 10px;
}
#bottom3
{
            float: left;
            margin-left: 10px;
}
#bottom4
{
            float: left;
            margin-left: 10px;
}
#bottom_right_hidden
{
            width: 1px;
            float: right;
            overflow: hidden;
}
/*SPAN*/
.span12
{
            width: 940px;
}
.span11
{
            width: 860px;
}
.span10
{
            width: 780px;
}
.span9
{
            width: 700px;
}
.span8
{
            width: 620px;
}
.span7
{
            width: 540px;
}
.span6
{
            width: 460px;
}
.span5
{
            width: 380px;
}
.span4
{
            width: 300px;
}
.span3
{
            width: 220px;
}
.span2
{
            width: 140px;
}
.span1
{
            width: 60px;
}
/*SLIDESHOW LOGO*/
.flexslider
{
            padding: 10px 10px 0px 10px;
            background-color: #FFFFFF;
            border: 1px solid transparent;
}
.flex-caption
{
            color: #333333;
            text-transform: none;
            font-size: 15px;
            font-weight: bold;
            bottom: 30px;
}
.flexslider IMG
{
            height: auto !important;
}
/*MENU VERTICAL*/
#left_col .menu LI, #right_col .menu LI
{
            border-bottom: 1px dotted #CCCCCC;
            list-style: none;
            line-height: 25px;
}
#left_col .menu A, #right_col .mnu A
{
            text-decoration: none;
}
#left_col .menu A:hover, #right_col .mnu A:hover
{
            color: #666666;
}
/*TOP MENU*/
#top-menu2
{
}
#top-menu2 A
{
            color: #FFFFFF;
            font-weight: inherit;
}
#top-menu2 UL
{
            margin: 0;
            padding-bottom: 2px;
            line-height: normal;
}
#top-menu2 LI
{
            display: inline;
            margin: 0;
            padding: 0;
            text-decoration: none;
}
#top-menu2 LI A
{
            display: inline;
            line-height: normal;
            padding: 0 10px;
            text-decoration: none;
}
#top-menu2 LI A:hover
{
            text-decoration: underline;
}
/*ARTICLES*/
.iteminfo
{
            font-size: 8pt;
            padding-top: 1em;
            color: #999999;
}
H1, H2, H3, H4, .componentheading, LEGEND
{
            font-weight: bold;
            margin: 1em 0 0.5em;
}
/*COLUMN IMG*/
#left_col IMG, #right_col IMG
{
            max-width: 98%;
}
/*D_PAGE*/
.d_page
{
            background-color: #FFFFFF;
            color: #12D146;
            top: 10%;
            position: absolute;
            padding: 20px;
            font-size: 16px;
            font-weight: bold;
            margin-left: auto;
            margin-right: auto;
            width: 400px;
}
/*MODULE POSITIONS*/
#module_positions
{
            padding: 10px;
            text-align: center;
}
#module_positions TABLE
{
            border: 1px solid #CCCCCC;
            width: 100%;
            padding: 10px;
            background-color: #FFFFFF;
}
#module_positions TABLE TD
{
            border: 1px solid #CCCCCC;
            padding: 10px;
}
.module_positions_notice
{
            color: green;
            font-weight: bold;
}. . . Sayangnya, untuk mengedit file ini Anda benar-benar harus tahu apa yang Anda lakukan di CSS untuk membuat perubahan Anda sendiri. (Sebuah editor kode WYSIWYG baik dibangun ke Joomla akan menjadi besar untuk situasi ini.) Ada banyak perdebatan tentang apakah lebih baik menggunakan tabel HTML atau CSS untuk mengatur komponen dan modul di Joomla template, kedua sisi argumen memiliki poin yang kuat. Tabel HTML, misalnya, adalah struktur yang cukup kaku yang membuat sulit bagi mesin pencari untuk memahami isi halaman Anda. Implementasi CSS, di sisi lain, sangat bervariasi dari browser ke browser, dan beberapa browser lama memungkinkan Anda untuk menggunakan hanya sedikit CSS. The Beez template Joomla adalah contoh template tableless CSS. Seperti yang Anda lihat, benar-benar mengubah template Joomla bukanlah sesuatu yang bisa dianggap enteng. Jadi bagaimana Anda mendapatkan template yang Anda inginkan? Anda dapat men-download itu. Ada Joomla template online. Beberapa bebas sementara yang lainnya memerlukan biaya yang kecil untuk men-download.

Sumber : http://www.kompasiana.com/ayohosting/joomla-cara-edit-kode-template-joomla_54f85d44a33311191c8b58d7