jQuery UI-Theming

8

Ich möchte in meinem Modul ein benutzerdefiniertes jQuery-UI- Design aus dem Themeroller verwenden . Was ist der beste Weg, um es zu tun?

7 javascript ya.teck
quelle
Ich konnte kein jQuery UI- Tag erstellen .
ya.teck
es kann nicht durch Leerzeichen getrennt werden oder es versteht, dass es sich um 2 verschiedene Tags handelt :)
Alex Weber
Dies ist die erste Frage, die mit jQuery Ui getaggt ist . Ich habe keine Erlaubnis, ein neues Tag zu erstellen :)
ya.teck
Für welche Drupal-Version interessieren Sie sich?
Kiamlaluno
Ich benutze Drupal 7.
ya.teck

Antworten:

6

Angenommen, Sie verwenden das Modul jquery_ui , müssen Sie lediglich Folgendes tun:

  • Erstellen Sie einen benutzerdefinierten Download für die jQuery-Benutzeroberfläche mit Ihrem benutzerdefinierten Design von ThemeRoller und kopieren Sie es in den Ordner jquery_ui. Befolgen Sie dabei die Anweisungen in README.txt des Moduls
  • Alternativ können Sie einfach Ihr benutzerdefiniertes Thema erstellen, es herunterladen und in das Themenverzeichnis der jQuery-Benutzeroberfläche kopieren

BEARBEITEN:

Da Drupal 7 jedoch bereits mit der neuesten jQuery-Benutzeroberfläche geliefert wird, müssen Sie lediglich Ihr benutzerdefiniertes jQuery-Benutzeroberflächenthema herunterladen und es mit einer der folgenden Methoden einbinden:

  • Kopieren Sie das Verzeichnis in den Ordner Ihres Themas und fügen Sie die CSS-Datei in die .info Ihres Themas ein

  • Erstellen Sie ein benutzerdefiniertes Modul, implementieren Sie hook_init () und verwenden Sie drupal_add_css () , um Ihr benutzerdefiniertes Stylesheet hinzuzufügen:

    Funktion mymodule_init () {$ options = array ('group' => CSS_THEME, 'every_page' => TRUE, 'weight' => 9999); drupal_add_css (drupal_get_path ('module', 'mymodule'), 'mymodule.css', $ options); }}

Alex Weber
quelle
Ich habe die drupal 7-Version von jquery_ui nicht gefunden und denke nicht, dass das Kopieren meiner Dateien in das drupal-Kernverzeichnis der beste Weg ist.
ya.teck
Mein schlechtes, stimmte zu, ich habe meinen ursprünglichen Beitrag bearbeitet, um dies zu beheben :)
Alex Weber
Fügt drupal_add_css nicht einfach neue CSS-Dateien hinzu, ersetzt sie aber nicht? Ich werde die jQuery-Benutzeroberfläche nur auf einer einzelnen Seite verwenden.
ya.teck
drupal_add_css ersetzt Dateien mit demselben Namen. Wenn Sie also beispielsweise Ihr CSS 'jquery.ui.theme.css' nennen, wird es anstelle der Standardversion verwendet
Alex Weber
3

Für Drupal 7 führt das Stock Seven-Thema Folgendes aus ( Repository-Link ) (gekürzt):

function seven_css_alter(&$css) {
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'seven') . '/jquery.ui.theme.css';
  }
}

Ändern Sie entsprechend, dh ersetzen Sie "sieben" durch den Namen Ihres Themas und zeigen Sie den Pfad zur CSS-Datei Ihres jQuery UI-Themas.

Samat Jain
quelle
3

Wenn Sie die Benutzeroberfläche über hinzufügen drupal_add_library(), können Sie den Stil mithilfe von ändern hook_library_alter(). Zum Beispiel:

/**
 * Implements hook_library_alter().
 */
function YOURMODULENAME_library_alter(&$libraries, $module) {
  unset($libraries['ui']['css']['misc/ui/jquery.ui.theme.css']);
  $libraries['ui']['css']['path/to/your/custom/theme/jquery.ui.theme.css'] = array();
}
Webassistent
quelle
1
Ich denke, dies ist die bessere Methode, da sie wahrscheinlich modulspezifisch sein wird. Auch bei mir hat es funktioniert.
Brandon Bearden
2

Ich empfehle, das jQuery-UI- Designmodul zu verwenden, das mehrere von THEMEROLLER generierte Benutzeroberflächen verwaltet und diese Benutzeroberflächen an Drupal-Designs anfügt. Legen Sie dann die CSS-Klassen der jquery-Benutzeroberfläche für Elemente in Drupal mit den Modulen wie Blockklasse / Knotenklasse / Webform-CSS usw. fest.

fischfrei
quelle