Jump to content

Design bearbeiten


butterblume

Recommended Posts

So ihr lieben,

nachdem ich nun dank eurer Hilfe alle anderen Fragen bearbeiten konnte, kommt hier nun noch eines. Und zwar wie kann ich das Design ändern? Oder muss ich dazu ein Tamplet (heißt das so) erstellen? Im Grunde möchte ich nur ein Hintergrundbild und die Farbe ändern?!

 

Hat da vielleicht auch einer eine Idee zu?!

 

Ich sag schon einmal vielen Dank und habt einen schönen Abend mit unvergesslichen Momenten!

Link to comment
Share on other sites

Ich habe in der suche design bearbeiten eingegeben, die haben aber nix gefunden. Sonst hätte ich ja nicht gefragt...

 

 

Im Grunde möchte ich nur ein Hintergrundbild und die Farbe ändern?!

 

 

dann such doch nach Hintergrundbild oder Hintergrundfarbe Farbe

 

Tip: Benutze doch Firebug Addon von FireFox oder Rechtsklick Element untersuchen, hat jeder Browser.

Link to comment
Share on other sites

Okay, ich versuchs mal! Danke schön!

 

Habe jetzt was gefunden als ich farbe ändern eingegeben habe.

Da wurde in einem post gesagt:

 

das sind alles voneinander unabhängige Elemente, alles über global.css und jeweilige Hintergrundbilder einstellbar. CSS-Kenntnisse und Firebug erforderlich ;)

Link to comment
Share on other sites

Bei dir liegt das Bild in

https://servietten-flohmarkt.de/modules/themeconfigurator/img/bg-theme8.jpg

Das findest du in CSS

https://servietten-flohmarkt.de/modules/themeconfigurator/css/theme9.css

in zeile 5 ../img/bg-theme8.jpg

 

 

 

Wen du wissen möchtest wie du den Hintergrund Bild oder Hintergrundfarbe ändern kannst google nach , CSS Hintergrund , da gibts viele Beispiele

Edited by SliderFlash (see edit history)
Link to comment
Share on other sites

Wenn du im BackOffice eingeloggt bist und deinen Shop (FrontOffice) öffnest, siehst du links ein Feld mit Zahnrädern, wenn du dieses öffnest, kannst du unter einer Auswahl von Farbkombinationen wählen. Darüber hinaus kannst du natürlich die Farben aller Elemente individuell per CSS ändern, das ist allerdings sehr aufwändig.

 

Neben kompletten Templates gibt es übrigens auch Module, die das Anpassen des vorhandenen Templates (also z. B. dessen Farben) erleichtern.

Link to comment
Share on other sites

Guten Abend Christian,

das Hintergundbild hat gut geklappt.

 

Wollte jetz nur noch das Schwarz in anderer Farbe! Guckst Du bitte hier: https://servietten-flohmarkt.de

 

Allerdings müssten dann auch die Links eine andere Farbe haben!

 

Aber danke für den Hinweis. Ich guck mir das mal an!

 

Ich steh gerade mal wieder uaf dem Schlauch... :unsure::huh: wo finde ich das noch mal genau :(

Edited by butterblume (see edit history)
Link to comment
Share on other sites

deswegen schrieb Christian ja auch...

 

"Darüber hinaus kannst du natürlich die Farben aller Elemente individuell per CSS ändern, das ist allerdings sehr aufwändig."

 

Ändert man Hintergrundfarben, steht meistens unmittelbar auch die Änderung von Text- und Linkfarben an. Diese wiederum können in unterschiedlichen CSS-Dateien definiert sein.

Edited by Scully (see edit history)
Link to comment
Share on other sites

@ Butterblume

Ich habe es gestern anderswo auch schon geschrieben. Du konterkarierst den Zweck der Funktion "beste Antwort" bzw. "mark solved" indem Du jeweils Deine eigenen Antworten als "Lösungen" markierst.

 

Diese Funktion hat den Zweck, denjenigen Post als "Lösung" zu markieren, welcher diese tatsächlich erbracht hat. Damit wird dann jeweils der Post mit der passenden Lösung direkt unter dem Titel angezeigt. Da Du nun seit einigen Tagen Deine Posts in Deinen eigenen Fragestellungen so markierst, führst Du dieses System ad absurdum. Als Beispiel diene Dein obiger Post #11 - da ist nichts lösungsrelevantes drin. Darum gehört der auch nicht markiert. Danke.

Edited by Scully (see edit history)
Link to comment
Share on other sites

Sorry, dann hab ich das irgendwie falsch verstanden! Tut mir leid, ist keine Absicht. Ich dachte immer, dass dann der Post als gelöst makiert sei! :wacko::huh:

 

Aber ich musste feststellen, dass er doch noch nicht gelöst ist. Habe die css jetzt nach meinen Wünsche geändert, aber ich bekomme die Links im Footer nicht nach meinen Wünschen eingestellt und auch oben der Schwarze Balken ist noch im Haeder :( Guckt ihr bitte hier:

 

https://servietten-flohmarkt.de

 

Velen Dank und habt einen schönen Sonntag!

Link to comment
Share on other sites

Der Thread wird so schon als gelöst markiert. Jedoch sollte man diesen Button auf demjenigen Post setzen, der eben auch wirklich die Lösung beschreibt. In 98% der Fälle ist dass dann auch nicht ein Post des Fragestellers.

 

Deine Buttons im Footer sind ab Zeile 7250 in global.css definiert.

Der Selektor da wird etwa so aussehen:

.footer-container #footer

Was mir auffällt sind zwei Sachen:

 

1. Du hast den Theme-Konfigurator aktiv am Laufen (ersichtlich, dass die Datei theme9.css geladen wird. Gleichzeitig arbeitest Du mit manuellen Änderungen an verschiedenen CSS-Dateien / Stellen. Beides zusammen wird schnell einmal übersichtlich. Was ändert der Konfigurator oder wo habe ich selbst manuell in einer Datei Dinge überschrieben? Je mehr man ändert, desto schwieriger wird das später im Unterhalt sein.

 

2. Einige Links scheinen aufgrund Deiner Änderungen ihre ansonsten korrekte Darstellung bereits "verloren" zu haben. Der Link "Kontakt" oben rechts in der Kopfzeile gehört dazu. Nicht selten passiert das, wenn man Änderungen nur an derjenigen Stelle überprüft, wo man eine Veränderung "erwünscht" und dabei nicht bemerkt, dass sich die Änderungen an anderen Stellen auch niederschlagen können. Oder indem man ungültige CSS-Anweisungen schreibt, welche dann dazu führen, dass der Browser ein Element in der "Standart-Formatierung" anzeigt.

Edited by Scully (see edit history)
Link to comment
Share on other sites

Hallo scully,

hab michndochnschon entschuldigt für das häckchen....

 

Ich habe nur die css themes9 geändert. Wäre der obere balken nichtnschwarz, würde man den link auch besser sehen. Doe farbe war übrigens beabsichtigt. Aber da ich den Balken keine andere Farbe zuordnen kann muss ich den wieder weiß machen...

Link to comment
Share on other sites

Man kann per CSS grundsätzlich alles Bearbeiten, wenn man will. Dein "Balken" => Navigation - wenn der oberste gemeint ist, wird hier formatiert.

 

global.css:5744
header .nav
rgb(51, 51, 51)

 

Mein Tipp genereller Art:

Erst mal auf die Funktionalität fokussieren und nicht zuviel auf Details des Designs. Oft bleibt nämlich die Funktionalität und der Test derselben aussen vor. Da nützt dann auch wunderbares "Custom Design" nur mässig. Den Mix von global.css und themeX.css finde ich nicht gut, aber es muss jeder selbst der Schmid seinens Unglücks werden. Leider ist es oft so, dass man erst Tage oder Wochen später bemerkt, wo das Design dann "nicht mehr passt", ohne sich bewusst zu sein, dass das mal im Ursprung ganz wunderbar ausgesehen hat.

 

Beispiel hierfür bei Dir:

Die Schrift im Footer. Ist mit dieser Hintergrundfarbe absolut fürchterlich anzusehen, da hier Schrift-Effekte Anwendung finden. Ausnahme hier: Die Schrift im Impressum des Footers, da dort nicht identisch angewendet. Dort ist im Gegensatz die Mailadresse kaum mehr lesbar. Das ist alles in Summe Folge der Anpassung der Hintergrundfarbe bzw. Hintergrundbild.

 

Insgesamt finde ICH, dass Deine Seite mit den Designanpassungen sehr unruhig und unharmonisch wirkt. Das Hintergrund-Bild trägt dazu ebenso bei wie der Mix aus vielen Farben (alleine schon Serviettenbilder, was gut ist), teils weissen Hintergrundelementen (siehe zB beim Logo, aber auch anderswo rund um die Bilder), vielen Schriftfarben und Schriftarten, welche in Summe nicht mehr stimmig wirken. Am Schlimmsten finde ich den Warenkorb - da bekomme ich Bauchweh.

 

Das alles ist aber nur MEINE persönliche Meinung. Ich würde den Theme-Konfigurator nutzen um kleine Änderungen zu machen die in sich dann harmonisch wirken. Die CSS würde ich in Deinem Fall gar nie verändern.

Link to comment
Share on other sites

Die Sache ist so:

 

1. erstmal gilt für alles "Wichtige" die global.css
2. der Theme-Konfigurator überschreibt von global.css mehr oder weniger viele Parameter und nutzt dafür je nach Farbwahl die Datei themeX.css wobei X für die Designwahl im Konfigurator steht. Das funktioniert, weil in CSS die Regel gilt: Was zuletzt geladen wird, überschreibt die Wirkung vorgängig bereits definierter Selektoren.

3. Module nutzen oft ihre eigenen CSS Files. Häufig sind diese auf das Standard-Theme von PrestaShop abgestimmt.

 

Auf Deiner Seite gibt es 31 CSS - Files, bedingt durch Theme-Konfigurator und verschiedene Module. Plus global.css gibt dann 32 in Total.  Das macht die Sache eben unübersichtlich und aufwändig. Darum haben kleine Änderungen oft auch unbekannte Seiteneffekte an anderen Stellen, wo sie nicht auf Anhieb auffallen. Und darum würde ich als Anfänger davon erstmal die .... davon lassen.

Edited by Scully (see edit history)
Link to comment
Share on other sites

Der Konfigurator hat aber auch diese Option "Live-Edit anzeigen". Da kann man den Schieber aktivieren.

Da kann man nämlich Farben und Designs mit verändern. Mit Grenzen aber immerhin.

Und da hat jemand bei Dir sicher schon mit rumgewerkelt.

 

Deine obige Antwort #21 bestätigt mich insofern, als dass Du noch nicht alle Zusammenhänge verstehst. Das ist auch durchaus normal, wenn man sich neu mit PrestaShop beschäftigt. Aber darum sehe ich die Eingriffe in CSS - Dateien auch sehr kritisch.

Link to comment
Share on other sites

Wenn du einzelne Hintergründe oder Schriftfarben verändern willst, ist Firebug / die Untersuchen-Funktion verschiedener Browser unverzichtbar. Klicke einfach mit der rechten Maustaste auf das zu ändernde Element, z. B. auf das schwarze Rechteck ganz oben rechts, wähle "Untersuchen" o. ä., dann siehst du, welche css-Anweisung in welcher css-Datei dafür verantwortlich ist, in diesem Fall in der global.css nach Zeile 5739:

 

header .banner {

   background: black;

   ...

}

 

Du kannst jetzt direkt im Browser diese Anweisung testweise ändern und das Ergebnis sehen (beachte vor allem ob auch andere Elemente betroffen sind, hier betrifft die Anweisung speziell das Banner im Header, wirkt sich also nur hier aus).

 

Dann öffnest du die global.css per FTP im Editor (empfohlen Notepad++) und ersetzt das "black" z. B. durch "transparent".

 

Wichtig, falls du dich mit der Syntax von CSS nicht auskennt, beschäftige dich damit, ein winziger Tippfehler kann alles durcheinander bringen. Es ist auch kein Fehler, vorher die zu bearbeitenden Dateien zu kopieren, um für alle Fälle eine Sicherung des vorherigen Zustands zu haben.

 

Den dunkelgrauen Hintergrund der Linkleiste unter dem Top-Banner findest du auch in der global.css nach Zeile 5745, das hatte Scully glaube ich schon geschrieben.

 

Genauso kannst du auch Schriftgrößen, Abstände und vieles mehr anpassen.

Edited by rictools (see edit history)
Link to comment
Share on other sites

Hallo Christian,

vielen dank auch Dir für die ausführlichen Erklärungen!

 

Ich habe diese beiden Ebenen schon in der global.css geändert und auch hoch geladen.

Was mich nur wundert. Ich habe in der Themes9.css den Bereich um das Rufen sie uns an oben Links unter dem Banner nach meinen Wünschen bearbeitet und natürlich auch hoch geladen, aber die Änderung wird irgendwie nicht angezeigt!

 

Für heute mache ich Schluß. Gehe dann morgen dann mit neuem Elan noch einmal bei. Dann klappt es auch eigentlich immer!

 

Wünsche euch noch einen schönen Rest Sonntag und vielen Dank an alle für eure Hilfe!

Link to comment
Share on other sites

Hmh -_-  Dann weiß ich auch nicht... in der Theme9.css steht : #header #nav-row .shop-phone { und das ist doch oben links,oder?

 

Jetzt habe ich mich mal Schlau gmeacht weil ihr immer vom Fireburg schreibt. Wollte es installieren, aber das ist mit meiner FF Version nicht kompatibel... sagt mir FF

 

Ich werde morgen mir die Global.css mal vornehmen und nach jeder Farbänderung hoch laden und gucken. GGf wieder rückgängig machen!

 

Ich kann hier in meinem FF Element untersuchen anklicken. ISt vielleicht das selbe?!

Edited by butterblume (see edit history)
Link to comment
Share on other sites

Ich kann hier in meinem FF Element untersuchen anklicken. ISt vielleicht das selbe?!

Das ist die gleiche oder eine ähnliche Funktion.

 

in der Theme9.css steht : #header #nav-row .shop-phone { und das ist doch oben links,oder?

Da gibt es das span-Tag shop-phone, nur finde ich keine aus der theme9.css (oder Theme9.css?, das ist NICHT das gleiche!) stammenden css-Anweisungen dafür.

Link to comment
Share on other sites

Auch wenn man vielleicht nicht gleich das große Geld machen will, darf ein Shop ruhig gut und schön sein, das ist keine Frage, und wenn man vorher gut gearbeitet hat, kann man hinterher leichter "Aufrüsten" oder auch den Shop gut weiterverkaufen....

 

Also Butterblume, lass dich nicht beirren, weiter so :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...