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*/
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
Sumber : http://www.kompasiana.com/ayohosting/joomla-cara-edit-kode-template-joomla_54f85d44a33311191c8b58d7