มีเว็บง่ายๆ ได้แล้ว! วันนี้! กับ Hitztheme เทมเพลตจูมล่า ภาษาไทย รองรับมือถือ 

ribbon top

เทมเพลตจูมล่า สำหรับคนไทย

ค่า CSS เบื้องต้น

     โดยปกติแล้ว การเขียน CSS แบบทั่วไปนั้นจะมีการกำหนดการใช้ค่า ตามรูปแบบดังนี้

 

selector {property: value}

 

รูปแบบของคำสั่ง CSS นั้นจะประกอบไปด้วย 3 ส่วนคือ

  1. Selector คือ ส่วน HTML tag ที่เราต้องการจะให้แสดงผล โดยส่วนมาจากในเทมเพลต ก็จะเป็นการเรียกใช้ ID หรือ Class เป็นหลัก แต่ก็จะมีในส่วนอื่นๆ อาทิเช่น h1, h2 , table , input หรือ lable เป็นต้น
  2. Property คือ ส่วนของคุณสมบัติที่เราต้องการกำหนดค่านั้นๆ  เช่น สีตัวอักษร คือ color , ชนิดตัวอักษร คือ font-family , ขนาดตัวอักษร คือ font-size เป็นต้น
  3. Value คือ ค่าที่เราต้องการระบุให้กับ Property นั้นๆ  เช่น  ตัวอักษรสีแดง คือ #ff0000 , ชนิดตัวอักษร  tahoma คือTahoma, Geneva, sans-serif , ขนาดตัวอักษร คือ 12px  เป็นต้น

โดยถ้านำรูปแบบมาเขียนก็จะได้ดังนี้

 

#recommend{ color:#ff0000; font-family:Tahoma, Geneva, sans-serif; font-size:12px;}

 

 โดยแต่ละ Property  จะจบด้วยเครื่องหมาย ; เสมอ และจะอยู่ในวงเล็บปีกกา {....Property.....} 

 

 

รู้จักไฟล์ CSS

 ไฟล์ css ในเทมเพลตของเรานั้น จะมีด้วยกัน 2 ไฟล์หลัก ก็คือ

1. ไฟล์ css ชื่อ (ชื่อเทมเพลต).css

  อาทิเช่น tonnum.css โดยจะเป็นไฟล์หลักในการกำหนดรูปแบบของ css ในเทมเพลต โดยเบื้องต้น ในแต่ละ Div set เราได้กำหนด css ไว้ให้แยกจากกัน

 

/*** top ***/
#top{ background:#fff; padding-top:10px; padding-bottom:20px;}
#top-body{ padding:0px;}
#social{ padding-top:15px;}

 

/*** slide ***/
#slide{padding:0px; overflow:hidden !important;}
.favth-carousel-inner{ margin:0px !important;}
.favslider-carousel .favth-carousel-indicators{ margin-top:20px !important;}

 

/*** recommend ***/
#recommend{ padding-top:3%; padding-bottom:2%;}
#recommend h2{ padding-bottom:10px;}

 

นั้นหมายความว่าในแต่ละ div set จะสามารถกำหนดเฉพาะจุดของ Module ได้โดยเพิ่ม css ลงในแต่ละส่วน อาทิเช่น ต้องการเพิ่มสีพื้นหลังของ div set ที่ชื่อ recommend ท่านก็เพิ่มดังนี้

 

/*** recommend ***/
#recommend{ padding-top:3%; padding-bottom:2%;background:#000000;}
#recommend h2{ padding-bottom:10px;}

 

จะเห็นว่าเราได้เพิ่มสีพื้นหลังเป็นสีดำ ให้กับในส่วน div set ที่ชื่อ recommend

8 4

ตัวอย่างการเปลี่ยนสีพื้นหลังใน Div Set ที่ชื่อ recommend ให้เป็นสีดำ

 

2. ไฟล์ css ชื่อ (ชื่อเทมเพลต)-m.css

     อาทิเช่น tonnum-m.css ในไฟล์นี้ จะเป็นตัวกำหนดการปรับขนาดของ css จากไฟล์หลัก (ตามข้อ 1) ให้ทำการแสดงผลรองรับในขนาดมือถือต่างๆ โดยเบื้องต้น เราแยกไว้ดังนี้

 

/* เมื่อความกว้างต่ำกว่า 1360px max*/
@media screen and (max-width: 1360px) {

}
/* เมื่อความกว้างต่ำกว่า 1024px max*/
@media screen and (max-width: 1024px) {

.favth-carousel-caption h3 { font-size:2em !important ;}
.favslider-caption-description { font-size:16px !important;}
}

/* เมื่อความกว้างต่ำกว่า 768px max*/
@media screen and (max-width: 768px) {
#logo{ text-align:center;}
#banner img{ text-align:center !important; margin:0 auto 0 auto; display:block; }
}

/* เมื่อความกว้างต่ำกว่า 500px max*/
@media screen and (max-width: 480px) {

#social { text-align:center; padding-top:10px;}
.favth-carousel-caption h3 { font-size:1.4em !important ;}
.favslider-caption-description { font-size:14px !important;}
}

 

 ซึ่งตามหลักการแล้ว เทมเพลตจะมองหาค่าที่กำหนดจากบรรทัดล่างสุดก่อนเสมอ ถ้าไม่พบการกำหนดใดๆ ก็จะเลื่อนขึ้นมาตามค่าต่างๆ จนถึงบนสุด จากหลักการนี้ เราเลยได้แยกขนาดความกว้างเอาไว้ โดยให้เทมเพลต มองจากขนาดต่ำสุดก่อน ถ้าไม่พบ ถึงค่อยขยับขึ้นมาดูในขนาดที่ใหญ่ขึ้นนั้นเอง แต่เราได้แยกในส่วน Blog เอาไว้ต่างหาก ที่ด้านล่างของไฟล์ css เพื่อให้เทมเพลตตรวจสอบก่อนเสมอ

 

** โปรดอย่าสลับการจัดเรียง เพราะจะสงผลในส่วนการแสดงผลที่เพียนไป

Code Components

 Code Components เป็น code หลักที่ใช้ในการเรียกแสดงข้อมูลในแต่ละหน้า โดยอ้างอิงจาก Component หรือ Content ที่สร้างขึ้นในส่วน Menu ซึ่งจะส่งผลให้ ในการสร้างเมนูต่างๆ ก็จะดึงการแสดงผลของ component หรือ content ในเมนูนั้นๆ มาแสดงผ่านทาง code นี้

 

<jdoc:include type="component" />

 

    โดยปกติจะถูกใช้แค่ 1 ครั้งในเทมเพลตเท่านั้น เหมือน Code Message  โดยเราได้กำหนดการเรียกใช้งานไว้ใน Div set ที่ชื่อ component เป็นหลักอยู่แล้ว 

7 5

ตัวอย่าง ในข้อมูล กรอบสีส้ม คือการใช้งาน Code Components เรียก Content มาแสดงตามเมนู

     

Code Message

   Code Message คือ code ที่ใช้สำหรับในการเรียกคำแจ้งเตือนต่างๆ ซึ่งจะเป็นข้อความจากระบบของ Joomla โดยการใช้งานนั้นจะเพิ่ม code นี้ลงไปใน

 

<jdoc:include type="message" />

 

ซึ่งโดยปกติแล้ว Code Message นี้ จะอยู่ด้านบนของ code ของ component เสมอ 

 

<jdoc:include type="message" />
<jdoc:include type="component" />

 

      และจะถูกใช้แค่ 1 ครั้งในเทมเพลตเท่านั้น โดยเราได้กำหนดการเรียกใช้งานไว้ใน Div set ที่ชื่อ component เป็นหลักอยู่แล้ว โดยที่ Code Message จะทำงานก็ต่อเมื่อ มีการใส่ข้อมูลหรือได้รับข้อมูลต่างๆ ในหน้าเว็บไซต์ รวมถึงข้อความแจ้งเตือนในกรณีที่ทำไม่ถูกต้องในหน้าเว็บไซต์

7 4

ตัวอย่าง Code Message แสดงข้อความในกรณีที่เราไม่ใส่ email ให้ถูกต้อง

 

 

การเพิ่ม Positions Module

     โดยปกติแล้ว ในส่วนคอลัมน์ที่เรากำหนดไว้นั้น จะมี code ที่ไว้สำหรับเรียกใช้งาน Module ผ่านชื่อ positions ที่กำหนดเอาไว้ใน code ท่านสามารถเพิ่ม Positions Module เองได้ง่ายๆ ด้วย code นี้

 

<jdoc:include type="modules" name="positions_name" style="xhtml" />

 

โดยให้ท่านเปลี่ยนตรง positions_name เป็นชื่อ positions ที่ท่านต้องการ อาทิเช่น

 

<jdoc:include type="modules" name="phone" style="xhtml" />

 

ท่านจะได้ positions ที่ชื่อ phone ไว้สำหรับเรียกใช้งาน module ซึ่งโดยปกติแล้ว เราจะทำการสร้าง code นี้พร้อมกับการสร้างคอลัมน์ใน Div Set ไปในตัว โดยตั้งชื่อ ID ให้ตรงกับชื่อ positions เพื่อความสะดวกในการจำ

 

<div id="top" class="container-fluid">
   <div id="top-body" class="container">
      <div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
         <jdoc:include type="modules" name="logo" style="xhtml" />
      </div>
      <div id="menu" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
      <div id="social" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="social" style="xhtml" />
      </div>
      <div id="phone" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="phone" style="xhtml" />
      </div>
   </div>
</div>

 

ตัวอย่างการเพิ่มคอลัมน์ และ code เรียกใช้งาน module ที่ชื่อ phone ลงใน div set ของ Top 

 

การใช้งานในส่วน Module

     หลังจากที่ท่านเพิ่ม คอลัมน์ และ code เรียกใช้งาน module แล้วนั้น ในส่วนหลังบ้านของ Joomla ในส่วน Module ท่านจะต้องทำการพิมพ์ชื่อ positions ลงไปในช่องของ positions โดยตรง เพราะท่านจะไม่สามารถมองเห็นชื่อ positions ที่ชื่อ phone จากในรายการ ในขณะนี้

 

7 1

ตัวอย่างการเพิ่ม Position ใหม่ลงในเว็บไซต์ โดยการพิมพ์ชื่อ position ลงไป

 

     หลังจากที่ท่านพิมพ์ชื่อ positions ลงไปแล้วนั้น ให้ทำการตรวจสอบคำให้ถูกต้อง ถ้า ok แล้ว ให้ทำการ ENTER 1ครั้ง ระบบก็จะทำการเก็บชื่อ Positions ให้ท่านโดยอัตโนมัติ

 

7 2

ตัวอย่าง หลังจากกด Enter แล้ว ชื่อก็จะถูกเก็บเข้าไปในรายการ positions

 

     และเมื่อเราทำการ Save Module เราก็จะเห็นชื่อ Positions อยู่ในรายการ เพื่อไว้สำหรับเรียกใช้งานในครั้งต่อๆ ไป

 

7 3

ตัวอย่างรายการชื่อ positions ที่เราเพิ่มเข้าไป

  1. การเพิ่มคอลัมน์
  2. การปรับขนาดคอลัมน์
  3. การย้ายตำแหน่ง Div Set
  4. ทำความเข้าใจ Div Set