การเพิ่มสไตล์ CSS ที่กำหนดเองในบางหน้าของฉัน

16

ฉันต้องการเพิ่มสไตล์ CSS ที่กำหนดเองให้กับบางหน้าของฉันเพื่อให้สไตล์ที่เป็นเอกลักษณ์และแทนที่สไตล์ของเทมเพลตเริ่มต้น

ฉันจะทำให้สำเร็จใน Joomla ได้อย่างไร?

15

มีหลายวิธีในการเพิ่มโค้ด CSS ที่กำหนดเองไปยังหน้าเฉพาะ นี่เป็นทางเลือกสองทาง:

Alt 1 - คลาส
เพจใช้คลาสเพจ ในเครื่องมือแก้ไขรายการเมนูภายใต้แท็บ "การแสดงเพจ" จะมีฟิลด์ชื่อ "คลาสเพจ" สิ่งนี้จะเพิ่มคลาสใน<body>แท็กของคุณ(หรือ<div class="YOURCLASS">...</div>เนื้อหาของคุณ) ขึ้นอยู่กับวิธีการกำหนดค่าแม่แบบของคุณ

ป้อนคำอธิบายรูปภาพที่นี่

จากนั้นสร้างกฎใหม่ในไฟล์ CSS ของเทมเพลตโดยใช้คลาสที่คุณระบุ

เช่นเพิ่มmycustomclassในฟิลด์ "คลาสเพจ" ในรายการเมนูของคุณและใส่ลงในไฟล์ CSS ของคุณ:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Alt 2 - โมดูล CSS ที่กำหนดเองมีโมดูล
หลายโมดูลสำหรับวัตถุประสงค์นี้ ตัวอย่างหนึ่งคือCustom CSSซึ่งเป็นโมดูลที่ให้คุณเพิ่มโค้ด CSS และเผยแพร่ไปยังหน้าที่คุณต้องการจัดสไตล์

ตัวเลือกที่คล้ายกันคือCustom HTML Advancedซึ่งเป็นโมดูลที่ให้คุณเพิ่ม HTML, JavaScript และ CSSในหน้าของคุณ สามารถเพิ่มรหัสลงใน<head>แท็กได้โดยอัตโนมัติ

Alt 3. - โหลด CSS สไตล์ชีทเพิ่มเติม
อีกทางเลือกหนึ่งคือการตรวจสอบ ID ไอเท็มเมนูปัจจุบันในindex.phpไฟล์ของเทมเพลตของคุณและโหลดสไตล์ชีท CSS อื่นหากจำเป็น:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>

— johanpw
แหล่งที่มา

ฉันใช้ตัวเลือกแรก (กับคลาสเพจ) แต่คุณทราบวิธีใช้สไตล์เหล่านี้ในตัวแก้ไขหรือไม่ ตัวอย่างเช่นหัวเรื่องไม่มีแบบอักษรเดียวกันทั้งนี้ขึ้นอยู่กับหมวดหมู่ที่เป็นของตัวเองฉันจะใช้แบบอักษรในตัวแก้ไขได้อย่างไรโดยขึ้นอยู่กับหน้าที่แสดงอยู่

— web-tiki

9

หนึ่งในวิธีการโปรดของฉันคือการสร้างคลาสแบบไดนามิกสำหรับองค์ประกอบร่างกาย

ดังนั้น:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

ตัวอย่างของสิ่งที่โค้ดข้างต้นจะสร้างคือ:

หน้าแรก:

<body class="home pageid-13">

หน้าเกี่ยวกับเรา:

<body class="about-us pageid-15">

ตอนนี้คุณสามารถสร้างสไตล์เฉพาะที่กำหนดเองต่อหน้าโดยใช้คลาสด้านบน

— FFrewin
แหล่งที่มา

ฉันชอบโซลูชันนี้มันมีประโยชน์มากและใช้งานง่าย +1

— johanpw

4

นี่เป็นอีกวิธีหนึ่งในการทำสิ่งเดียวกัน

ไปเหนือ doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

ไปในดัชนีของคุณซึ่งระดับร่างกายของคุณคือ:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

ตอนนี้ทุกสิ่งที่คุณเพิ่มลงในคลาสเพจของรายการเมนูจะปรากฏในรหัสร่างกาย รายการเมนูใด ๆ ที่ไม่มีคลาสจะเป็น body id = "default" โดยอัตโนมัติ

— Faye
แหล่งที่มา

1

นอกจากนี้คุณสามารถลองใช้ส่วนขยายนี้เพื่อกำหนดสไตล์ชีทต่าง ๆ ให้กับรายการเมนูของคุณ: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

ความนับถือ.

— AlejandroVega
แหล่งที่มา