• avatar

    Martin Wandelt am 21.05.2012  

    Dieser Artikel bezieht sich nur auf das klassische und adaptive Design. Für das responsive Design (ab Pixtacy 5) gibt es einen eigenen Hilfeartikel.

    Das Aussehen des Pixtacy-Shops wird, wie bei Webseiten üblich, über eine CSS-Datei (Cascading Stylesheets) gesteuert. Sie können diese Datei nach Belieben anpassen, um den Shop an Ihr bestehendes Websitedesign anzupassen und insbesondere Farben und Schriftarten zu ändern. Gehen Sie dazu folgendermaßen vor:

    1. Loggen Sie sich als Masterbenutzer ein.
    2. Wählen Sie – falls noch nicht geschehen – unter Einstellungen > Erscheinungsbild das Farbschema aus, das Ihren Vorstellungen am nächsten kommt. Merken Sie sich den Namen des Farbschemas.
    3. Laden Sie die CSS-Datei, die zu dem ausgewählten Farbschema gehört, mit Hilfe eines FTP-Programms herunter. Wenn Sie zum Beispiel das Farbschema „white“ als Grundlage nutzen wollen, laden Sie die Datei templates/pixtacy/themes/white/style.css herunter.
    4. Passen Sie die Datei style.css an Ihre Wünsche an. Sie können die Datei mit einem beliebigen Texteditor öffnen und bearbeiten. Die Farbdefinitionen finden Sie in den Zeilen, die mit „color“ oder „background-color“ beginnen. Die Schriftdefinitionen beginnen mit „font-family“ und „font-size“. Weitere Informationen über den Umgang mit CSS-Dateien finden Sie in der Onlinedokumentation selfhtml.org.
    5. Kopieren Sie die Datei style.css in das Verzeichnis config innerhalb des Pixtacy-Verzeichnisses.
    6. Tragen Sie in Pixtacy unter Einstellungen > Erscheinungsbild > Eigener HTML-Code die folgende Zeile ins Feld „Kopf“ ein:
      <link rel="stylesheet" href="config/style.css" type="text/css">
    7. Klicken Sie auf Speichern.

     

    Ab sofort bindet Pixtacy die neu erstellte CSS-Datei in die Shopseiten ein. Sie können die Datei auch später jederzeit ändern, müssen dann aber beachten, dass die meisten Webbrowser nicht bei jedem Seitenaufruf die zugehörigen CSS-Dateien neu laden, sondern auch zwischengespeicherte Versionen zurückgreifen. Daher kann es erforderlich sein, den Browsercache zu entleeren bzw. die temporären Internetdateien Ihres Browsers zu löschen, bevor die Änderungen sichtbar werden.

  • Oliver-M. Limmer am 18.02.2013  

    Wo genau kann ich die Schriftgröße ändern?
    Die Menüangaben Home oder AGB Impressum
    bzw. auch Die schrift der Produckte würde ich gerne etwas größer haben...
    Leider habe ich in der css nichts gefunden, was änderung gebracht hat...

    Gruß

    Oliver Limmer

  • avatar

    Martin Wandelt am 18.02.2013  

    Um die Schriftgröße der Menüpunkte zu setzen, müsste man eine Zeile wie die folgende in die CSS-Datei aufnehmen:

    #navi_main a { font-size: 12px }

     

    Wenn weitergehende Änderungen geplant sind, würde ich eine CSS-Referenz zurateziehen, z. B. diesen oder diesen.

  • Oliver-M. Limmer am 18.02.2013  

    Danke, das hat geklappt

    Ich hab nur das Problem die richtigen Dateien zu finden um alles anzupassen.
    Die Schriften sind alle etwas zu klein, sei es Bildbeschriftung oder Produkte
    auch werden mir noch zu viele Thumbnails angezeigt und es verschiebt sich alles....

    Steckt halt noch viel arbeit drin ;-)

  • hiacynta jelen am 19.03.2013  

    Ich würde gerne die Breite ändern, dazu habe ich in der css Datei direkt zu Beginn, d.h. unter Body, diesen Befehl eingefügt

    width: 950px;

    Leider ändert sich an der Breite nichts

     

    Viele Grüße

  • avatar

    Martin Wandelt am 20.03.2013  

    Um die Breite des Layouts zu ändern, sind an mehreren Stellen Anpassungen erforderlich, unter anderem bei den Elementen #content, #area_left und #area_right.

    Die Breite des body-Elements braucht normalerweise nicht explizit gesetzt zu werden.

  • Foto VI am 01.06.2013  

    Ich möchte die internal.css anpassen, für die Produktbeschreibung.

    Gibt es eine Doku zu den verschiedenen Überschreibungs-Möglichkeiten?
    So auch zu den _*.html in "templates/pixtacy/resources" ?

  • avatar

    Martin Wandelt am 04.06.2013  

    Die internal.css wird nur für nicht-öffentliche Seiten verwendet, die im Redaktionssystem angezeigt werden. An dieser Datei würde ich lieber keine Änderungen vornehmen...

  • Foto VI am 04.06.2013  

    Hmm, wie sollte ich dann die Produktinfo-Seite passend zum Shopdesign gestalten?

  • avatar

    Martin Wandelt am 05.06.2013  

    Guter Einwand... ;-)

    Dass die Produktinfoseite auf dem internal.css basiert, ist nicht gewollt. Das werde ich im nächsten Update ändern. 

  • Foto VI am 12.09.2013  

    Martin, kannst du hier bitte nochmal nachhaken,
    die internal.css erscheint immer noch auf der Produktseite.

  • avatar

    Martin Wandelt am 12.09.2013  

    Es hat sich herausgestellt, dass diese Anpassung dazu führen würde, dass sich die Produktdarstellung in bestehenden Shops u. U. erheblich verändert (falls jemand eigene Stylesheet-Anpassungen vorgenommen hat). Deshalb gehört sie nicht in ein Wartungsupdate, sondern muss bis zum nächsten größeren Update warten.

    Ich hab's aber auf der Liste ... ;-)

     

  • Foto VI am 12.09.2013  

    Ok, alles klar.

    PS:
    Wenn ich folgendes in der _prodinfo.html berücksichtige, werden alle meine Anpassungen übernommen:

        <link rel="stylesheet" type="text/css" href="resources/style.css">
        <!--{{vtInclude: includes/html_headers.html}}-->

  • avatar

    Andreas Beck am 13.09.2014  

    Ich habe festgestellt, dass viele Kunden (genauer: fast alle!) in der Produktauswahl das kleine "i" für die Informationen zum Produkt schlicht übersehen. dieses "i" sollte in derselben Farbe dargestellt werden, wie zuvor der Botton "Produkt kaufen". In meinem Fall orange.

    Wo genau kann ich das ändern?

  • Foto VI am 14.09.2014  

    Habe ich auch festgestell und sehr bald umgefärbt.

    Da hier eine Grafik für das "i" verwendet wird, ist es am einfachsten, die betreffende Grafik einfach per Bildbearbeitung zu verändern.

  • Foto VI am 14.09.2014  

    Ich helfe euch gerne bei der Anpassung eurer Shops (html, css)

    http://store.creative-resort.com/index.php?/Infoseiten/Design

  • Thomas Stolz am 14.09.2014  

    Foto IV:

    wo finde ich die entsprechende Grafik?

    Danke und Gruß

    Thomas

  • avatar

    Andreas Beck am 14.09.2014  

    @ Foto VI: Super hat geklappt! Danke!

    @Thomals Stolz: /pixtacy/templates/pixtacy/resources/btn_info.gif

    Andreas

  • Sportfotostammtisch am 07.10.2014  

    Hallo Martin,

    ich möchte die Farbe des Erscheinungsbildes ändern. Wenn ich die neue Farbe mittels Adobe-Culer (in Hexa) festgelegt habe, wo kann ich diese in Pixia ändern?? Wird bei einem Update meine (neue) Farbe mitübernommen ??

    Danke Walter

  • avatar

    Martin Wandelt am 08.10.2014  

    @Walter: Da sich das Erscheinungsbild aus vielen einzelnen Elementen zusammensetzt, sind auch mehrere getrennte CSS-Anweisungen erforderlich, um die Farben zu ändern. Daher gibt es keine einfache Antwort auf Deine Frage. Es kommt drauf an, was Du erreichen willst. Auf jeden Fall bleiben die Anpassungen auch bei einem späteren Update erhalten, wenn Du Dich an das oben beschriebene Vorgehen hältst.

  • Sportfotostammtisch am 09.10.2014  

    @Martin, danke für die Antwort.

    Ich habe mich leider nicht richtig ausgedrückt. "Erscheinungsbild" war etwas unglücklich gewählt. Ich meinte das "Farbschema". Derzeit arbeite ich mit "beige"

    wie Du aus dem Screenshot ersiehst. Und hier wollte ich ein von mir entworfeneeFarbschema in dem Pop-up-Menue unterbringen. Nur finde ich den Ordner nicht. Klar ist mir auch, dass an alle nachfolgen Seiten der von mir gewählte Farbstil übertragen wird.

    Ich hoffe,dass das jetzt von mir richtig dargestellt wurde.

    Danke Walter !

  • Foto VI am 09.10.2014  

    Sportfotostammtisch, lege im ordner "/templates/pixtacy/themes" neben den vorhandenen theme-Ordnern deinen eigenen Ordner an, den du gleich mit dem Erscheinungsbild-Namen benennst.

    Dort hinein kommt die "style.css" Datei, wie oben beschrieben.

    Nun wird dein neu angelegtes Erscheinungsbild gelistet.

  • avatar

    Martin Wandelt am 10.10.2014  

    Foto IV hat recht, aber diese Vorgehensweise hat den Nachteil, dass man bei künftigen Updates immer daran denken muss, den eigenen themes-Ordner zu verschieben. Darum empfehle ich die Vorgehensweise, die oben beschrieben ist. 

  • Boris Schmelter am 12.12.2014  

    Frage:

     

    Ich habe nach dem Update auf Version 4 unter "Erscheinungsbild" das "Design" auf adaptiv geändert.  In der Galerie werden die Bilder jetzt allerdings mit einem weißen Rahmen angezeigt. Kann man die Breite des Rahmens ändern?

     

    VG

  • Foto VI am 12.12.2014  

    Boris,

    dazu ist die Eigenschaft "border" für den Selektor "div.thumbnail.image div.border" anzupassen.
    Das zu kaskadierende Original befindet sich in der Datei "imagelist_styles.css"

  • Boris Schmelter am 13.12.2014  

    Hi,

     

    schon mal vielen Dank dafür. Kannst Du mir noch sagen, in welchem Ordner sich die Datei befindet

  • Foto VI am 15.12.2014  

    Boris,
    wie oben in der Anleitung beschrieben, sollten die Änderungen nicht in dieser Datei selbst vorgenommen werden, sondern in einer eigenen CSS Datei.

    Die Änderungen sollten daher in der Datei config/style.css stattfinden. Wenn noch nicht vorhanden, neu anlegen.

  • Thomas Stolz am 27.12.2014  

    Hallo Leute,

    sorry, ich finde das alles viel zu kompliziert. Ich bin Fotograf und kein Programmierer. Leider wird das mit der 4 er Version nur noch schlimmer. Schade eigentlich..

  • Foto VI am 28.12.2014  

    Thomas, du hast völlig Recht.

    wenn ich richtig verstanden habe, muss man Pixtacy "as is" / "so, wie gesehen" nehmen und sich damit generell zufrieden geben, ohne dass es im master-Bereich viele Einstellmöglichkeiten zur Stilisierung gibt.

    Will man das haben, muss man - wie bei allen anderen selbst gehosteten Content Management Systemen und Shopsystemen einen Spezialisten für Web (Webdesigner / -developer) beauftragen (z.B. bei Joomla, Wordpress / Magento etc)

    Es ist halt nur ein Shop / CMS und nicht ein Website-Baukasten und Programmierung ist - wie du ja schon sagst - nicht die Aufgabe eines Fotografen, man kann Anpassungen nur bis zu einem gewissen Grad selbst machen.

    Schreib mir oder ruf mich an, ich bin zur Hilfe bereit
    http://store.creative-resort.com/index.php?/Infoseiten/Design

  • Sportfotostammtisch am 28.12.2014  

    Auch ich muss Thomas recht geben,

    denn wenn man die "Honorare" berachte die Fotolia & Co an die Fotografen auszahlen, so ist man schon sehr bemüht darüber nachzudenen ob man nicht als Free-Lance Web-Designer umsattelt. Da sethen die Verdienstchancen etas besser!

    Walter

  • Sportfotostammtisch am 28.12.2014  

    Für die Obigen Rechtschreibfehler entschuldige ich mich schon jetzt!

    Ich glaube aber, den Sinn  kann man trotzdem draus rauslesen!

    Walter

  • Torsten Grieger am 08.06.2020  

    Wie funktioniert die Anpassung in der neuen 5er Version? Bei den responsiven Designs gibt es unter "templates/pixtacy/themes_r/slate/" keine Datei "style.css". Ich habe einen Ordner "Fonts" mit "meinen" Webfonts im Startverzeichnis installiert. In welcher/en Datei/en kann/soll ich jetzt Änderungen vornehmen?

  • avatar

    Martin Wandelt am 10.06.2020  

    Ich habe soeben einen neuen Hilfeartikel veröffentlicht, der im Detail beschreibt, wie man das Erscheinungsbild beim responsiven Design anpasst.

  • Torsten Grieger am 10.06.2020  

    Habe den neuen Hilfeartikel zwar nicht gefunden, konnte mein Problem aber zwischenzeitlich weitestgehend lösen. Denn: Wer lesen kann, ist klar im Vorteil. Im Handbuch zur 5er Version steht der Hinweis, dass man das Design über bootstrap.build bearbeiten kann. Nachteil: Man muss sich schon wieder irgendwo mit einem neuen (dem wievielten???) Password anmelden. Vorteil: Wenn man sich einmal angemeldet hat, geht es wirklich schnell und einfach. Mit ein bisschen "Geschick" kann man sogar andere Schriften aus dem Google CSS API-Fundus einbinden. Hat wirklich super geklappt, ich bin zu 99 % zufrieden mit dem neuen Look meines Shops. Einzig das Lightbox-Herz würde ich gerne von gelb in eine andere Farbe "umfärben". Wie das geht, habe ich bis jetzt noch nicht herausgefunden. Aber vielleicht gibt es ja einen kleinen Tipp ...

  • avatar

    Martin Wandelt am 10.06.2020  

    Bei dem neuen Hilfeartikel waren leider die Berechtigungen falsch gesetzt, deshalb ließ er sich nicht aufrufen. Das ist nun behoben. Die Frage zum Lightbox-Herz würde ich lieber dort als hier beantworten, da sie ja thematisch zum responsiven Design gehört. Darum wäre es gut, wenn die Frage dort noch einmal wiederholt würde.

  • Um eine Antwort zu diesem Beitrag zu schreiben, müssen Sie sich einloggen.