Berikut ini adalah struktur template mambo, tetapi dapat juga digunakan pada joomla:
- Buatlah folder baru dengan nama ‘terserah’
- Bukalah folder tersebut dan buatlah lagi 2 folder dengan nama ‘css’ dan image’
- Simpanlah file dreamweaver yang kita buat pada folder ‘terserah’ dengan nama ‘index.php’
- Selanjutnya buatlah file xml dengan cara file -> new ->basic page -> xml
- Kopikan file berikut, save pada folder ‘terserah’ dan beri nama 'templateDetails.xml'
-------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
- Sekarang buatlah file css dan kopikan kode berikut dan simpanlah dengan nama ‘template_css.css’
------------------------------------------------------------------------------------------------
BODY {
margin : 0px 0px 0px 0px;
background-color : #FFFFFF;
color : #000000;
background-color: #F8F8FF;
scrollbar-base-color: #778899;
}
td, tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #333333;
}
ul {
margin : 0px 0px 0px 0px;
}
hr {
background : #CCCCCC;
height : 1px;
width : 100%;
}
.title {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color : #7B8DA1;
}
.pathway {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}
a.pathway:hover {
color : #000000;
font-weight : normal;
text-decoration : underline;
}
/* --Default Class Settings-- */
a.mainlevel:link, a.mainlevel:visited {
color: #333333;
background-position: left;
text-align: left;
font-weight: bold;
}
a.mainlevel:hover {
color: #00000;
background-position: left;
text-align: left;
}
a.mainmenu:link, a.mainmenu:visited {
color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: bold;
}
a.mainmenu:hover, {
color: #000000; text-decoration: underline;
}
a.sublevel:hover {
color: #000000; text-decoration: underline;
}
a.sublevel:link, a.sublevel:visited {
color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: normal;
}
table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;
margin-left: 5px;
}
table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #000000;
text-align : left;
width : 100%;
padding: 10px 10px 10px 10px;
margin: 20px 5px 20px 5px;
}
table.moduletable td {
font-size: 10px;
font-weight: normal;
border: 1px solid #333;
padding: 10px 10px 10px 10px;
margin: 20px 5px 20px 5px;
background-color: #F8F8FF;
}
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.sectiontableentry1 {
background-color : #F0F0F0;
}
.sectiontableentry2 {
background-color : #E0E0E0;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : medium;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.contentpane {
background : #FFFFFF;
}
.contentpaneopen {
background : #FFFFFF;
}
.contentheading, .componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #7B8DA1;
text-align : left;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #000000;
border : 1px solid #CCCCCC;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}
a:link, a:visited {
font-size : 11px;
color : #000000;
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
color : #000000;
text-decoration : underline;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color: #7B8DA1;
text-decoration: underline;
font-weight: bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #ffae00;
border-left: outset 2px #ff9900;
border-right: outset 2px #808080;
border-top: outset 2px #ff9900;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: normal;
}
.tabpadding {
}
.tabheading {
background-color: #ffae00;
text-align: left;
}
.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/* for modifying {moscode} output. Dont set the colour! */
.moscode {
background-color: #f0f0f0;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
/* custom stuff */
.container
{
border: solid;
border-width: 1px;
border-color: #efefef;
background-color: White;
}
.boxes {
border: solid;
border-color: #efefef;
border-width: 1px;
}
-------------------------------------------------------------------------------------------------
Nah template kita jadi. Anda dapat menjalankan joomla anda dan menginstallnya. Namun tampilannya masih kosong(misalnya memasukan gambar hehehe...). Anda dapat memodifikasinya sesuka hati anda dengan dreameaver atau tool yang lainnya. Selamat mencoba….
bos boleh dibuatkan video