Anleitung CSS im Shop ändern - USERMOD-CSS oder CSS Monitor oder CSS Editor - was ist was....

Im Gambio-System gibt es aktuell diverse Möglichkeiten, das Design zu ändern.
Oft liest man im Forum von einer USERMOD CSS oder dem CSS Monitor oder Editor....

Hier mal kurz erklärt, wo diese Dinger zu finden sind und wofür sie gut sind:


CSS Monitor

(Link nur für registrierte Nutzer sichtbar.)

Wird aufgerufen mit
www . DeineDomain . tld /gm_css_monitor.php
Hier könnt ihr alle aktiven Styles aus dem Style Editor sehen und bearbeiten.
Am einfachsten durch Eingabe des Styles in das Suchfeld.



CSS Editor im Style Edit

(Link nur für registrierte Nutzer sichtbar.)

Den zu bearbeiten Style auswählen
dann zu Optionen
dort könnt ihr im CSS Editor den Style bearbeiten.

Hinweis: Bereiche, die in einer USERMOD-CSS Datei gespeichert wurden, können nicht mehr über den Style Editor geändert werden. Wer aber eine USERMOD CSS nutzt, wird das wohl auch nicht mehr benötigen.

USERMOD CSS Datei

(Link nur für registrierte Nutzer sichtbar.)

Eine CSS Datei mit beliebigem Namen die im Ordner
/templates/EyeCandy/usermod/css
abgelegt wird.
Hier abgelegte CSS Dateien stehen grundsätzlich auf allen Shopseiten zur Verfügung.
Man sollte aber die Gewichtung von Styles beachten. Siehe dazu auch
(Link nur für registrierte Nutzer sichtbar.)
Wenn alles nichts hilft, also die Änderungen dennoch nicht übernommen werden, am Ende ein !important schreiben
Beispiel: p { font-size:1em !important; }


USERMOD CSS ist mein persönlicher Favorit. Warum?
- Updatesicher zu 100%
- Alle eigenen Änderungen liegen zentral in einer Datei


Sonstige CSS Dateien
Ältere Module haben oft noch eigene CSS Dateien, die man einbinden muss - teilweise als Datei, teilweise über SQL Befehle in den Style Editor.
Neue Module legen ihr CSS oft schon richtig im USERMOD-CSS Ordner ab.
Einige ältere Styles finden sich auch noch in der /templates/EyeCandy/stylesheet.css

Fazit: Es gibt viele Wege, die nach Rom, bzw. zu einem veränderten Style führen. Allerdings klingt es komplizierter als es wirklich ist.

Wer sich mit CSS auskennt, ist mit der USERMOD-CSS Datei am besten bedient, da man dort alle IDs, Classes und Tags beliebig formatieren und vorhandene überschreiben kann.

Zum Schluss noch ein wichtiger Hinweis zum Cache:
Nach dem Hinzufügen neuer USERMOD-Dateien muss der Cache geleert werden:
Im Adminbereich auf der Seite "Cache leeren" die Punkte "Cache für Seitenausgabe leeren" und "Cache für Modulinformationen leeren" ausführen.
Ganz wichtig bei CSS-Änderungen: den Browser Cache unbedingt leeren, da CSS in der Regel für 60 Minuten nicht neu geladen werden.

Weitere Infos z.B. auch hier:
- (Link nur für registrierte Nutzer sichtbar.)
- (Link nur für registrierte Nutzer sichtbar.)

 

Hallo Dennis,

das hab ich jetzt probiert. Ich blicke nicht durch. Wen ich die Seite aufrufe, kriege ich eine leere Zeile und ein Dropdownmenü mit Überschrift HAUPTEBENE. Wenn ich das aufklappe (siehe Screenshot), kommen die Elemente der Hauptebene zum Vorschein. Wenn ich eins davon anklicke, dann habe ich es angeklickt. Keine Ahnung, wie ich daran was ändern können soll. Was soll daran praktischer sein als die css im Editor aufzurufen?

USERMOD CSS Datei

Sollen da sämtliche Styles rein inklusive der angepassten oder nur die angepassten oder ist es egal?

Grüße

Marieluise

 

Usermod CSS - NUR die angepassten Sachen müssen da rein. also alles was du anders haben willst.

 

Wozu das Dropdownmenü sein soll, hat sich mir auch nicht erschlossen. Wenn du mit dem Teil was ändern willst, gibst du in der leeren Zeile den Style ein, der geändert werden soll und drückst Enter. Dann kannst du den unten bearbeiten und speichern. Das Teil ist im Prinzip eher was für Leute, die nicht mit dem Style-Editor arbeiten können/wollen.

Am praktischsten finde ich den Weg über die Usermod CSS. Dort packst du nur deine angepassten Anweisungen rein. So hast du immer alles was du geändert hast in einer Datei, die auch updatesicher ist.

 

Hallo Dennis,

hab jetzt alle Anpassungen in eine usermod-css verschoben, Cache geleert, und es scheint zu funzen. Da kam mir die (hoffentlich geniale) Idee, ob man das vielleicht auch mit der verflixten lang_german.conf machen könnte. Dieses dämliche amerikanische Glückwunschgetue, die Orthografie und der Sprachstil sind sowas von verbesserungsbedürftig, da fummele ich nach Updates, die diese Datei enthalten, immer endlos rum, bis die Sprache meiner Site wieder den Ausweis darstellt, den ich haben möchte. Mit welchen Dateitypen funktioniert denn die Usermod?

Schöne Grüße

Marieluise

 

Schau mal im Forum unter GX2 Sonstiges, da sind 4 Anleitungen für Updatesichere Änderungen
Tipp: im Masterupdate ändert sich einiges, vielleicht solltest Du mal einen Blick in die Beta-Version machen

 

Arharrr, danke!

 

Nur mal eine kleine Frage.
Kann man mit der Usermod-css Datei nur vom Shop bekannte CSS Selektoren anpassen/verändern, oder auch neue (eigene) hinzufügen?

MfG. Moni

 

Ja.

 

Wer noch gar nix von CSS gehört hat und nur immer wieder im Forum ließt schau im Firebug oder ELement untersuchen

hier wird erklärt wie CSS aufgebaut ist und wie es funktioniert - und wie ich finde sind die Schritte sehr schön und gut verständlich

(Link nur für registrierte Nutzer sichtbar.)

 

Ich will es mal mit einer eigenen CSS-Usermod Datei probieren.
Also wenn ich es richtig verstanden habe kommen da nur die einzelnen Dinge rein, die geändert werden sollen?
Ich habe mal eine Testdatei vorbereitet und bitte um Rückmeldung ob dies zu ändern der einzelnen Bereiche richtig ist.

Code:

/*runde Ecken Shop*/
#container
{
border-radius: 20px;
}

/*runde Ecken Linie schwarz gekachelte Artikelansicht*/
.article-list.cols .article-list-item
{
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #00000;
}

/*runde Ecken Bestsellerbox links*/
#menubox_best_sellers
{
border-radius: 10px;
}

/*Text größer Kategorie links*/
body #wrap_box.wrap_shop .content-box.categories.submenu ul li a.parent
{
font-size: 14px;
}

 

auf 1. blick sieht die gut aus.
Fragen aber bitte im entsprechendem Forum damit die Tutoials nicht überfüllt werden. danke.

Einfach mal in den Usermod/css ordner - caches SHpp und Brwoser leeren - schauen obs geht.