단일 페이지 / 노드에 CSS를 추가 할 수있는 방법이 있습니까?

나는 큰 미친 스타일 시트를 정리하고 있는데 (나중에 궁금 할 수도 있음) 특정 노드 또는 페이지에 사용자 정의 CSS를 추가하는 가장 좋은 방법이 궁금합니다.

특히, 내 작업 사이트의 홈 페이지는 패널 페이지이며 다양한 스타일이 있습니다. 현재 CSS는 기본 테마 스타일 시트에 포함되어 있습니다.

"이 노드가 Foo이면 foo.css를 추가하십시오"라고 말하는 방법이 있습니까? 가 CSS 인젝터는 내가 무엇을 찾고?

나는 이것을 다른 노드 / 섹션 / etc에 일반화하는 데 관심이 있을 수 있지만 현재이 항목을 처리하고 싶습니다.

내가 한 일.

Zen 하위 테마를 사용하고 있으며 실제로 template.php를 통해 조건부 스타일 시트를 포함하는 코드가 주석 처리되어 있음을 발견했습니다. 아래 코드는 내가 필요한 것을 정확하게 수행했습니다.

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

(주식 Zen template.php 파일의 80 행, FWIW)

이것은 코드로 수행하는 일종의 일이지만, 그것이 내가 굴리는 방식이기 때문입니다.

template.php에서 당신은 다음과 같은 것을 원할 것입니다 :

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

foo를 자신의 코드와 관련된 값으로 바꾸십시오.

Code per Node 모듈을 살펴볼 수 있습니다 . 이 블로그 게시물에도 나와 있습니다.

크리에이트 컨텍스트 를 사용하는 다음 페이지 / 섹션과 상황에 맞는 자산 이 주어진 상황에 대한 CSS 및 / 또는 자바 스크립트를로드 모듈을.

문맥:

컨텍스트를 사용하면 사이트의 다른 부분에 대한 컨텍스트 조건 및 반응을 관리 할 수 ​​있습니다. 각 컨텍스트는 사이트의 "섹션"을 나타내는 것으로 생각할 수 있습니다. 각 컨텍스트에 대해이 컨텍스트를 활성화하는 조건을 선택하고이 활성 컨텍스트에 반응해야하는 Drupal의 다른 측면을 선택할 수 있습니다.

어떤 컨텍스트가 활성화되어 있는지 확인하기 위해 페이지로드 중에 점검되는 규칙 세트로 조건을 생각하십시오. 그런 다음 활성 컨텍스트와 관련된 모든 반응이 시작됩니다.

컨텍스트 자산 추가 :

컨텍스트 추가 자산을 사용하면이 작업을 수행 할 수 있습니다. UI를 사용하여 코드를 작성하지 않고도이 모든 작업을 수행 할 수 있습니다. ctools를 사용하기 때문에이 모든 것도 내보낼 수 있습니다.

CSS가 적은 경우 노드를 기반으로 CSS 선택기를 만들고 테마의 CSS에 CSS를 포함시키는 것을 고려해보십시오. Drupal 7은 body.page-node-NODEID 선택기를 제공하고 Zen for Drupal 6은 유사한 본문 CSS 클래스를 제공합니다.

사용자 정의 모듈을 작성하고 hook_preprocess_node ()를 사용하여 노드 ID를 기반으로 선택적으로 스타일 시트를로드 할 수 있습니다.

예를 들면 다음과 같습니다.

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

MYMODULE을 모듈 이름으로 바꾸고 MYTHEME을 css 파일이 포함 된 테마 이름으로 바꾸십시오.

CSS 스타일을 추가하는 기준이 노드의 일부 속성에 따라 달라지면 구현합니다 MYTHEME_preprocess_node(&$variables). 함수에 전달 된 값 중 하나는입니다 $variables['node'](이 아닌 것을 알 수 있습니다 $variables['#node']).

MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

기준이 노드 속성에 의존하지 않으면 구현합니다 MYTHEME_preprocess_page(&$variables). $variables['node']표시되는 페이지가 노드 페이지 인 경우 노드 오브젝트를 포함합니다. Drupal 6에서는 프로세스 함수도를 얻지 $variables['is_front']만 Drupal 7에서는 동일한 변수가 전달되지 않습니다. 페이지가 첫 페이지인지 알아야하는 경우을 사용해야 drupal_is_front_page()합니다.

MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

관리자 기반의 방법으로 CSS 모듈을 살펴볼 것 입니다. CSS 를 node/add및 node/edit페이지에 추가 할 수있는 필드를 추가 합니다.

CSS :

CSS 모듈은 충분한 권한과 활성화 된 노드가있는 사용자를 위해 노드 작성 페이지에 CSS 필드를 추가합니다.

사용자는 CSS 노드 필드에 CSS 규칙을 삽입 할 수 있으며 이러한 규칙은 노드보기에서 구문 분석됩니다.

이런 식으로 CSS 숙련 된 사용자는 노드 내용에 대한 복잡한 CSS 기반 디자인을 만들 수 있습니다.

중요 : CSS 편집 권한은 신뢰할 수있는 사용자 (관리자)에게만 제공되어야합니다. 이 권한이있는 악의적 인 사용자는 사이트 디자인을 손상시키고 보안 문제 (XSS)를 유발할 수 있습니다.

CodePerNode 는 훌륭하지만 CSS Injector 는 설치가 더 간단합니다 (라이브러리 필요 없음). 이 모듈을 사용하면 컨텐츠 관리자가 PHP 코드 나 INFO 파일을 전혀 건드리지 않고 특정 페이지에 CSS를 동적으로 추가 할 수 있습니다. 15777 설치는 잘못 될 수 없습니다. 이것은이 모듈이 작동한다는 사회적 증거입니다. CSS는 일반 캐싱 시스템과 함께 캐시됩니다.

이미 패널을 사용하고 있으므로 홈페이지 패널의 각 영역에 대해 CSS를 패널 스타일로 추가하는 것이 더 쉬울 수 있습니다. 여기에서 사용자 정의 마크 업을 정의하고 사이트 전체에서 재사용 할 수 있습니다.

홈페이지에 대한 페이지 관리자 변형 규칙의 일반 섹션으로 이동할 수도 있습니다. 현재 패널에만 CSS ID 및 규칙을 추가하기위한 섹션이 있습니다.

참고 : 이것은 모두 D7에 있으므로이 방법이 이전 버전보다 패널에서 더 잘 지원 될 수 있습니다.

/ * 컨텐츠 유형에 따라 CSS를 추가하기 위해 bartik 테마를 사용한 예제 * /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}

이것을 'template.php'파일에 추가하십시오 :

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

'mytheme'을 테마 디렉토리 이름으로 바꾸고 '/css/front.css'를 CSS 파일이있는 경로로 바꾸십시오.

다른 페이지에서 'front.css'파일을 설정 해제하려면 'template.php'에 추가하십시오.

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

다시 'mytheme'을 테마 디렉토리 이름으로 바꾸십시오.

프론트 페이지에서 'styles.css'를 설정 해제해야하는 경우이 두 코드를 결합하십시오.

앞 페이지에 'styles.css'가없는 'front.css'가 필요하고 다른 모든 페이지에 'front.css'가없는 'style.css'가 필요하다고 가정합니다. 코드는 다음과 같습니다.

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

또한 'mytheme'을 교체하십시오.

도움이 되길 바랍니다.

template.php를 완전히 터치하지 않고 테마의 .info 파일에 다른 항목을 추가했습니다.

스타일 시트가에 있다고 가정하십시오 css/foo.css.

이것은 theme_name.info 파일의 모양입니다 :

name = Theme Name
...
stylesheets[all][] = css/foo.css

그런 다음 기본 스타일 시트와 함께 캐시하면 이점이 있으며, 이것이 홈페이지 용이라고 가정하기 때문에 의미가 있습니다.

Drupal 접근 방식 외에도 HTML5 본문 내에 짧은 CSS 조각 만 필요한 경우 CSS 범위 속성이 있습니다. https://stackoverflow.com/a/4607092/195812를 참조 하십시오.

이 솔루션을 사용하면 코드를 편집하고 더 많은 모듈을 설치하지 않아도됩니다.

본문 태그에서 페이지 노드를 인쇄 할 수 있습니다

<body page-node-26419 ...>

그럼 당신은 제한 할 수 있습니다

body.page-node-26419 {
    background: red
}

사소한 빠른 변경에 유용합니다