เปลี่ยนหน้าตา joomla โดยแก้ไขไฟล์ css

การปรับแต่งไฟล์ css ของ joomla!
การปรับแต่งหน้าตาเว็บไซต์ที่สร้างด้วย Joomla หลายๆ คนเลือกใช้แม่แบบหรือ template หรือ theme สำเร็จรูป คล้ายหน้ากากมือถือนั่นเอง มาติดตั้งลงไป เว็บไซต์ก็จะมีหน้าตาในแบบที่ต้องการ 
แต่การปรับแต่งจริงๆ แล้วผมอยากแนะนำอีกวิธีหนึ่ง ก็คือปรับแต่งเทมเพลทมาตรฐานของจูมล่านั่นแหละ เจาะลึกคำสั่งต่างๆ ให้รู้จริง ก็จะช่วยให้เราแต่งหน้าหน้าตาเว็บได้ตามต้องการ 

ไฟล์ที่จะปรับแต่งจะเป็นไฟล์แบบ CSS ซึ่งอยู่ในโฟลเดอร์ที่เก็บเทมเพลท เช่น beez, ja_purity, rhuk_milkyway สำหรับเทมเพลทมาตรฐานที่ถูกกำหนดให้ Joomla จะเป็น rhuk_milkyway ในบทความนี้ก็จะกล่าวถึงการปรับแต่ง เทมเพลทตัวนี้ 

คำเตือนก่อนปรับแต่ง
ก่อนปรับแต่งให้ดาวน์โหลดโฟลเดอร์ css ที่อยู่ใน templates/uhuk_milkyway ไปสำรองไว้สักชุด เผื่อแต่งจนเละ ทำอะไรต่อไม่ได้

เลือกแบบของเทมเพลทที่ต้องการปรับแต่ง
เทมเพลทนี้ยังแยกเป็นสีต่างๆ ให้เลือกอีกเช่น สีขาว สีน้ำเงิน สีส้ม สีเขียว ให้เลือกสีใดสีหนึ่ง แล้วจึงเลือกไฟล์ css แยกตามสีนั้นๆ เช่น ถ้าเลือกสีเขียว ก็จะมีไฟล์ green.css, green_bg.css และ template.css 

ตัวอย่างการปรับแต่งกรณีเลือกสีเขียน green
ปรับแต่ง green.css
/* green */
a:link, a:visited {
color: #4ba123;
}
*** สีของลิงค์ตามปกติ เมื่อไม่ชี้เมาส์จะเป็นสีเขียว

#4ba123

a:hover {
color: #FF00FF;
}
*** สีของลิงค์ต่างๆ เลือกตามต้องการ ปกติสีเขียว ยกเว้น Top Menu
ตัวอย่างเพิ่มเติม
color: #FF00FF; เปลี่ยนสีชมพู
font-weight: bold; ตัวหนา
text-decoration: blink;? ลิงค์กระพริบได้

#pillmenu a:hover {
color: #4ba123;
}
*** สีของลิงค์ Top Menu 

#pillmenu a#active_menu-nav {
color: #fff;
}
*** สีของลิงค์ Top Menu เมื่อแสดงตามปกติ ไม่คลิกเมาส์ แต่อย่างใด ปกติสีดำ

#pillmenu a#active_menu-nav:hover {
color: #fff;
}

h3, .componentheading, table.moduletable th {
color: #4ba123;
}
*** สีขนาดแบบตัวหนังสือของ ชื่อโมดูล Latest News, Popular, Who's online'? ใช้ตัวหนังสือขนาด h3

div.module_menu {
background: url(../images/green/mw_box_br.png) 100% 100% no-repeat;
}
*** เพิ่มคำสั่งให้ห่างจากขอบบน
padding: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 5px;


div.module_menu div {
background: url(../images/green/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
background: url(../images/green/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
background: url(../images/green/mw_box_tl.png) 0 0 no-repeat;
}
*** เป็นภาพพื้นของกรอบ Main Menu Resort Key Concept ถ้าไม่ใช้ภาพให้ใช้สีตามนี้ 
background-color: #99CC00;
background-image: none;
background-repeat: no-repeat;
background-position: 0 0;
***? คำสั่งใส่เส้นประรอบพื้น
border: 1px dashed #000000;

*** ส่วนคำสั่งนี้จะใช้ภาพ bg8.gif เป็นพื้นหลัง
background: url(../images/bg8.gif) 100% 0 repeat;

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
ปรับแต่ง green_bg.css
/* green */
#page_bg {
background: #316b16;
}
*** สีพื้นหลังของ Template นี้ ปกติสีเขียว 

div#wrapper {
background: #f7f7f7 url(../images/green/mw_shadow_l.png) 0 0 repeat-y;
}

div#wrapper_r {
background: url(../images/green/mw_shadow_r.png) 100% 0 repeat-y;
}
*** ภาพ mw_shadow_l.png? และ mw_shadow_r.png? เป็นภาพขอบแท่งด้านข้าง นอกสุด ขอบซ้ายขอบขวา ระบายตามแนว Y


div#header {
background: url(../images/green/mw_header_t.png) 0 0 repeat-x;
}

div#header_l {
background: url(../images/green/mw_header_t_l.png) 0 0 no-repeat;
}

div#header_r {
background: url(../images/green/mw_header_t_r.png) 100% 0 no-repeat;
}
*** mw_header เป็นภาพประกอบส่วนหัวด้านบน 
div#footer {
background: #f7f7f7 url(../images/green/mw_footer_b.png) 0 100% repeat-x;
}

div#footer_l {
background: url(../images/green/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
background: url(../images/green/mw_footer_b_r.png) 100% 0 no-repeat;
}
*** mw_footer เป็นภาพประกอบส่วนล่าง ถ้าไม่ต้องการ ก็ลบออกไป แล้วใส่โค้ดใหม่ตามนี้
background-image: none; ไม่มีภาพ
background-repeat: repeat-y;
background-position: 0 0;

++++++++++++++++++++++++++++++++++++++++++++++++
ปรับแต่ง template.css
/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
margin: 0;
padding: 0;
}

body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}
*** สีลักษณะ ขนาดตัวหนังสือที่เป็นเนื้อหา บทความที่ได้สร้าง ปกติ ดำ 80% สีของ Bullet หน้าข้อความ

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}
*** จัดการกับลิงค์ เช่น ชี้เมาส์แล้วลิงค์จะมีขีดเส้นใต้ underline ตัวหนังสือแบบธรรมดา

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
border: 1px solid #CC3333;?? *** ตีกรอบรอบทั้งหน้าจอ 
}

div.center {
text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
}

body.width_medium div#wrapper {
width: 950px;
}

body.width_small div#wrapper {
width: 773px;
}

body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}

div#header_l {
position: relative;
}

div#header_r {
height: 90px;? *** ปรับระยะห่างระหว่าง Top Menu กับขอบด้านบน กรณีจะวางโลโก้ขนาดใหญ่ลงไป
padding-left: 370px;
padding-right: 30px;
padding-top: 25px;
overflow: hidden;
text-align: left; 
}

*** คำสั่ง ต่างๆ 

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;*** ตำแหน่งการวาง ในความกว้าง 298px จะวางซ้าย กลาง ขวา ถ้าจะวางกลางๆ จอ ก็ตั้งค่า 298px ให้มากกว่านี้
width: 298px;***? แก้ไขนาดกว้างของโลโก้
height: 75px; *** แก้ไขขนาดความสูงของโลโก้
background: url(../images/mw_joomla_logo.png) 0 0 no-repeat; *** โลโก้บนหัวเว็บ ปกติจะเป็นโลโก้จูมล่า
margin-left: 30px;
margin-top: 25px;
}

div#newsflash {
width: auto;
margin-left: 350px;
margin-right: 30px;
border: 1px solid #00f;
}
***? ตำแหน่งสำหรับแสดงข้อความ newsflash กำหนดขนาดพื้นที่? อาจกำหนดสีเฉพาะส่วนนี้ เช่น
background-color: #0000FF;


div#tabarea {
background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
margin: 0 11px;

}

div#tabarea_l {
background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
padding-left: 32px;
}

div#tabarea_r {
height: 42px;
background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
padding-right: 1px;
}

****? ภาพ mw_header จะเป็นภาพประกอบ Top Menu ถ้าไม่ใช้ Top Menu ให้ยกเลิกภาพเหล่านี้ ตัวอย่างการเปลี่ยนใช้สีแทนภาพ
height: 42px; *** ความความสูงของส่วนนี้ ยืดลงด้านล่างได้ 
padding-right: 1px;
background-color: #FF0000; *** สีพื้นเลือกสีแดง
background-image: none;
background-repeat: no-repeat;
background-position: 100% 0;



div#footer_r {
padding-top: 10px;
height: 47px; *** ค่าความสูงของขอบล่างสุด ปกติสูงจากขอบล่าง 47px 
overflow: hidden;
}
**** สามารถกำหนดสีพื้นให้ข้อความเครดิต Joomla ได้ โดยใส่
background-color: #00FF00;


div#footer_r div {
text-align: center;
font-size: .90em;
color: #aaa;? *** สีของลิงค์ Power by Joomla? สีของคำว่า Joomla
}

div#footer_r a:link, div#footer_r a:visited? {
color: #999;? *** สีของลิงค์ Power by Joomla? สีของคำว่า Joomla เมื่อชี้เมาส์
}

div#footerspacer {
height: 10px;
}

#pathway {
padding: 0px 10px 8px;
width: auto;
margin-top: -2px;
margin-right: 250px;
text-align: left;
}

#search {
float: right; *** ตำแหน่งการวาง Search
width:320px;
margin-top: -20px; *** กำหนดความห่างระหว่าง Search กับ Top Menu
margin-right: 30px;
height: 40px; *** ความห่างของ Search กับเนื้อหาด้านล่าง
overflow: hidden;
text-align:right;
color: #0000FF; *** สีข้อความที่ได้คนหา จะให้แสดงตามสีนี้ เช่น สีน้ำเงิน
}
*** ?? ?background-color: #3300FF; ต้องการสีพื้นของส่วนแสดง Search ก็เพิ่มคำสั่งแทรกสีลงไป 


form#searchForm input {
vertical-align: middle;
}

form#searchForm table {
border-collapse: collapse;
}

form#searchForm td {
padding:0;
}

#mod_search_searchword {
padding-left: 3px;
}

#area {
padding: 0;
}

#whitebox {
margin: 0 21px 0px 21px; *** 0 เป็นค่ากำหนดให้ผ่าน ปุ่ม Search
background: #fff;? **** สีพื้นของส่วนแสดงเนื้อหา
width: auto;
}
*** สีพื้นของส่วนแสดงเนื้อหา 

#whitebox div {
text-align: left;
}

#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
height: 10px;? *** ความห่างจากขอบบนของเมนู 
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
border-left: 1px solid #ccc;? *** กำหนดเส้นตีขอบซ้ายมือในส่วนแสดงเนื้อหา ด้วยสีเทา 20 %
border-right: 1px solid #ccc;? *** กำหนดเส้นตีขอบขวามือในส่วนแสดงเนื้อหา ด้วยสีเทา 20 %
width: auto;
padding: 1px 8px;
}

#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
*** จัดการกับตำแหน่งสีพื้นของส่วนแสดงเนื้อหา เช่น ภาพประกอบพื้นหลัง mw_content? ถ้าจะยกเลิกภาพให้เปลี่ยนสีตามนี้? แต่ต้องไปกำหนดสีในส่วน #whitebox? ให้เหมือนกันด้วย
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
background-position: 0 0;


/* horizontal pill menu */
table.pill {
margin-left: auto;
margin-right: auto;
padding: 0;
}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat; *** ภาพของปุ่มในตำแหน่ง Top
width:? 20px;
height: 32px;

}
*** จัดการกับภาพของปุ่มในตำแหน่ง Top ชื่อภาพ mw_menu_cap_l อาจยกเลิกภาพออกไป แล้วใช้สีแทนภาพ? แต่ต้องไปแก้ไขในไฟล์ green.css เพื่อให้ชี้เมาส์แล้วตำแหน่งเหล่านี้เปลี่ยนสี
width:? 20px;
height: 32px;
background-color: #CCCCCC; *** ใช้สีเทา 20 % แทนภาพ 
background-image: none;
background-repeat: no-repeat; 

td.pill_m {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width:? 19px;
height: 32px;
}
**********************************************
ตัวอย่างการตีกรอบรอบ
td.pill_l {
width:? 20px;
height: 32px;
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

td.pill_m {
width:? 20px;
height: 32px;
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
padding: 0;
margin: 0;
width: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}

td.pill_r {
width:? 20px;
height: 32px;
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
width:? 19px;
height: 32px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
*******************
#pillmenu {
white-space: nowrap;
height: 32px;? ****? ความสูงของสีพื้นหลังตำแหน่ง Top Menu ***
float: left;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #000;
text-decoration: none;
}
*** ข้อความ ตัวหนังสือในลิงค์ของ Top Menu


#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
border: 1px solid #CC3333; *** ตีกรอบรอบเฉพาะส่วน Left คอลัมน์ที่มี? Main Menu Login Form
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
border: 1px solid #CC3333; *** ตีกรอบรอบเมนคอลัมน์ พวก บทความ Latest New Popular ครอบถึงด้านล่าง
}

#maincolumn_full {
margin-left: 0;
padding: 0;?? ?
width: 100%;
}

table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}

table.nopad td.middle_pad {
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

/* headers */
div.componentheading {
padding-left: 0px;
border: 1px solid #CC3333;?? *** ตีกรอบรอบ Welcome to Front Page ของเมนู Home
}
****? ค่า h1- h4 กำหนดขนาดของตัวหนังสือ 

h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}
***? กำหนดขนาด แบบ ตัวหนังสือที่เป็นหัวข้อบทความใน Joomla
table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold; *** กำหนดเป็นตัวหนา
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em; *** ขนาดของตัวหนังสือ พวกหัวข้อ เช่น Popular, Who's online, Main Menu 
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* small text */
.small {
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.modifydate {
height: 20px;
vertical-align: bottom;
font-size: .90em;
color: #999;
font-weight: normal;
text-align: left;
}

.createdate {
height: 20px;
vertical-align: top;
font-size: .90em;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;

}

a.readon {
margin-top: 10px;
display: block;
float: left;
background: url(../images/mw_readon.png) top right no-repeat;
padding-right: 20px;
line-height: 14px;
height: 16px;
}
***? ภาพเครื่องหมาย home >>? เป็นเครื่องหมาย >>

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

/* spacers */
span.article_separator {
display: block;
height: 20px;
}

.article_column {
padding-right: 5px;
}

.column_separator {
border-left: 1px dashed #e0e0e0;
padding-left: 10px;
}

td.buttonheading {

}

td.buttonheading img {
border:none;
}

.clr {
clear: both;
}

td.greyline {
width: 20px;
background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}

div#maindivider {
border-top: 1px solid #ddd;
margin-bottom: 10px;
overflow: hidden;
height: 1px;
}

table.blog span.article_separator {
display: block;
height: 20px;
}

/* edit button */
.contentpaneopen_edit{
float: left;
}

/* table of contents */
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
float: right;
}

table.contenttoc td {
padding: 0 5px;
}


/* content tables */
td.sectiontableheader {
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}


/* content styles */
table.contentpaneopen, table.contentpane {
margin: 0;
padding: 0;
width: 100%;
border: 1px solid #CC3333; *** ตีกรอบรอบบทความเท่านั้น ***
}

table.contentpaneopen li {
margin-bottom: 5px;
}

table.contentpaneopen fieldset {
border: 0;
border-top: 1px solid #ddd;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

table.contentpaneopen h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

.highlight {
background-color: #fffebb;
}

/* module control elements */
table.user1user2 div.moduletable {
margin-bottom: 0px;
border: 1px solid #CC3333; **** ตีกรอบแดงรอบ Latest New และ Popular
}

div.moduletable, div.module {
margin-bottom: 25px;
border: 1px solid #CC3333; *** ตีกรอบรอบ Polls และ Who's Online? Login Form banner ด้านล่าง
}

div.module_menu h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
border: 1px solid #CC3333;? **? ตีกรอบรอบเฉพาะคำว่า Main Menu, Resources และ Examples
}

div.module_menu {
margin: 0;
padding: 0;
margin-bottom: 15px;
}

div.module_menu div div div {
padding: 10px;
padding-top: 30px;
padding-bottom: 15px;
width: auto;
border: 1px solid #CC3333; **** ตีกรอบภายใน Main Menu, Resource, Example Pages
}

div.module_menu div div div div {
background: none;
padding: 0;
}

div.module_menu ul {
margin: 10px 0;
padding-left: 20px;
border: 1px solid #CC3333; *** ตีกรอบใน Main Menu, Resoruce, Example Page เฉพาะลิงค์ Home ....
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
font-weight: bold;
}

#leftcolumn div.module {
padding: 0 10px;
}

#leftcolumn div.module table {
width: auto;
}

/* forms */
table.adminform textarea {
width: 540px;
height: 400px;
font-size: 1em;
color: #000099;
}

div.search input {
width: 145px;
border: 1px solid #ccc;
margin: 15px 0 10px 0;
**** แก้ไขตำแหน่งปุ่ม Search เช่น สีรอบกรอบสีดำ สีพื้นเขียวอ่อน
div.search input {
width: 145px;
border: 1px solid #000000;
margin: 15px 0 10px 0;
background-color: #99FF00;

}

form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage???????? {? margin: 5px; }
div.mosimage_caption {? font-size: .90em; color: #666; }

div.caption?????? { padding: 0 10px 0 10px; }
div.caption img?? { border: 1px solid #CCC; }
div.caption p???? { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
margin-top: 5px;
}

table.paramlist td.paramlist_key {
width: 128px;
text-align: left;
height: 30px;
}

table.paramlist td.paramlist_value {
}

div.message {
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 14px;
color : #c30;
text-align: center;
width: auto;
background-color: #f9f9f9;
border: solid 1px #d5d5d5;
margin: 3px 0px 10px;
padding: 3px 20px;
}

/* Banners module */

/* Default skyscraper style */
.bannergroup {
border: 1px solid #CC3333; *** ตีกรอบรอบแบนเนอร์ ***
}

.banneritem img {
display: block;
margin-left: auto;
margin-right: auto;
}

/* Text advert style */

.banneritem_text {
padding: 4px;
font-size: 11px;
}

.bannerfooter_text {
padding: 4px;
font-size: 11px;
background-color: #F7F7F7;
text-align: right;
}

/* System Messages */
/* see system general.css */

.pagination span { padding: 2px; }
.pagination a??? { padding: 2px; }

/* Polls */
.pollstableborder td {
text-align: left;
border: 1px solid #CC3333; *** ตีตารางใน โพลล์ ***
}

/* WebLinks */
span.description {
display:block;
padding-left: 30px;
}

/* Frontend Editing*/
fieldset {
border: 1px solid #ccc;
margin-top: 15px;
padding: 15px;
}

legend {
margin: 0;
padding: 0 10px;
}

td.key {
border-bottom:1px solid #eee;
color: #666;
}

/* Tooltips */

.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}

#syndicate{
float:left;
padding-left: 25px;
}

#power_by{
float:right;
padding-right: 25px;
}

/* Component Specific Fixes */

#component-contact table td {
padding: 2px 0;
}