การปรับแต่งไฟล์ 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;
}

Details

Category: มือใหม่เจาะลึก Joomla!

Hits: 4191

การติดตั้ง CaptCha ป้องกันแสปม บอทใน ViruteMart
การติดตั้งจะคล้ายกันกับการติดตั้งใน Joomla เพียงแต่การตั้งค่าบางอย่างจะต่างกัน ตัวอย่างการรับสมัครเป็นสมาชิกที่จะมี CaptCha ให้หาผลลบ ซึ่งแสปมจะทำไม่ได้ หรืออาจจะใช้ตัวอักษร แล้วให้พิมพ์ตามก็ได้
ud037

ตัวอย่างสมาชิกเว็บไซต์ ที่ไม่สามารถระบุได้ว่ามาจากที่ใด แต่ไม่ใช่คนไทยแน่นอน ดูอีเมล์และชื่อแปลกๆ yandex.ru alexabosterm
ud028

การติดตั้ง
ให้ย้อนกลับไปอ่านการติดตั้งใน Joomla เพราะตัว VirtueMart จะทำงานบน Joomla อีกที การติดตั้งจึงเหมือนกัน อ่านที่บทความตามลิงค์ด้านล่าง
http://www.siamebook.com/lbro/index.php?option=com_content&view=article&id=626:joomlacapture&catid=162:insidejoomla&Itemid=66

การตั้งค่าหลังการติดตั้ง
1.? ให้เข้าหน้าจอผู้ดูแลระบบของ VirtueMart คลิกผู้ดูแลระบบ
2.? คลิก จัดการ User
3.? คลิก สร้างใหม่
031

4.? พิมพ์ข้อมูลเพิ่มลงไป ช่อง ชนิด คลิกเลือก คล้ายตัวอย่าง
5.? ช่องหัวข้อคลิกและพิมพ์เช่น โค้ดป้องกันแสปม
6.? ช่องรายละเอียดก็พิมพ์ลงไป เช่น คล้ายตัวอย่าง
7.? ค่าอื่นๆ กำหนดตามตัวอย่าง
8.? ขนาดของฟิลด์เป็นความกว้างของช่องที่จะให้พิมพ์ข้อความ
9.? เสร็จแล้วคลิกบันทึก
032

10.? จะมีฟิลด์ captcha เพิ่มเข้ามา แต่อยู่ตำแหน่งแรกสุดเลย เราต้องการให้ไปอยู่ตำแหน่งสุดท้าย อาจคลิกปุ่มสามเหลี่ยมเลื่อนลงไปเรื่อยๆ
11.? หรือคลิกและพิมพ์ตัวเลขในช่อง a-z แล้วคลิกปุ่มแผ่นดิสก์เพื่อบันทึกก็ได้ พิมพ์ตัวเลขแทนตำแหน่งฟิลด์สุดท้าย ซึ่งจะเป็นฟิลด์ประมาณ 21
033

034

12.? ผลงานที่ได้ เมื่อมีคนมาสมัครเป็นสมาชิก ก็จะมี CaptCha ปรากฏขึ้นมาด้วย
037

Details

Category: เปิดร้านค้าออนไลน์ด้วย VirtueMart

Hits: 1316

กรณีที่เปิดให้มีการสมัครสมาชิกหรือต้องมีการกรอกข้อมูลเพื่อติดต่อกับทางเว็บไซต์ ถ้าไม่มีการติดตั้ง CaptCha ก็จะทำให้พวกแสปมหรือบอทต่างๆ เข้ามาลงประกาศ ลงข้อความป่วน ลดน้ำหนัก ฯลฯ ให้วุ่นวายไปหมด การใช้ CaptCha แม้จะช่วยไม่ได้ 100% แต่ก็ช่วยป้องกันได้ในระดับหนึ่ง ใน Joomla! จะต้องติดตั้งเพิ่มลงไปเอง

{gallery}/book/10007/captcha{/gallery}

Details

Category: มือใหม่เจาะลึก Joomla!

Hits: 1515

เป็นการตั้งค่าเพื่อความปลอดภัยในการใช้งานเว็บบอร์ด SMF หลังจากได้ติดตั้งโปรแกรมลงเว็บไซต์เรียบร้อยแล้ว

1. ใช้โปรแกรม FileZilla เชื่อมต่อเข้าพื้นที่เว็บไซต์ ถ้าเป็นการเช่าพื้นที่ทำเว็บไซต์จะมีโฟลเดอร์หลักคือ public_html ให้กำหนด chmod = 755
2. โฟลเดอร์ที่เก็บโปรแกรมเช่น brd ก็กำหนด chmod = 755
3. ภายในโฟลเดอร์ brd จะมีไฟล์และโฟลเดอร์ต่างๆ โฟลเดอร์ทั้งหมดยกเว้น attachments ให้กำหนด chmod = 755 ส่วน attachments = 777 ไม่ เช่นนั้นจะอัพโหลดไฟล์ไม่ได้

Details

Category: คุ่มือใช้งานและสร้างเว็บบอร์ด SMF

Hits: 1638

Read more ...