less Dateien und Codestellen finden mit firebug

Toric · November 2015

Hallo,

ich habe dank dem Video von Hostianer https://vimeo.com/136635907 meinen Footer fast perfect geändert.

Ich scheitere nun aber wieder an Kleinigkeiten...

Firebug verwende ich im Firefox schon sehr lange. Bei joomla z.B. werden mir die CSS-Dateien auch schön angezeigt. Bei SW klappt es nicht. Bin nach der Anleitung (Häkchen in Einstellungen, Cache leeren) vorgegangen. Ich sehe immer nur den Cachepfad.

Da ich aus dem Video die Datei erfahren habe, hab ich mir dort alles zusammen gesucht.

Mein Code sieht jetzt so aus:

.footer-main {
border-top: 0 solid #ccc;
background: #636363 none repeat scroll 0 0 ;
color: #ffffff;

	// Hintergrund innen
	.container {
	background: #636363;
	}
	
	// Links AGB etc
	.navigation--link {
	color: #ffffff;
	}
	
	// Überschrift Navi unten
	.column--headline {
	color: #fff;
	}
	
	// Linie zwischen Navi unten und inkl Mehrwertsteuer
	.footer--columns {
	border-bottom: 0 solid #fff;
	}	
 }

Was nun nicht mehr passt, ist die Farbe der Links (AGB etc.) bei Mouseover. Außerdem habe ich den Newsletterblock zweckentfremdet und eine Linkliste erstellt. Diese Links und der Versandkostenlink ganz unten benötigen ebenfalls eine andere Farbe. Allerding soll sich die Linkfarbe nur dort ändern und nicht in den übrigen Bereichen des Shops.

Ich finde die Stellen nicht bzw. im Firebug kann ich die Linkfarbe ändern, finde aber den Dateieintrag nicht...

Kann mir jemand auf die Sprünge helfen?

LG

TeichDatensysteme · November 2015

Zum einen kannst Du das CSS Mapping im Theme aktivieren, dann wird die Datei klarer.
Andere Doku: https://developers.shopware.com/styletile/

Dort siehst Du welche Inhalte in welchen Komponenten bzw. Modulen vorhanden sind.

Schöne Grüße,
Niklas

Toric · November 2015

Hallo Niklas,
ja das Mapping ist eingeschaltet. Dazu gibt es die Erklärung im Video. Nur wirkt sich das überhaupt nicht auf die Anzeige in Firebug aus.

Und meine Kenntnisse reichen einfach nicht aus, solche Dinge wie die Linkfarbe - ausschließlich für Footer z.B. - so einfach zu finden.

lg

Shopwareianer · November 2015

Toric wrote:

Hallo Niklas,
ja das Mapping ist eingeschaltet. Dazu gibt es die Erklärung im Video. Nur wirkt sich das überhaupt nicht auf die Anzeige in Firebug aus.

Und meine Kenntnisse reichen einfach nicht aus, solche Dinge wie die Linkfarbe - ausschließlich für Footer z.B. - so einfach zu finden.

lg

In Firebug gibt es hier meine ich einen Bug.
Versuch es mal mit Chrome und den Dev Tools, damit sollte die entsprechende .less Datei mit Zeile angezeigt werden.

PS: Gerade mal in FF getestet, funktioniert einwandfrei: http://d.pr/i/15UyI

Toric · November 2015

dann würde ich auf Firebug verzichten und dein Programm verwenden. Sieht in dem Video auch benutzerfreundlicher aus.
Wo kann ich es sicher herunterladen für Firefox?

Shopwareianer · November 2015

Toric wrote:

dann würde ich auf Firebug verzichten und dein Programm verwenden. Sieht in dem Video auch benutzerfreundlicher aus.
Wo kann ich es sicher herunterladen für Firefox?

Achso hatte ich oben garnicht gesehen, dass du von dem Video sprichst :x
Das sind die ganz normalen Dev Tools von Chrome welche als default mit dabei sind.

CSS Sourcemaps sind in den Einstellungen im Theme Manager aktiviert? ->
https://drive.google.com/file/d/0B6YdSl ... p=drivesdk

Habe ich wohl im Video vergessen zu erwähnen

Toric · November 2015

ach neee

der letzte Hinweis war aber gut. FF hat wohl auch so ein Tool standardmäßig, sieht auch aus wie deines und da sind die Dateinamen jetzt richtig

Ob ich damit jetzt weiter komme, werde ich sehen. Zumindest bei den genannten Links im Footer habe ich da Bedenken (also die Shopseiten und die externen Links - sind wohl 2 paar Schuhe).

Edit: die hover-farbe der Seitenlinks waren ebenfalls im Footer. Aber der externe Link, den ich im Newsletterkasten eingerichtet hab, passt farblich nicht und verändert auch bei mouseover nicht die Farbe. Angezeigt wird die global.less

Das hört sich mir zu global an :-) ich will nicht alle Linkfarben ändern....

Shopwareianer · November 2015

Wenn du einen eigenen Link in den Footer gepackt hast, dann wird dieser vermutlich nicht angesprochen, da dafür kein style existiert.

Ansonsten dann einfach

footer {
   a {
     color:red;
   }
}

Basic CSS - solltest du erst einmal lernen, damit du auch weißt, was du überhaupt anpasst und nicht bei jedem Basic Schritt fragen musst.

Toric · November 2015

genau so isses wohl.

Da die Links in den Textbausteinen stehen habe ich mit

style="color: #fff;"

die Farbe geändert. Nun habe ich zwar kein Hovereffekt, aber das ist jetzt auch kein Drama.

Ich richte mir nur meinen kleinen Shop ein und dachte ich komm mit meinen minimalsten Kenntnissen durch :-)

Für den großen Shop werd ich mir dann eine Agentur suchen, eigenes Template etc.

Shopwareianer · November 2015

Dafür gibst du dem a eine Class und änderst es entsprechend über CSS.

Eine Alternative ( nicht optimal ) für "inline CSS" wäre per JS.

<a
   href="nach_irgendwo"
   onMouseOver="this.style.color='#ff0000'"
   onMouseOut="this.style.color='#000'"
>Mein Link</a>

So kannst du dem a auch ein hover im Textbaustein verpassen ohne less/css Datei.

Toric · November 2015

tausend Dank :-)

zumindest bei dem einen Link funktioniert es. Bei den Versandkosten in der Fußzeile noch nicht. Da muss ich morgen nochmal bei klarem Verstand drüber nachdenken :-) bin vermutlich betriebsblind

Comments