Tại sao sử dụng CSS ghi đè?
Luôn luôn là một ý tưởng tốt để tách các kiểu CSS của bạn khỏi kiểu mẫu hiện có, nếu bạn đang sử dụng mẫu Joomla dựng sẵn.
- Nó dễ bảo trì hơn
- Thay đổi của bạn sẽ không bị mất nếu bạn nâng cấp mẫu
- Bạn có thể dễ dàng sao chép / di chuyển các sửa đổi sang mẫu khác hoặc trang web khác.
CSS ghi đè hoạt động như thế nào?
CSS có nghĩa là "Cascading Style Sheets", "Cascading" trong ngữ cảnh này có nghĩa là bởi vì nhiều quy tắc biểu định kiểu có thể áp dụng cho một đoạn HTML cụ thể, quy tắc được sử dụng được chọn bằng cách xếp tầng từ quy tắc chung hơn cho quy tắc cụ thể được yêu cầu ( quy tắc cụ thể nhất được chọn) hoặc dựa trên thứ tự của quy tắc cho bất kỳ yếu tố nào (quy tắc cuối cùng được tìm thấy được chọn).
Miễn là tệp CSS tùy chỉnh của bạn được tải sau tệp CSS mẫu mặc định, bạn có thể thêm các kiểu của riêng mình để ghi đè các phần tử cụ thể khi cần (có một số trường hợp ngoại lệ, nhiều hơn về điều đó bên dưới).
Sử dụng chung
Để tải một biểu định kiểu tùy chỉnh trong <head>thẻ Joomla , có thể thêm đoạn mã sau vào index.phptệp của mẫu của bạn ( YOURDOMAIN.COM/templates/yourtemplate/index.php), ngay trước </head>thẻ kết thúc để đảm bảo tệp của bạn được tải sau cùng.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(Tệp CSS có thể có bất kỳ tên nào và không phải nằm trong / css / thư mục con, nhưng nó sạch hơn theo cách đó.)
Cũng có thể thêm một <link>thẻ bình thường , nhưng điều này kém linh hoạt hơn so với tùy chọn được đề cập ở trên:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Quan trọng
Một số tiện ích mở rộng có thể tải kiểu CSS của chúng sau của bạn (hoặc thậm chí thêm kiểu trực tiếp trong tệp index.php), do đó ghi đè lên phần ghi đè của bạn. Điều này thường có thể được giải quyết bằng cách thêm !importantvào phong cách của bạn, ví dụ.h1{color:red!important;}
Sử dụng trong các khung khác nhau
Bây giờ là phần thú vị: Nhiều khung mẫu có khả năng người dùng muốn thay đổi mẫu của họ, do đó thêm một cách dễ dàng để bao gồm các phần ghi đè CSS của bạn. Dưới đây là một số phương pháp được sử dụng:
Cổng RocketTheme 4
Các mẫu RocketTheme được cung cấp bởi Khung Gantry và một tệp CSS tùy chỉnh sẽ được tải tự động nếu tìm thấy. Tệp CSS phải được đặt trong /templates/yourtemplate/css/thư mục và tên phải là YOURTEMPLATEFOLDER-custom.css.
Ví dụ: Nếu bạn đang sử dụng Afterburner 2mẫu miễn phí của họ , thư mục mẫu mặc định là /templates/rt_afterburner2/. Thêm một tệp có tên rt_afterburner-custom.css(carefull với dấu gạch dưới và dấu gạch nối) vào / css / thư mục con và nó sẽ được tải tự động bởi khung Gantry.
Hình 5
Các mẫu hình dạng 5 xuất xưởng với một custom.csstệp trống trong / css / thư mục con của mẫu của bạn. Chỉ cần thêm kiểu của bạn vào tệp này và chúng sẽ được bao gồm trong bố cục của bạn.
Chuyên gia
Các mẫu của Gavick Pro xuất xưởng với một overrides.csstệp trống trong thư mục / css / thư mục con. Nhưng lưu ý rằng tệp này không được tải theo mặc định, bạn phải kích hoạt Override CSStrong tab Cài đặt nâng cao trong cài đặt mẫu.
Joomla tỏa sáng
Tạo một tệp CSS tùy chỉnh trong / css / thư mục con của mẫu của bạn, vd custom.cssvà chỉ định tên tệp tại Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Khung T3
Các mẫu dựa trên Khung T3 có thể / có thể không bao gồm custom.csstệp trong / css / thư mục con của mẫu của bạn (chỉ cần tạo nó nếu không có), nhưng khi có mặt, tệp sẽ được tải sau bất kỳ tệp CSS nào khác.
Khung Warp
Các mẫu dựa trên Warp Framework sẽ tự động tải custom.csstệp được tìm thấy trong / css / thư mục con. Các tệp CSS bổ sung có thể được tải bằng cách thêm
$this->warp->stylesheets->add('css:yourcssfile.css');
vào tập tin /layouts/template.config.php.