<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 3.8//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd"> <extension version="3.1" type="template" client="site"> <name>Special-Day-J4</name> <creationDate>05-10-2021</creationDate> <author>HITZtheme</author> <authorEmail>hitztheme@hotmail.com</authorEmail> <authorUrl>https://www.hitztheme.com/</authorUrl> <copyright>HITZtheme 2021</copyright> <license></license> <version>1.0</version> <description> <![CDATA[<div style="text-align:left"><span style="font-weight:bold;font-size:1.1em;color:#000">--- วันสำคัญ (Special-Day) Joomla 4---<br /<hr style="border:0;color:rgb(226,226,226);background-color:rgb(226,226,226);height:1px" />ลิขสิทธิ์เทมเพลต เป็นของ Hitztheme</span><br />เทมเพลตออกแบบโดย hitztheme.com <br /><br /> <span style="color: #000000;font-weight:bold;" > การใช้งานเบื้องต้น</span><br /> <span style=" padding-left:15px;"> 1.โปรดใส่ Serial Code ก่อนการแก้ไขหรือใช้งานเทมเพลต ดูคำแนะนำเรื่อง Serial Code ได้จาก <a href="https://www.youtube.com/watch?v=1-0hZXQjWRk" target="_blank" > - ที่นี่ </a></span><br /> <span style=" padding-left:15px;"> 2.ติดตั้งเฉพาะตัวเทมเพลต โปรดติดตั้งส่วนเสริมหลัก เช่น JCE Editor ก่อนการใช้งาน </span><br /> <span style=" padding-left:15px;"> 3.เทมเพลต Special-day (วันสำคัญ) เป็นเทมเพลตแบบหน้าเดียว ไม่มีการแสดง Content หรือ Module</span><br /> <span style=" padding-left:15px;"> 4.แนะนำดูการใช้งานและคำอธิบายเบื้องต้นของเทมเพลต Special-day (วันสำคัญ) ได้จาก <a href="https://www.youtube.com/watch?v=IAzVKsLrUtk&list=PL4xx_YQkg4RJp0RVonRSuFStXCH3IWAFa" target="_blank" > - ที่นี่</a></span><br /> <span style=" padding-left:15px;"> 5.หากมีปัญหาในการใช้งานโปรดติดต่อ Hitztheme หรือ ADD LINE ID : <a href="https://line.me/R/ti/p/~hitztheme" target="_blank" >hitztheme</a> (หรือคลิ๊กที่ลิงค์)</span><br /><br /> <span style="color: #e70000;font-weight:bold;">สัญญาอนุญาตในการใช้งาน</span><br /> <span style=" padding-left:15px;">1.การซื้อ 1 ครั้ง ใช้งานได้ต่อ 1 โดเมนหรือ 1 เว็บไซต์ เท่านั้น</span><br /> <span style=" padding-left:15px;">2.ไม่อนุญาตให้นำไปจำหน่าย หรือขายต่อ หรือ หาผลผระโยชน์ในเชิงพาณิชย์ หลังจากการสั่งซื้อ</span><br /> <span style=" padding-left:15px;">3.ไม่อนุญาตให้นำไปแจกจ่าย หรือ เปิดให้ดาวน์โหลดต่อสาธารณะ</span><br /> <span style=" padding-left:15px;">4.ห้ามทำซ้ำหรือดัดแปลง เพื่อหาผลประโยชน์ </span><br /> <span style=" padding-left:15px;color: #e70000;font-weight:bold;">หากมีการตรวจสอบว่ามีการละเมิดลิขสิทธิ์ ทางเราจะดำเนินการตามกฏหมายจนถึงที่สุด</span><br /><br /> <span >- ต้องการข้อมูลเพิ่มเติม ดูรายละเอียดเพิ่มเติมได้ที่ <a href="https://www.hitztheme.com/" target="_blank">www.hitztheme.com</a></span><br /> <span >- ช่อง Youtube สอนการใช้งานเทมเพลตและจูมล่า <a href="https://www.youtube.com/channel/UCZWLtMuKTvWgdf64pfSWXqQ" target="_blank">HitzTheme Channel</a>.</span> <br /><br /><span style="font-weight:bold;font-size:1.1em;color:#000">ตำแหน่งแสดงข้อมูลและลิงค์:</span><br /> <img src="../templates/special-day-j4/position1.jpg" align="left" hspace="10" style="padding-top:10px; max-width:640px;"/><br /> <br /><span style="font-weight:bold;font-size:1.5em;color:#000"> แนะนำตำแหน่งในเทมเพลต </span><br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#000"> 1. ตำแหน่ง IMAGE หลัก (ID = #image):</span> แสดงรูปภาพหลักของหน้าวันสำคัญ<br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#000"> 2. ตำแหน่ง INTRO (ID = #intro): </span>แสดงข้อความเพิ่มเติมของหน้าวันสำคัญ<br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#000"> 3. ตำแหน่ง LINK 1 (ID = #link1): </span>แสดงปุ่มลิงค์ที่ 1 ของหน้าวันสำคัญ<br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#000"> 4. ตำแหน่ง LINK 2 (ID = #link2): </span>แสดงปุ่มลิงค์ที่ 2 ของหน้าวันสำคัญ<br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#000"> 5. ตำแหน่ง FOOTER (ID = #footer): </span>แสดงข้อความเพิ่มเติมล่างสุดของหน้าวันสำคัญ<br /> <br /><span style="font-weight:bold;font-size:1.1em;color:#e70000">ท่านสามารถแก้ไขข้อมูลต่างๆจากในเทมเพลตได้โดยตรง ไม่ต้องใช้ Content หรือ Module มาแสดงผลในหน้านี้</span> <br /> <br /> <br /> หรือ ดูได้จากคู่มือออนไลน์ที่เว็บไซต์ Hitztheme.com ในหน้า <a href="https://hitztheme.com/template-guide/sabuy-government" target="_blank">TEMPLATE GUIDE</a><br /> </div>]]> </description> <files> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>fonts</folder> <folder>js</folder> <filename>component.php</filename> <filename>index.php</filename> <filename>layout.php</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>templateDetails.xml</filename> <filename>favicon.png</filename> <filename>position1.jpg</filename> </files> <positions> <position>debug</position> </positions> <config> <fields name="params"> <fieldset name="sub1" label="รายละเอียดภาพรวมหน้า วันสำคัญ" > <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>1.ส่วน FAVICON กำหนดไอค่อนในส่วน Page Title </b>" /> <field name="favicon" type="media" default="templates/special-day-j4/favicon.png" label=" - กำหนด favicon" description="favicon สามารถอัพโหลดรูปใหม่ โดยสร้างรูปขนาด 32x32px เซฟเป็นนามสกุล .jpg หรือ .png ทำการอัพโหลดไว้ในโฟเดอร์ Images ของเว็บไซต์" /> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>2.ส่วน Redirect Page : กำหนดให้หน้าสามารถเปลี่ยนไปยังหน้าที่ต้องการได้</b>" /> <field name="redirect" type="list" default="http-equiv" label="- ใช่ Redirect Page" description="กำหนดการเปิดใช้ Auto Redirect Page หรือไม่ ค่าเริ่มต้นคือ ใช้ Auto Redirect Page"> <option value="http-equiv">ใช้ Auto Redirect Page</option> <option value="none" >ไม่ใช้ Auto Redirect Page</option> </field> <field name="time" type="text" default="5" label="- ระยะเวลาแสดงหน้า (วินาที)" description="กำหนดระยะเวลาก่อนการ Redirect page ไปยังหน้าอื่นๆ ใส่เป็นเฉพาะตัวเลข ค่าเริ่มต้นคือ 5 (เท่ากับ 5 วินาที)"></field> <field name="pageselector" type="menuitem" default="101" label="- เลือกหน้าเว็บที่จะส่งไป" description="กำหนดหน้าเว็บไซต์จากรายการเมนูที่ต้องการ Redirect ไปยังหน้าเว็บไซต์ " ></field> <field type="spacer" class="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>3.ส่วน BACKGROUND กำหนดสีและรูปภาพในส่วนพื้นหลังเว็บไซต์ </b>" /> <field name="bodybgimg" type="list" default="" label="- Background Images" description="กำหนดการใช้รูปพื้นหลัง ค่าเริ่มต้นคือ ใช้รูป "> <option value="">ใช้รูป</option> <option value="background-image: none;" >ไม่ใช้รูป</option> </field> <field name="bodybg" type="media" default="templates/special-day-j4/images/bg-1.jpg" label="- ภาพ Background " description="กำหนดรูปภาพสำหรับพื้นหลังของเว็บไซต์ " /> <field name="bodybgrepeat" type="list" default="no-repeat" label="- Background Repeat" description="กำหนดการแสดงรูปพื้นหลังแบบ ทำซ้ำ หรือรูปเดียว ค่าเริ่มต้นคือ ใช้รูปเดียว "> <option value="no-repeat">ใช้รูปเดียว</option> <option value="repeat" >ทำรูปแบบซ้ำๆ</option> </field> <field name="bodybgfixed" type="list" default="fixed" label="- Background Fixed" description="กำหนดการแสดงรูปพื้นหลังแบบยไม่เลื่อน หรือแบบ เลื่อนตาม ค่าเริ่มต้นคือ ไม่เลื่อน "> <option value="fixed">ไม่เลื่อน</option> <option value="scroll" >เลื่อนตาม</option> </field> <field name="bodybgcolor" type="color" default="#f3f3f3" label="- สีพื้นหลัง" description="กำหนดสีพื้นหลังของเว็บไซต์ ค่าเริ่มต้นคือ #f3f3f3"></field> <field type="spacer" class="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>4.ส่วน BODY กำหนดความกว้างของเว็บไซต์แบบ Center </b>" /> <field name="widthcenter" type="text" default="1170px" label="- ความกว้างของแบบเซ็นเตอร์" description="กำหนดขนาดความกว้างสูงสุดของแบบเซ็นเตอร์ ค่าเริ่มต้นคือ 1170px"></field> </fieldset> <fieldset name="sub2" label="ตัวอักษรและลิงค์" > <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>1.กำหนดรูปแบบตัวอักษร : สามารถดูตัวอย่างฟอนต์ได้ที่ GOOGLE FONTS </b>>> <a href='https://fonts.google.com/?subset=thai' target='_blank'><b style='color:red;text-decoration: underline'>ดูที่นี่!</b></a>" /> <field name="stylefonts" type="list" default="Srisakdi" label="- เลือก Fonts" description="เลือกฟอร์นที่จะใช้ ซึ่งเป็นฟอร์นจาก Google ค่าเริ่มต้นคือ Srisakdi ( Srisakdi ความหนาตัวอักษร ได้แค่ 400 และ 700 เท่านั้น)"> <option value="Helvetica Neue">Helvetica Neue</option> <option value="Prompt" >Prompt</option> <option value="Kanit">Kanit</option> <option value="Sarabun" >Sarabun</option> <option value="Chakra Petch" >Chakra Petch</option> <option value="Taviraj" >Taviraj</option> <option value="Mitr" >Mitr</option> <option value="Bai+Jamjuree" >Bai Jamjuree</option> <option value="Itim" >Itim</option> <option value="Mali" >Mali</option> <option value="Sriracha">Sriracha</option> <option value="Niramit">Niramit</option> <option value="Pridi">Pridi</option> <option value="Athiti">Athiti</option> <option value="Charmonman" >Charmonman</option> <option value="Chonburi" >Chonburi</option> <option value="Kodchasan">Kodchasan</option> <option value="K2D">K2D</option> <option value="Pattaya">Pattaya</option> <option value="Srisakdi">Srisakdi</option> </field> <field name="fontssize" type="list" default="20" label="- ขนาดตัวอักษรเริ่มต้น " description="กำหนดขนาดของตัวอักษรเริ่มต้นของเว็บไซต์ ค่าเริ่มต้นคือ 20 px "> <option value="12">12 px</option> <option value="14" >14 px</option> <option value="16" >16 px</option> <option value="18">18 px</option> <option value="20" >20 px</option> <option value="22" >22 px</option> <option value="24">24 px</option> <option value="26" >26 px</option> <option value="28" >28 px</option> <option value="30">30 px</option> </field> <field name="fontweight" type="text" default="700" label="- ความหนาของตัวอักษร" description="กำหนดขนาดความหนาของตัวอักษร ใส่เป็นค่าจำนวนเต็ม ค่าเริ่มต้นคือ 700 (มีผลเฉพาะบาง Fonts โปรดตรวจสอบความหนาของตัวอักษรที่รองรับจาก Google Fonts )"></field> <field type="spacer" class="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>2.ส่วน FONTS COLOR กำหนดสีของตัวอักษร และสีลิงค์ </b>" /> <field name="fontscolor" type="color" default="#866127" label="- สีตัวอักษร " description="กำหนดสีของตัวอักษร ค่าเริ่มต้นคือ #866127 "></field> <field name="linkcolor" type="color" default="#f0c868" label="- สีของลิงค์ " description="กำหนดสีลิงค์เริ่มต้น ค่าเริ่มต้นคือ #f0c868 "> </field> <field name="hovercolor" type="color" default="#dab04c" label="- สีของลิงค์ Hover" description="กำหนดสีลิงค์ Hover เริ่มต้น ค่าเริ่มต้นคือ #dab04c "> </field> <field type="spacer" label=" <p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>3. ส่วน หัวข้อ H Tag : เป็นการกำหนดในส่วนหัวข้อหลักหรือคำหลักต่างๆ </b>" /> <field name="stylefontsh" type="list" default="Srisakdi" label="- เลือก Fonts ส่วนหัวข้อ" description="เลือกฟอร์นที่จะใช้ ซึ่งเป็นฟอร์นจาก Google ค่าเริ่มต้นคือ Srisakdi ( Srisakdi ความหนาตัวอักษร ได้แค่ 400 และ 700 เท่านั้น)"> <option value="Helvetica Neue">Helvetica Neue</option> <option value="Prompt" >Prompt</option> <option value="Kanit">Kanit</option> <option value="Sarabun" >Sarabun</option> <option value="Chakra Petch" >Chakra Petch</option> <option value="Taviraj" >Taviraj</option> <option value="Mitr" >Mitr</option> <option value="Bai+Jamjuree" >Bai Jamjuree</option> <option value="Itim" >Itim</option> <option value="Mali" >Mali</option> <option value="Sriracha">Sriracha</option> <option value="Niramit">Niramit</option> <option value="Pridi">Pridi</option> <option value="Athiti">Athiti</option> <option value="Charmonman" >Charmonman</option> <option value="Chonburi" >Chonburi</option> <option value="Kodchasan">Kodchasan</option> <option value="K2D">K2D</option> <option value="Pattaya">Pattaya</option> <option value="Srisakdi">Srisakdi</option> </field> <field name="fontweighth" type="text" default="700" label="- ความหนาของตัวอักษรหัวข้อ" description="กำหนดขนาดความหนาของตัวอักษรหัวข้อ ใส่เป็นค่าจำนวนเต็ม ค่าเริ่มต้นคือ 700 (มีผลเฉพาะบาง Fonts ตรวจสอบความหนาของตัวอักษรที่รองรับจาก Google Fonts)"></field> <field name="h1size" type="text" default="3" label="- ขนาดหัวข้อ H1" description="กำหนดขนาดตัวอักษรของหัวข้อ H1 คิดเป็นขนาดเท่าตัว จากขนาดตัวอักษรเริ่มต้น ค่าเริ่มต้นคือ 3 เท่า (ใส่เฉพาะตัวเลขเช่น 0.8, 2 , 2.5 , 3 หรือ 3.6)"></field> <field name="h1color" type="color" default="#866127" label="- กำหนดสีหัวข้อ H1 " description="กำหนดสีของหัวข้อ H1 ค่าเริ่มต้นคือ #866127"></field> <field name="h2size" type="text" default="2.5" label="- ขนาดหัวข้อ H2" description="กำหนดขนาดตัวอักษรของหัวข้อ H2 คิดเป็นขนาดเท่าตัว จากขนาดตัวอักษรเริ่มต้น ค่าเริ่มต้นคือ 2 เท่า (ใส่เฉพาะตัวเลขเช่น 0.8 , 2 , 2.5 , 3 หรือ 3.6)"></field> <field name="h2color" type="color" default="#866127" label="- กำหนดสีหัวข้อ H2 " description="กำหนดสีของหัวข้อ H2 ค่าเริ่มต้นคือ #866127"></field> <field name="h3size" type="text" default="2" label="- ขนาดหัวข้อ H3" description="กำหนดขนาดตัวอักษรของหัวข้อ H3 คิดเป็นขนาดเท่าตัว จากขนาดตัวอักษรเริ่มต้น ค่าเริ่มต้นคือ 1.5 เท่า (ใส่เฉพาะตัวเลขเช่น 0.8 , 2 , 2.5 , 3 หรือ 3.6)"></field> <field name="h3color" type="color" default="#866127" label="- กำหนดสีหัวข้อ H3 " description="กำหนดสีของหัวข้อ H3 ค่าเริ่มต้นคือ #866127"></field> <field name="h4size" type="text" default="1.5" label="- ขนาดหัวข้อ H4" description="กำหนดขนาดตัวอักษรของหัวข้อ H4 คิดเป็นขนาดเท่าตัว จากขนาดตัวอักษรเริ่มต้น ค่าเริ่มต้นคือ 0.9 เท่า (ใส่เฉพาะตัวเลขเช่น 0.8 , 2 , 2.5 , 3 หรือ 3.6)"></field> <field name="h4color" type="color" default="#866127" label="- กำหนดสีหัวข้อ H4 " description="กำหนดสีของหัวข้อ H4 ค่าเริ่มต้นคือ #866127"></field> <field name="h5size" type="text" default="0.9" label="- ขนาดหัวข้อ H5" description="กำหนดขนาดตัวอักษรของหัวข้อ H5 คิดเป็นขนาดเท่าตัว จากขนาดตัวอักษรเริ่มต้น ค่าเริ่มต้นคือ 0.7 เท่า (ใส่เฉพาะตัวเลขเช่น 0.8 , 2 , 2.5 , 3 หรือ 3.6)"></field> <field name="h5color" type="color" default="#866127" label="- กำหนดสีหัวข้อ H5 " description="กำหนดสีของหัวข้อ H4 ค่าเริ่มต้นคือ #866127"></field> <field name="htagcss" type="textarea" rows="10" default="h1 {text-shadow: 0px 2px 3px #e5d8b8;}" label="- CSS ในส่วน H Tag" description="เพิ่ม CSS ในส่วน H Tag เช่น h1 {text-shadow: 0px 2px 3px #e5d8b8;} เป็นการกำหนดเงาให้กับ h1" filter="raw" /> </fieldset> <fieldset name="sub3" label="ข้อมูลนำเสนอ" > <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>1.ส่วน Page Title : กำหนดข้อความและลูกเล่นแสดงผลที่ Browser Title</b>" /> <field name="title" type="text" default="" label="- Page Title " description="กำหนดข้อความของ Page Title ที่แสดงหน้าวันสำคัญ"></field> <field name="titlescript" type="list" default="none.js" label="- ลูกเล่น Page Title" description="เลือกลูกเล่นของข้อความใน Page Title ค่าเริ่มต้นคือ ไม่ใช่ลูกเล่น Page Title "> <option value="none.js">ไม่ใช่ลูกเล่น Page Title</option> <option value="pagetitle-1.js" >แบบที่ 1 ลูกศรชี้ Title</option> <option value="pagetitle-2.js" >แบบที่ 2 ข้อความแสดงที่ละตัวอีกษร </option> </field> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>2.ส่วน IMAGE หลัก : กำหนดรายละเอียดรูปภาพหลัก ในการแสดงวันสำคัญ </b>" /> <field name="imagesize" type="list" default="container" label="- ขนาด Image" description="เลือกขนาดความกว้างของ Image ค่าเริ่มต้นคือ แบบเซ็นเตอร์ "> <option value="container-fluid">แบบเต็มหน้าจอ</option> <option value="container" >แบบเซ็นเตอร์ </option> </field> <field name="image" type="media" default="templates/special-day-j4/images/day-1.jpg" label="- ภาพหลักวันสำคัญ " description="กำหนดรูปภาพหลักของวันสำคัญ " /> <field name="imagepadding" type="text" default="20px 0px" label="- ระยะห่าง Image" description="กำหนดขนาดระยะห่าง Image (เป็น px หรือ %) ค่าเริ่มต้นคือ 20px 0px (บน-ล่าง ซ้าย-ขวา) หรือ (บน ขวา ล่าง ซ้าย) 20px 0px 20px 0px"></field> <field name="imagecss" type="textarea" rows="10" default="#image img{box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 35%);}" label="- CSS ในส่วน Image" description="เพิ่ม CSS ในส่วน Image เช่น #image img{ box-shadow: 3px 5px 30px 0 rgb(0 0 0 / 35%);} เป็นการกำหนดเงาให้รูปภาพ" filter="raw" /> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>3.ส่วน INTRO หลัก : กำหนดรายละเอียดข้อความหลัก ในการแสดงวันสำคัญ </b>" /> <field name="introsize" type="list" default="container" label="- ขนาด Intro" description="เลือกขนาดความกว้างของ Intro ค่าเริ่มต้นคือ แบบเซ็นเตอร์ "> <option value="container-fluid">แบบเต็มหน้าจอ</option> <option value="container" >แบบเซ็นเตอร์ </option> </field> <field name="intro" type="editor" default="" label="- ข้อความ Intro " description="กำหนดข้อความของ Intro ที่แสดงหน้าวันสำคัญ" filter="safehtml"></field> <field name="intropadding" type="text" default="20px 0px" label="- ระยะห่าง Intro" description="กำหนดขนาดระยะห่าง Intro (เป็น px หรือ %) ค่าเริ่มต้นคือ 20px 0px (บน-ล่าง ซ้าย-ขวา) หรือ (บน ขวา ล่าง ซ้าย) 20px 0px 20px 0px "></field> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>4.ส่วน FOOTER : กำหนดรายละเอียดข้อความ Footer ในการแสดงวันสำคัญ </b>" /> <field name="footersize" type="list" default="container" label="- ขนาด Footer" description="เลือกขนาดความกว้างของ Footer ค่าเริ่มต้นคือ แบบเซ็นเตอร์ "> <option value="container-fluid">แบบเต็มหน้าจอ</option> <option value="container" >แบบเซ็นเตอร์ </option> </field> <field name="footer" type="editor" default="" label="- ข้อความ Footer " description="กำหนดข้อความของ Footer ที่แสดงหน้าวันสำคัญ" filter="safehtml"></field> <field name="footerpadding" type="text" default="30px 0px 0px 0px" label="- ระยะห่าง Footer" description="กำหนดขนาดระยะห่าง Footer (เป็น px หรือ %) ค่าเริ่มต้นคือ 30px 0px 0px 0px (บน ขวา ล่าง ซ้าย) "></field> </fieldset> <fieldset name="sub4" label="กำหนดปุ่มลิงค์" > <field type="spacer" class="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>1.ส่วนปุ่ม LINK : เป็นการปรับขนาดสำหรับการแสดงผลใน PC ในส่วนปุ่ม LINK 1 และ LINK 2 ซึ่งค่าทั้่ง 2 รายการรวมกันต้องไม่เกิน 12 </b>" /> <field name="linksize" type="list" default="container" label="- ขนาด LINK" description="เลือกขนาดความกว้างของ LINK ค่าเริ่มต้นคือ แบบเซ็นเตอร์ "> <option value="container-fluid">แบบเต็มหน้าจอ</option> <option value="container" >แบบเซ็นเตอร์ </option> </field> <field name="link1size" type="list" default="6" label="- ตำแหน่ง LINK 1" description="เลือกขนาดความกว้างของ LINK 1 ค่าเริ่มต้นคือ 6 "> <option value="1">1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4">4</option> <option value="5" >5</option> <option value="6" >6</option> <option value="7">7</option> <option value="8" >8</option> <option value="9" >9</option> <option value="10">10</option> <option value="11" >11</option> <option value="12" >12</option> </field> <field name="link2size" type="list" default="6" label="- ตำแหน่ง LINK 2" description="เลือกขนาดความกว้างของ LINK 2 ค่าเริ่มต้นคือ 6 "> <option value="1">1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4">4</option> <option value="5" >5</option> <option value="6" >6</option> <option value="7">7</option> <option value="8" >8</option> <option value="9" >9</option> <option value="10">10</option> <option value="11" >11</option> <option value="12" >12</option> </field> <field name="linkpadding" type="text" default="20px 0px" label="- ระยะห่าง LINK" description="กำหนดขนาดระยะห่าง LINK (เป็น px หรือ %) ค่าเริ่มต้นคือ 20px 0px (บน-ล่าง ซ้าย-ขวา) หรือ (บน ขวา ล่าง ซ้าย) 20px 0px 20px 0px"></field> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>2.ส่วนปุ่ม LINK 1 : กำหนดรายละเอียดข้อความและลิงค์ของปุ่ม Link 1 ในการแสดงวันสำคัญ </b>" /> <field name="link1" type="editor" default="" label="- ข้อความและลิงค์ ของปุ่ม Link 1 " description="กำหนดข้อความและลิงค์ ของ Link 1 ที่แสดงหน้าวันสำคัญ" filter="safehtml"></field> <field name="link1color" type="color" default="#ffffff" label="- สีตัวอักษรปุ่ม LINK 1" description="กำหนดสีของตัวอักษร LINK 1 ค่าเริ่มต้นคือ #ffffff "></field> <field name="link1colorlink" type="color" default="#e1ad4a" label="- สีของลิงค์ LINK 1" description="กำหนดสีลิงค์ LINK 1 เริ่มต้น ค่าเริ่มต้นคือ #e1ad4a "> </field> <field name="link1bg" type="color" default="#866127" label="- สีพื้นหลังปุ่มลิงค์ LINK 1" description="กำหนดสีพื้นหลังของปุ่ม LINK 1 ค่าเริ่มต้นคือ #866127"></field> <field name="link1hovercolor" type="color" default="#ffffff" label="- สีของลิงค์ Hover LINK 1" description="กำหนดสีลิงค์ Hover LINK 1 เริ่มต้น ค่าเริ่มต้นคือ #ffffff "> </field> <field name="link1hoverbg" type="color" default="#583e16" label="- สีพื้นหลังปุ่มลิงค์ Hover LINK 1" description="กำหนดสีพื้นหลังของปุ่ม Hover LINK 1 อ่านต่อ ค่าเริ่มต้นคือ #583e16"></field> <field name="link1padding" type="text" default="15px 25px" label="- ระยะห่างปุ่ม LINK 1" description="กำหนดขนาดระยะห่างปุ่ม LINK (เป็น px หรือ %) ค่าเริ่มต้นคือ 15px 25px (บน-ล่าง ซ้าย-ขวา) หรือ (บน ขวา ล่าง ซ้าย) 15px 25px 15px 25px"></field> <field name="link1border" type="text" default="5" label="- ขนาดเส้นขอบ LINK 1" description="กำหนดขนาดเส้นขอบปุ่ม LINK 1 (ใส่เฉพาะตัวเลข หากใส่ 0 หมายถึงไม่มีเส้นขอบ)"></field> <field name="link1bordercolor" type="color" default="#e1ad4a" label="- สีเส้นขอบ LINK 1" description="กำหนดสีสีเส้นขอบ LINK 1 ค่าเริ่มต้นคือ #e1ad4a"></field> <field name="link1radius" type="text" default="30" label="- ขนาดมุมโค้งปุ่ม LINK 1" description="กำหนดขนาดมุมโค้งปุ่ม LINK 1 (ใส่เฉพาะตัวเลข หากใส่ 0 หมายถึงไม่มีมุมโค้ง) ค่าเริ่มต้นคือ 30 "></field> <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>3.ส่วน LINK 2 : กำหนดรายละเอียดข้อความและลิงค์ของ Link 2 ในการแสดงวันสำคัญ </b>" /> <field name="link2" type="editor" default="" label="- ข้อความและลิงค์ ของ Link 2 " description="กำหนดข้อความและลิงค์ ของ Link 2 ที่แสดงหน้าวันสำคัญ" filter="safehtml"></field> <field name="link2color" type="color" default="#ffffff" label="- สีตัวอักษรปุ่ม LINK 2" description="กำหนดสีของตัวอักษร LINK 2 ค่าเริ่มต้นคือ #ffffff "></field> <field name="link2colorlink" type="color" default="#e1ad4a" label="- สีของลิงค์ LINK 2" description="กำหนดสีลิงค์ LINK 2 เริ่มต้น ค่าเริ่มต้นคือ #e1ad4a "> </field> <field name="link2bg" type="color" default="#866127" label="- สีพื้นหลังปุ่มลิงค์ LINK 2" description="กำหนดสีพื้นหลังของปุ่ม LINK 2 ค่าเริ่มต้นคือ #866127"></field> <field name="link2hovercolor" type="color" default="#ffffff" label="- สีของลิงค์ Hover LINK 2" description="กำหนดสีลิงค์ Hover LINK 2 เริ่มต้น ค่าเริ่มต้นคือ #ffffff "> </field> <field name="link2hoverbg" type="color" default="#583e16" label="- สีพื้นหลังปุ่มลิงค์ Hover LINK 2" description="กำหนดสีพื้นหลังของปุ่ม Hover LINK 2 อ่านต่อ ค่าเริ่มต้นคือ #583e16"></field> <field name="link2padding" type="text" default="15px 25px" label="- ระยะห่างปุ่ม LINK 2" description="กำหนดขนาดระยะห่างปุ่ม LINK 2(เป็น px หรือ %) ค่าเริ่มต้นคือ 15px 25px (บน-ล่าง ซ้าย-ขวา) หรือ (บน ขวา ล่าง ซ้าย) 15px 25px 15px 25px"></field> <field name="link2border" type="text" default="5" label="- ขนาดเส้นขอบ LINK 2" description="กำหนดขนาดเส้นขอบปุ่ม LINK 2 (ใส่เฉพาะตัวเลข หากใส่ 0 หมายถึงไม่มีเส้นขอบ)"></field> <field name="link2bordercolor" type="color" default="#e1ad4a" label="- สีเส้นขอบ LINK 2" description="กำหนดสีสีเส้นขอบ LINK 2 ค่าเริ่มต้นคือ #e1ad4a"></field> <field name="link2radius" type="text" default="30" label="- ขนาดมุมโค้งปุ่ม LINK 2" description="กำหนดขนาดมุมโค้งปุ่ม LINK 2 (ใส่เฉพาะตัวเลข หากใส่ 0 หมายถึงไม่มีมุมโค้ง) ค่าเริ่มต้นคือ 30 "></field> </fieldset> <fieldset name="sub5" label="ปรับ CSS แบบกำหนดเอง" description="ปรับ CSS แบบกำหนดเอง เป็นการกำหนดเฉพาะจุด โดยอ้างอิง Div ID หรือ Class เพื่อกำหนดรายละเอียดของแต่ละส่วน อาทิเช่น #top{ background:#000;} เป็นการกำหนดส่วน #top ให้มีพื้นหลังสีดำ ซึ่งการกำหนดตรงนี้ จะมีผลก่อนการกำหนดที่ Options ของเทมเพลต </b> ดูคำแนะนำได้จาก </b>>> <a href='https://hitztheme.com/docs/developments/basic-css' target='_blank'><b style='color:red;text-decoration: underline'>ดูที่นี่!</b></a>"> <field name="customcss" type="textarea" rows="20" label="CSS แบบกำหนดเอง" description="กำหนดรูปแบบเฉพาะจุดในเทมเพลต โดยมี ID หลักภายในคือ #image , #intro , #link1 , #link2 , #footer โปรดดูคู่มือในเว็บไซต์ Hitztheme ก่อนการใช้งานในส่วนนี้" filter="raw" /> </fieldset> <fieldset name="sub6" label="ปรับ Responsive แบบกำหนดเอง" description="ปรับ Responsive แบบกำหนดเอง เป็นการกำหนดเฉพาะจุดและขนาดของการแสดงผล โดยอ้างอิง @media screen and (max-width: ขนาดpx) รวมถึง Div ID หรือ Class เพื่อกำหนดรายละเอียดของแต่ละส่วน อาทิเช่น @media screen and (max-width: 480px) {#top{ background:#000;}} เป็นการกำหนดส่วน #top ให้มีพื้นหลังสีดำ ที่ขนาดความกว้างไม่เกิน 480px ซึ่งการกำหนดตรงนี้ จะมีผลก่อนการกำหนดที่ Options ของเทมเพลต </b> ดูคำแนะนำได้จากข้อที่ 2. </b>>> <a href='https://hitztheme.com/docs/developments/basic-css-style' target='_blank'><b style='color:red;text-decoration: underline'>ดูที่นี่!</b></a>" > <field name="customresponsive" type="textarea" rows="30" default="" label="CSS Responsive แบบกำหนดเอง" description="กำหนดรูปแบบเฉพาะจุดในเทมเพลต โปรดดูคู่มือในเว็บไซต์ Hitztheme ก่อนการใช้งานในส่วนนี้" filter="raw" /> </fieldset> <fieldset name="sub7" label="เพิ่ม CODE ส่วน Head และ Body" > <field name="headcode" type="textarea" rows="15" default="" label="CODE ในส่วน Head " description="เพิ่ม Code หรือชุดคำส่งจากที่อื่น ที่กำหนดให้วางในส่วน Head ของ index.php ในทุกหน้าเว็บไซต์ โปรดดูคู่มือในเว็บไซต์ Hitztheme ก่อนการใช้งานในส่วนนี้" filter="raw" /> <field name="bodycode" type="textarea" rows="15" default="" label="CODE ในส่วน body " description="เพิ่ม Code หรือชุดคำส่งจากที่อื่น ที่กำหนดให้วางในส่วน body ของ index.php ในทุกหน้าเว็บไซต์ โปรดดูคู่มือในเว็บไซต์ Hitztheme ก่อนการใช้งานในส่วนนี้" filter="raw" /> </fieldset> <fieldset name="sub9" label="Serial Code" > <field type="spacer" label="<p style='position:absolute; width:100% !important;background:#2e486b; padding:5px 10px; color:#fff; font-size:16px; '>ใส่ Serial Code เพื่อเปิดใช้งาน Template (Serial Code ลูกค้าจะได้รับจากการสั่งซื้อ ทางอีเมล์หรือข้อความติดต่อจากทาง Hitztheme) โปรดเก็บรักษา Serial Code ไว้ให้ดี! </b>" /> <field name="template" type="text" default="" label="- Serial Code " description=" "></field> <field type="spacer" label="<p style='position:absolute; width:100% !important; background:#fbb8b8; padding:5px 10px; color:#111; font-size:12px; '> **หากลืม Serial Code โปรดติดต่อกับทางเรา โทร. 084-010-6393 หรือตามช่องทางที่ลูกค้าทำการสั่งซื้อ พร้อมแจ้งเอกสารการสั่งซื้อ , ชื่อ-นามสกุล ผู้ซื้อ เพื่อทางเราจะได้ตรวจสอบให้ได้โดยง่าย ** </b>" /> </fieldset> </fields> </config> </extension>
