Wie füge ich meiner Funktion CSS richtig hinzu?


7

Ich habe eine Funktion, die nur einige Ansichten enthält. Wie füge ich ein Stylesheet richtig hinzu?

Antworten:


13
  1. Sie fügen die CSS-Datei dem Modul hinzu.
  2. Verwenden Sie drupal_add_cssdiese Option, um die CSS-Datei in die Datei aufzunehmen .module. Dies könnte in folgender Form erfolgen hook_initund würde ungefähr so ​​aussehen:

    module_name_init() {
      if (arg(0) == 'views_path') {
        drupal_add_css(drupal_get_path('module', 'module_name') . '/path_to.css');
      }
    }

Das war auch mein erster Gedanke, aber das hat den Nachteil, dass Sie diesen Code jedes Mal hinzufügen müssen, wenn die Angst exportiert wird.
BetaRide

5
Das ist nicht wahr. Features bewahren Ihre benutzerdefinierten Dateien und Ihren Code beim Exportieren. Heutzutage schreibe ich lieber relevanten benutzerdefinierten Code in Funktionsmodule und aktualisiere .installmanchmal sogar Hooks in Dateien.
Zauberlösungen

Ich bekam einen leeren Bildschirm mit dem obigen Code. Dies funktionierte jedoch. Stimmt etwas mit diesem Weg nicht?:module_name_init() { drupal_add_css(drupal_get_path('module', 'module_name') . '/path_to.css'); }
Nigel

@nigel Was ich gepostet habe, war Beispielcode. Sie müssen ihn bearbeiten, damit er funktioniert. Wenn Sie einen leeren Bildschirm erhalten, überprüfen Sie das Protokoll Ihres Webservers, um festzustellen, wo das Problem liegt.
googletorp

Ich habe hook_views_pre_render () für mein letztes Projekt verwendet. Ein Beispiel-Code-Snippet finden Sie hier gist.github.com/1675931
Sivaji

3

Wenn Sie nur einige Informationen zum CSS-Stil hinzufügen möchten, fügen Sie diese Ihrem Thema hinzu. Erstellen Sie eine neue CSS-Datei, speichern Sie sie im Themenordner und fügen Sie sie der Info-Datei des Themas hinzu.

Wenn Sie auch den generierten HTML-Code optimieren müssen, installieren Sie das Theme-Entwicklermodul. Wenn diese Option aktiviert ist, können Sie auf einen beliebigen Teil der Drupal-Site verweisen und erfahren, welche Funktionen das Theming ausführen und wie Sie Ihre eigenen benennen, wenn Sie sie überschreiben möchten.

Vergessen Sie nicht, Ihr Geld zu aktualisieren, um Ihre Änderungen sichtbar zu machen.


Dies ist normalerweise eine gute Idee für CSS-Dateien, funktioniert jedoch nicht, wenn Sie die Portabilität von Modulen verwenden möchten (dasselbe Modul kann auf vielen Websites verwendet werden).
googletorp

2

Ich habe hook_views_pre_render()in meinem letzten Projekt verwendet. Ein Beispielcode-Snippet finden Sie hier https://gist.github.com/1675931

/**
 * Implements hook_views_pre_render().
 */
function example_views_pre_render(&$view) {
  $deals_view = array('deals', 'previous_deals');
  if (in_array($view->name, $deals_view)) {
    drupal_add_js(drupal_get_path('module', 'td_deals') . '/td_deals.js');
    $contextual_module_path = drupal_get_path('module', 'contextual');
    drupal_add_js($contextual_module_path . '/contextual.js');
    drupal_add_css($contextual_module_path . '/contextual.css');
  }
}

1

Wie bereits erwähnt, ist die Portabilität ein Problem beim Hinzufügen zum CSS-Ordner Ihres Themas. Ich würde vorschlagen, die CSS-Datei in einem neu erstellten Ordner (CSS) im Stammverzeichnis Ihres exportierten Features zu platzieren und sie dann wie folgt in der Info-Datei Ihres Features zu referenzieren:

stylesheets[all][] = css/styles.css

Ihr Stylesheet wird jetzt aufgenommen, wenn das Modul aktiviert ist. Was schön ist, wenn Sie Ihre Funktion neu generieren, bleibt dieser Zusatz erhalten.


Dies funktioniert nur, bis Sie das Feature aktualisieren, da die Feature-Erstellung benutzerdefinierte Änderungen überschreibt, die in der Info-Datei vorgenommen wurden.
Bobík

Sie irren sich, @ Bobík. Ich habe das betreffende Problem beim Neuerstellen einer Funktion nicht erlebt. Alle Änderungen an der .info- und der .module-Datei bleiben erhalten. Siehe Feature-Dokumente
Knice

Der einzige Nachteil, den ich sehen konnte, ist, dass das CSS auf jeder Seite enthalten sein wird. Wenn Sie damit einverstanden sind, ist die Lösung in Ordnung.
Donquijote
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.