เหตุใดจึงต้องใช้การแทนที่ CSS
เป็นความคิดที่ดีที่จะแยกสไตล์ CSS ของคุณออกจากสไตล์เทมเพลตที่มีอยู่หากคุณใช้เทมเพลต Joomla ที่สร้างไว้ล่วงหน้า
- ง่ายต่อการบำรุงรักษา
- การเปลี่ยนแปลงของคุณจะไม่สูญหายไปหากคุณอัปเกรดแม่แบบ
- คุณสามารถคัดลอก / ย้ายการแก้ไขไปยังเทมเพลตอื่นหรือไซต์อื่นได้อย่างง่ายดาย
การแทนที่ CSS ทำงานอย่างไร
CSS หมายถึง "Cascading Style Sheets", "Cascading" ในบริบทนี้มีความหมายว่าเนื่องจากกฎสไตล์ชีทมากกว่าหนึ่งรายการสามารถใช้กับส่วนใดส่วนหนึ่งของ HTML ได้กฎที่ใช้จะถูกเลือกโดยการเรียงลำดับจากกฎทั่วไปเพิ่มเติมไปยังกฎเฉพาะที่ต้องการ เลือกกฎเฉพาะส่วนใหญ่) หรือตามลำดับของกฎสำหรับองค์ประกอบใด ๆ (เลือกกฎล่าสุดที่พบ)
ตราบใดที่ไฟล์ CSS ที่กำหนดเองของคุณถูกโหลดหลังจากไฟล์ CSS เทมเพลตเริ่มต้นคุณสามารถเพิ่มสไตล์ของคุณเองเพื่อแทนที่องค์ประกอบเฉพาะตามต้องการ (มีข้อยกเว้นบางประการเพิ่มเติมด้านล่าง)
การใช้งานทั่วไป
ในการโหลดสไตล์ชีตแบบกำหนดเองใน<head>แท็กJoomla คุณสามารถเพิ่มโค้ดต่อไปนี้ลงในindex.phpไฟล์เทมเพลตของคุณ ( YOURDOMAIN.COM/templates/yourtemplate/index.php) ด้านขวาก่อน</head>แท็กสิ้นสุดเพื่อให้แน่ใจว่าไฟล์ของคุณจะถูกโหลดล่าสุด
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(ไฟล์ CSS สามารถมีชื่อใด ๆ และไม่จำเป็นต้องอยู่ใน / css / โฟลเดอร์ย่อย แต่วิธีนี้จะสะอาดกว่า)
เป็นไปได้ที่จะเพิ่ม<link>แท็กปกติแต่ตัวเลือกนี้มีความยืดหยุ่นน้อยกว่าตัวเลือกที่กล่าวถึงข้างต้น:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!สิ่งสำคัญ
ส่วนขยายบางอย่างอาจโหลดสไตล์ CSS ของคุณหลังจากคุณ (หรือเพิ่มสไตล์โดยตรงในไฟล์ index.php) ดังนั้นจึงแทนที่การแทนที่ของคุณ โดยปกติสามารถแก้ไขได้ด้วยการเพิ่ม!importantสไตล์ของคุณเช่นh1{color:red!important;}
การใช้งานในกรอบที่แตกต่างกัน
ตอนนี้ความสนุก: กรอบแม่แบบหลายอย่างมีความเป็นไปได้ที่ผู้ใช้จะต้องการเปลี่ยนแปลงแม่แบบของพวกเขาดังนั้นจึงเป็นการเพิ่มวิธีที่ง่ายในการรวมการแทนที่ CSS ของคุณ นี่คือวิธีการบางส่วนที่ใช้:
RocketTheme Gantry 4
RocketTheme เทมเพลตขับเคลื่อนโดย Gantry Framework และไฟล์ CSS ที่กำหนดเองจะถูกโหลดโดยอัตโนมัติหากพบ ไฟล์ CSS ต้องถูกวางไว้ใน/templates/yourtemplate/css/โฟลเดอร์และชื่อจะต้องYOURTEMPLATEFOLDER-custom.cssเป็น
ตัวอย่าง:หากคุณกำลังใช้ฟรีของพวกเขาแม่ไดเรกทอรีแม่แบบเริ่มต้นคือAfterburner 2 /templates/rt_afterburner2/เพิ่มไฟล์ที่เรียกว่าrt_afterburner-custom.css(carefull with underscore and hyphen) ไปที่ / css / โฟลเดอร์ย่อยและมันจะถูกโหลดโดยอัตโนมัติโดย Gantry framework
รูปที่ 5
แม่แบบ Shape 5 มาพร้อมกับcustom.cssไฟล์เปล่าใน / css / ไดเรกทอรีย่อยของแม่แบบของคุณ เพียงเพิ่มสไตล์ของคุณลงในไฟล์นี้และจะรวมอยู่ในเลย์เอาต์ของคุณ
Gavick Pro
แม่แบบ Gavick Pro มาพร้อมกับoverrides.cssไฟล์เปล่าใน / css / ไดเรกทอรีย่อย แต่โปรดทราบว่าไฟล์นี้ไม่ได้โหลดตามค่าเริ่มต้นคุณต้องเปิดใช้งานOverride CSSในแท็บการตั้งค่าขั้นสูงในการตั้งค่าแม่แบบ
Joomla Shine
สร้างไฟล์ CSS ที่กำหนดเองใน css / / โฟลเดอร์ย่อยของเช่นแม่แบบของคุณและระบุชื่อไฟล์ที่custom.cssExtensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)
กรอบงาน T3
เทมเพลตที่อ้างอิงกับ T3 Framework อาจ / อาจไม่รวมcustom.cssไฟล์ใน / css / โฟลเดอร์ย่อยของเทมเพลตของคุณ (เพียงสร้างถ้ามันไม่มี) แต่เมื่อมีไฟล์จะถูกโหลดหลังจากไฟล์ CSS อื่น ๆ
Warp Framework
เทมเพลตที่ยึดตาม Warp Framework จะโหลดcustom.cssไฟล์ที่พบใน / css / โฟลเดอร์ย่อยโดยอัตโนมัติ ไฟล์ CSS เพิ่มเติมสามารถโหลดได้โดยการเพิ่ม
$this->warp->stylesheets->add('css:yourcssfile.css');
/layouts/template.config.phpไปยังแฟ้ม