왜 CSS 재정의를 사용합니까?
사전 제작 된 Joomla 템플릿을 사용하는 경우 CSS 스타일을 기존 템플릿 스타일과 별도로 유지하는 것이 좋습니다.
- 유지하기가 더 쉽습니다.
- 템플릿을 업그레이드해도 변경 사항이 손실되지 않습니다
- 수정 사항을 다른 템플릿이나 다른 사이트로 쉽게 복사 / 이동할 수 있습니다.
CSS 재정의는 어떻게 작동합니까?
CSS는이 문맥에서 "Cascading Style Sheets", "Cascading"을 의미합니다. 이는 하나 이상의 스타일 시트 규칙이 특정 HTML에 적용될 수 있기 때문에보다 일반적인 규칙에서 필요한 특정 규칙 ( 가장 구체적인 규칙이 선택됨) 또는 요소의 규칙 순서에 따라 (발견 된 마지막 규칙이 선택됨).
사용자 정의 CSS 파일이 기본 템플릿 CSS 파일 다음에 로드 되는 경우 필요에 따라 특정 요소를 재정의하기 위해 고유 한 스타일을 추가 할 수 있습니다 (아래에서 예외가 더 있습니다).
일반적인 사용법
Joomla <head>태그 에 사용자 정의 스타일 시트를로드 하기 위해 파일이 마지막으로로드되도록하기 위해 종료 태그 바로 전에 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 재정의를 포함하는 쉬운 방법을 추가합니다. 사용 된 방법 중 일부는 다음과 같습니다.
로켓 테마 갠트리 4
RocketTheme 템플릿은 Gantry Framework에서 제공하며, 사용자 정의 된 CSS 파일은 자동으로로드됩니다. CSS 파일은 /templates/yourtemplate/css/폴더에 있어야 하며 이름 은이어야 합니다 YOURTEMPLATEFOLDER-custom.css.
예 : 무료 Afterburner 2템플릿을 사용하는 경우 기본 템플릿 디렉토리는 /templates/rt_afterburner2/입니다. rt_afterburner-custom.css/ css / 하위 폴더에 (밑줄과 하이픈으로 가득 찬) 파일을 추가 하면 Gantry 프레임 워크에 의해 자동으로로드됩니다.
모양 5
Shape 5 템플릿은 템플릿 custom.css의 / css / 하위 디렉토리에 빈 파일 과 함께 제공 됩니다. 이 파일에 스타일을 추가하면 레이아웃에 포함됩니다.
개빅 프로
Gavick Pro 템플릿 overrides.css은 / css / 하위 디렉토리에 빈 파일 과 함께 제공 됩니다. 그러나이 파일은 기본적으로로드되지 않으므로 Override CSS템플릿 설정의 고급 설정 탭에서 활성화해야합니다 .
줌라 샤인
템플릿의 / css / 하위 폴더에 사용자 정의 CSS 파일을 만듭니다 (예 : custom.css에서 파일 이름 지정) Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
T3 프레임 워크
T3 프레임 워크를 기반으로하는 템플릿은 템플릿 custom.css의 / css / 하위 폴더에 파일을 포함하거나 포함하지 않을 수 있지만 (없는 경우 간단히 생성) 파일이 있으면 다른 CSS 파일 다음에 파일이로드됩니다.
워프 프레임 워크
Warp Framework 기반 템플릿 custom.css은 / css / 하위 폴더에있는 파일을 자동으로로드합니다 . 추가하여 추가 CSS 파일을로드 할 수 있습니다
$this->warp->stylesheets->add('css:yourcssfile.css');
파일에 /layouts/template.config.php.