WooCommerce - Wie DIV Schatten und Hintergrundfarbe ändern

Question

Ich habe eine Website mit einer Produktseite, die Änderungen müssen entfernen: http://weardenali.com/product/everyday-messenger

Ich versuche zu

a) Ändern Sie die Hintergrundfarbe

b) Entfernen Sie die Schattenbox

Es funktioniert auf dem iPad (die Höhe 768px) aber sobald die Website Höhe unter 768px abnimmt, funktioniert die Swipe-Funktion nicht mehr.

Ich hoffe, dass mir jemand dabei helfen kann.

Dieses Bild von meiner Seite ist here

Answer 1

Ihre Fragen zu beantworten, um:

a) Der Hintergrund Ihrer Seite wird als Element Stil festgelegt. Wahrscheinlich vom WordPress-Styling oder irgendeinem anderen Grund, den ich nicht sofort feststellen kann. Das Stammelement wird von .product-main in der CSS-Datei sf-combined.min formatiert. Hier können Sie die Hintergrundfarbe zu irgendetwas setzen Sie wollen, wie vorgeschlagen:

.product-main { 
background-color: #anything; 
} 

In Anbetracht dieser kann oder nicht arbeiten, ich schlage vor, Sie versuchen zu ermitteln, warum die .product-Haupt ein Element Stil #fcfcfc hat . Das Folgende ist nicht empfohlen aber Sie können immer .product-main {Hintergrundfarbe: #anything! Wichtig; } um alle Einstellungen zu überschreiben. Aber das ist nicht Best Practice.

b) in Ihrem CSS in sf-combined.min.css auf der Linie 15 (die ungenau sein kann, weil es eine minimierte CSS-Dokument) ist haben Sie die folgende Zeile:

.product-fw-split div. Produkt div.summary.

die Box Schatten Einträge aus der CSS entfernen:

.product-fw-split div.product div.summary { 
padding: 40px; 
margin-bottom: 40px; 
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.1); 
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1); 
box-shadow: 1px 1px 1px rgba(0,0,0,.1); 
} 

Und sollte die Box Schatten verschwinden. Bitte prüfen Sie, ob es zu reaktionsfähigen Anfragen kommt, die dasselbe auf mobilen Geräten betreffen können (was ich nicht überprüft habe).

c) Ich konnte nicht vollständig bestimmen, was Ihre Frage in c war. Ich glaube, Sie möchten wissen, wie Sie verhindern können, dass die Swipe-Funktion aufhört zu arbeiten, wenn die Größe auf Geräten kleiner als 768px geändert wird? Es könnte WooThumbs beabsichtigte Funktionalität sein, in diesem Fall schlage ich vor, dass Sie zum CodeCanyons-Support gehen und versuchen, eine Antwort direkt von ihnen zu erhalten. https://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927

Ich hoffe, es hilft. Nächstes Mal könnte es einfacher sein, Ihre Fragen in mehrere Fragen aufzuteilen, damit andere leichter Antworten finden können.

Answer 2

Hier sind Ihre Änderungen: A) ändern Sie product-main clearfix Stil background-color: #fcfcfc; zu Ihrer Wunschfarbe.

B) entfernen

Remove /* -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1); */ 
Remove /* box-shadow: 1px 1px 1px rgba(0,0,0,.1);` 

von Ihrem summary Klasse oder Ihre div umbenennen.

C) Ich teste es nur in Chrom Version 55 ........ simuliert iPhone 5 und YPUR Karussell noch funktioniert.