Anwenden von CSS auf Drupal

Ich arbeite mit Drupal 8 und Ubercart. Ich versuche, die Farbe der Schaltfläche "In den Warenkorb" von rot nach grün zu ändern. Unten ist der Code auf jeder Produktseite.Anwenden von CSS auf Drupal

<input name="op" class="button js-form-submit form-submit" id="edit-submit- 32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32">

Also, was ich in meiner CSS-Datei tat, war die folgende ...

#edit-submit-32 
{ 
    color: #FFF; 
    background-color: #0F3; 
    font-weight:bold; 
}

Das ist offensichtlich für diese ein bestimmtes Produkt gearbeitet, aber ich habe mich gefragt, ob es eine CSS war ich würde verwenden könnte diese Änderung für alle meine aktuellen Produkte und alle zukünftigen Produkte vornehmen? Der Code für jedes Produkt ist genau der gleiche Unterschied ist das ID-Tag für jedes Produkt. Jede Hilfe wird sehr geschätzt.

Quelle

2016-07-21 sdotbailey

Versuchen Sie, eine, wenn nicht mehr der Klassenattribute mit dem .selector anstelle der #Selektor – Reisclef

Wenn Sie nicht alle Tasten einreichen dagegen würde zu ändern, dies funktionieren würde:

.form-submit 
{ 
    color: #FFF; 
    background-color: #0F3; 
    font-weight:bold; 
}

Oder, wenn alle Tasten Wert = „Jetzt kaufen“, dann können Sie dies tun:

input[value="Buy Now"] 
{ 
    color: #FFF; 
    background-color: #0F3; 
    font-weight:bold; 
}

Quelle

2016-07-21 20:54:30 Dave

zu verwenden Ich hätte nichts dagegen, die zweite Option aus, aber ich bin verwirrt, welche Selektor die # oder die verwenden. In diesem Fall ? – sdotbailey

'#' ist für die ID des Elements, das, wie Sie in Drupal sehen, für eine bestimmte Schaltfläche sein kann, die nur auf einer Seite erscheint. '.' ist für Klassen des Elements, die auf mehreren Elementen angezeigt werden können, und in Drupal für Elemente, die auf vielen Seiten gefunden werden. Ich würde versuchen, die 'input [value =" Buy Now "]' und sehen, ob das funktioniert. – Dave

Also kein Selektor dann? Ich habe es gerade ausprobiert und es ist immer noch rot im Vordergrund, aber ich kann etwas grün im Hintergrund sehen. Irgendein Grund, warum das passieren würde? – sdotbailey

Das erste, was ich tun würde, ist festzustellen, ob alle diese Arten von Tasten, um einen ähnlichen Stamm-Container haben und dann verwenden, die als Mutter Selektor:

<div class="add-to-cart-wrapper"> 
    <input name="op" class="button js-form-submit form-submit" id="edit-submit- 32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32"> 
</div> 

.add-to-cart-wrapper .button { 
    color: #FFF; 
    background-color: #0F3; 
    font-weight:bold; 
}

Ohne weiteren HTML-Kontext kann ich nicht angeben, was der tatsächliche Elternselektor sein würde - , aber für Beispiel habe ich ein div mit der Klasse "add-to-cart-wrapper" hinzugefügt. Sie würden diesen Selektor durch einen anwendbaren ersetzen.

Es ist auch eine gute Faustregel zu versuchen, Klassen statt IDs für Ihr CSS zu verwenden.

Quelle

2016-07-21 21:23:12 relevantChuck

Mit Drupal (und CMS im Allgemeinen) müssen Sie die Muster betrachten, die durch das Thema generiert werden, um Ihre Selektoren zu schreiben. Wann immer es möglich ist (und mit Drupal's Standard-Designs ist es fast immer möglich), möchten Sie IDs vermeiden und Klassen verwenden. Die Klassen sollen verwendet werden, um mehrere Elemente zu targetieren und Ihnen beim Schreiben wiederverwendbarer Elemente zu helfen.

Es lohnt sich, ein wenig Zeit mit der Überprüfung des generierten HTML zu verbringen, um sich ein Bild von dem zu machen, was generiert wird. Sie können auch einige der basic themeing guides überprüfen, damit Sie verstehen, wie Sie die Kontrolle über das generierte Markup übernehmen können.

Quelle

2016-07-23 21:46:56 acrosman

Danke für das Feedback @acrosman Ich werde das im Hinterkopf behalten. Ich werde sagen, dass mir die Idee, Dave zu benutzen, wirklich gefällt: input [value = "Buy Now"] { color: #FFF; Hintergrundfarbe: # 0F3; Schriftgewicht: fett; } aber ich kann nicht herausfinden, warum das Grün immer noch von der roten überschrieben wird. – sdotbailey

Antwort

Verwandte Themen