Posted by wataru.kato on February 24, 2014 at 7:46am
Drupal7でViewsを使ってテーブル（Display=Table）の一覧ページを作成しています。
サイト全体には「0 point」のテーマを適用していますが、
テーブルの見た目が判りづらい（罫線を省略していたり、表の背景をグレーのベタにしていたり）ので、
異なるテーマ（例えば白ベタに黒罫線）をこのビューだけ適用するか、個別のスタイル指定をしたいです。
Viewsの標準機能、もしくは追加モジュールで対処する方法はありませんでしょうか。
最終手段としては「0 point」のテーマファイルを直に修正するしかないかもしれませんが、
テーブル以外への影響を考慮しなくても良い方が管理が楽だと思いまして、
上記方法を探しています。
Comments
Viewsの定義画面で、「高度」のサブ項目に「CSSクラス
Viewsの定義画面で、「高度」のサブ項目に「CSSクラス」があります。
ここに適当なクラス名を設定し、そのクラス名に対応するスタイルを定義すれば実現できます。
スタイルの定義
＞blauerberg 様
リプライ有難う御座います。
Drupalで、「スタイルを定義する」というのは、具体的にはどこかのフォルダに
追加CSSファイルを保存しておいて、ページ表示の際に追加して貰う、
ということでしょうか？その辺が判っておりません。
Google先生で調べると
http://www.forest-and-trees.com/drupal-6-%E3%83%86%E3%83%BC%E3%83%9E%E3%...
という頁くらいしか見つからず。
これの「/sites/your_site.com/themes/your_theme」のあたりに自分用のテーマファイルを作成して入れる、というのが正しいのでしょうか？
Drupalで、「スタイルを定義する」というのは、具体的に
はい、そのイメージです。
cssを追加する方法としては、
(他にもいくつか方法はありますが省略..)
があり、 https://drupal.org/node/171209 に情報がまとまっています。
ただし、どちらの方法でも既存のテーマファイルに多少修正が入ってしまいます。
テーマファイルに修正を入れたくないのであれば、適当なモジュールを作成して
cssだけ読み込むのも出来た(やった事があったはず..)と思います。
ヒントを活かして、解決できました
なんとかスタイル変更できました。
１）スタイル変更したいビューの「CSSスタイル」に
views-table-simple
というIDを定義
２）次にサイトのテーマを修正してCSSを追加する方法を試す
/sites/all/themes/（サイトのテーマ）/*.info
を編集し、
/sites/all/themes/（サイトのテーマ）/css
フォルダ以下に新たに「views.css」を作ってここに記述を入れてみたが、
クラスの指定が今一つ上手に記述できずダメ
３）そこで改めて考え直すと「Viewsモジュール」側にもテーマがあることが判り、
そもそもこちらでスタイル記述を追記する方が判りやすかった
⇒作戦変更
/sites/all/modules/views/views.info
を読むと、
/sites/all/modules/views/css/views.css
を参照していることが分かったので、このファイルの末尾に
以上を追加したところ、CSSクラスを定義した表に罫線が出て、ヘッダ背景に色を付けられた
でした。
結局直接CSSファイルに追記する形を取りました。
views.info に stylesheet の記述を１行増やせば別ファイルでもそれなりにいけそうですが、
どちらの方法でもViewsモジュールのアップデート時に修正内容が戻ってしまうのは避けられそうにないですね。
7 ways to add custom JS and CSS to a page in Drupal
7 ways to add custom JS and CSS to a page in Drupal[1] にも情報がまとまってました。
やっぱり多少コード書かないとできないのかな..
Viewsモジュールのアップデート時に修正内容が戻ってしま
いえ、それは避けるのが基本です。
アップデートのたびに編集し直すのも大変ですよね?
なので Views モジュールのファイルを直接編集すべきではありません。
作戦変更前の方法が正しいです。
それかテーマのCSSで、既にそのページで読み込まれているものがあれば、それに追記しても良いと思います。
Drupal カスタマイズTips 更新中...
CMS自由自在!
http://customfield.jp/
もう１つ落とし穴、ctoolsのCSSキャッシュ
shigehiro 様
アドバイスありがとうございます。
やっと３月末の年度末＋消費税増税対応のヤマを越え始めたので、
この件の対処を再開しました。
そうしましたら脱線で1件、いままでの私のCSSを直接編集、でハマるパターンがもう１つ出てきたので
ちょっとだけ報告しておきます。
私はモジュール関係等無視して該当プロパティを設定しているであろうCSSファイルを強引に
見つけてその近辺やその値そのものを編集していましたが、その際はChromeのF12の開発画面から、
該当箇所のCSSファイルを特定して編集していました。
そうしたら先ほど並行してモジュールのアップデートをしたところ、以前私が編集したCSSファイルが
消えました。
しかし改めて該当ページにアクセスしたところ、動的にCSSが生成されたのを確認しました。
sites/default/files/ctools/css/7d83ce09d6bbb56572572cb6f40619c3.css
をChromeで見つけて編集していたが、このファイルが消えた、という感じです。
これはつまり、Drupalか、ctools（Chaos Tools）の機能で、アクセスするページ（URL）ごとに
最初のアクセスで計算済みのCSSを生成し、２回目以降はこれから利用する、という機構に
なっているのだろうと推測しました。
なので私のブラウザで調べたCSSを直接編集というアプローチでは、結局おおもとのCSSを
編集したことにならない、ということが分かり、より悪いアプローチであることが判りました。
というわけで、次はCSS Injectorを使う方向で検討する予定です。
テーマを自作している場合は良いですが、公開されているテーマ
テーマを自作している場合は良いですが、公開されているテーマを使っている場合は
テーマもセキュリティ更新が入るので、できれば編集したくないですよね。
ということで、ブロックに1行phpコードを書くのが良い気がしてきました。
これだと、モジュールにもテーマにも手を入れる必要はありません。
<?phpdrupal_add_css('http://some.where/custom.css', array('type' => 'external'));
?>
ちょっと要望が汲み取れてなかったらすいません。theme
ちょっと要望が汲み取れてなかったらすいません。
themeのCSSに追記するではだめなんでしょうか？
一つ一つのViewは固有のIDを持っていますし、
PageであればBodyなどにもなんらかの印が入るはずです。
それを元にCSSを当てればいいような気がします。
指定を細かくしていけば他の要素に影響することもないですよ。
もし、Themeを変えた時にも追従させたいなどの希望があるときは
モジュールに書くのもよいでしょうし、
CSS Injectorのようなモジュールで指定するのも手だと思います。
CSS Injector | Drupal.org
CSS Injector を使いました
qchan様
アドバイス有難う御座います。
教わりました CSS Injector を使いました。
結果、テーマ側のCSSを元に戻したうえで CSS Injector で作成した１つのCSSファイルに追加スタイルを集約し、適用させることができました。
非常に便利な機能でした。
これで行こうと思います。
情報が役に立って良かったです。 しかし改めて該当ページにア
情報が役に立って良かったです。
の部分は、CSSのキャッシュを有効にしているからなので、
ホーム > 管理 > 環境設定 > 開発 > パフォーマンス
/admin/config/development/performance
で「CSSファイルをまとめて圧縮する。」にチェックが入っているのだと思います。
これを外せばどのモジュールやコアが書いたCSSかがわかります。
ただ、元のファイルがわかったとしてもそれを直接触るのはNGです。
Drupalコアをハックすることと同じになります。
サードパーティ製のThemeの場合はそれをBase Themeとして
Sub themeを作り、そのtheme内のCSSから上書きするのが
一番管理しやすい方法だとは思いますので、試してみてください。
チェック入っていませんでした
取り急ぎ。
ここですが、チェックは入っていませんでした。
フォルダも ctools のフォルダなので、Chaos Tools の機能だと思っています。
ですが反対に、これを使っての速度向上も今後試したいと思います。
また Sub Theme はまだ試していませんでした。
これも試してみます。