Trade Republic - Provisionsfrei Aktien handeln
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Responsive Template für Modified

    p3e

    • Experte
    • Beiträge: 2.395
    Re: Responsive Template für Modified
    Antwort #60 am: 13. April 2017, 19:04:42
    Mit winmerge kannst du auch ganze Verzeichnis inkl Unterordner vergleichen.
    Trade Republic - Provisionsfrei Aktien handeln

    Onlineshopper

    • Fördermitglied
    • Beiträge: 948
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #61 am: 13. April 2017, 20:20:06
    Ich kämpf mich da gerade durch. Ganz schön aufwändige Arbeit, wenn man die ganzen Module da umfriem
    eln muss.

    Timm

    • Fördermitglied
    • Beiträge: 6.342
    Re: Responsive Template für Modified
    Antwort #62 am: 09. Juli 2017, 22:40:15
    @torsten
    Für kommende updates des Templates fände ich es gut, wenn die Icons möglichst einheitlich aus Font awesome generiert werden.

    Im Moment ist es zB so, dass der Merkzettel Stern in der Navigationsleiste aus Font awesome kommt, aber bei den artikeldetailseiten als Grafik aus dem img Ordner im Template geladen wird.

    Das macht es aber schwieriger, es einheitlich zu ändern, wenn man zB statt dem Stern ein Herz nehmen möchte, aber das auch auf allen Seiten im Shop.

    Dazu kommen die icons für drucken und Rezensionen, die als Image Datei im Template hinterlegt sind. Die gibt es genauso bei Font awesome.

    Gruß Timm

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #63 am: 09. Juli 2017, 22:56:26
    Das kann man sich doch selbst umarbeiten, wenn man es lieber einheitlich auf Font-Awesome-Basis handeln möchte.  :)

    Bei nachfolgenden Template-Updates übernimmt man doch bestenfalls eh nur die Änderungen aus dem Update-Paket, sofern man nicht ausschließlich CSS-Änderungen vorgenommen hat, wie ich es bei vielen Leuten sehe, die zwar das Responsive Template gekauft haben, aber nicht mehr als ein paar Farben und das Logo geändert haben.  :mhhh: Da bekommt man so eine tolle Grundvorlage und nutzt ihr Potential nicht... Aber das rutscht gerade ins OffTopic. :D

    Timm

    • Fördermitglied
    • Beiträge: 6.342
    Re: Responsive Template für Modified
    Antwort #64 am: 10. Juli 2017, 11:04:29
    Na klar kann man sich alles selbst anpassen. Aber es wär doch schön, wenn es gleich aufgebaut wäre. Es gibt m.M. nach keinen Grund für ein und dasselbe Zeichen (Merkzettelstern), zwei Varianten zu nutzen. Und wenn beides schon auf font awesome basis drin wäre, dann müsste man nur den Namen für das Zeichen ändern. Das wäre viel einfacher. So muss ich mir jetzt an anderen Stellen raussuchen, wie das Zeichen auf fa Basis in der Artikelansicht eingebaut wird. Das mag für dich kleinkram sein, aber es gibt ja auch shopbetreiber, die das selbst machen wollen und nicht das Verständnis dafür haben.

    Und nur für das Zeichen dann den Programmierer seines Vertrauens zu beauftragen, bringt doch keinem was. Wird für den Programmieren schwer das einzeln abzurechnen, wenn man sonst immer für andere Sachen Geld nimmt und das dann als Service seinen Kunden anbieten muss.

    Das man beim update nur die Änderungen übernimmt ist auch klar. Für diejenigen, die es sich dann schon umgebastelt haben nützt es dann auch nichts. Aber halt denen, die das Template neu verbauen.

    Auch fürs Team wäre es doch einfacher dann mögliche modernere Zeichen aus einer neuen fontawesome version beim update einzusetzen, weil sie davon nicht extra eine Grafik erstellen müssten.

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #65 am: 10. Juli 2017, 12:03:59
    Du hast natürlich nicht unrecht. Nur für jemanden, der das gar nicht ändern möchte, ist sowas nebensächlich. ;-)

    Ich gebe mal ein Beispiel vor, wie man den Stern mit Font-Awesome ersetzt, damit du/ihr seht, dass es gar nicht so schwer ist. :-)

    Sucht in der stylesheet.css folgende Klasse:

    Code: CSS  [Auswählen]
    ul.pd_iconlist li.wishlist {
      background: transparent url(img/icon_pd_iconlist_wishlist.png) no-repeat 8px 5px;
      cursor:pointer;
      border-bottom:1px solid #eee;
    }

    und ersetzt sie wie folgt:

    Code: CSS  [Auswählen]
    ul.pd_iconlist li.wishlist {
      /*background: transparent url(img/icon_pd_iconlist_wishlist.png) no-repeat 8px 5px;*/
      cursor:pointer;
      border-bottom:1px solid #eee;
      position:relative;
    }
    ul.pd_iconlist li.wishlist:before {
      font-family: FontAwesome;
      content: '\f005';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }

    Ergebnis:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Das kann man nun für alle Listenpunkte wiederholen. Die Cheat-Sheets findet ihr hier.

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #66 am: 10. Juli 2017, 12:18:33
    Hier einmal der ganze CSS-Block:

    Code: CSS  [Auswählen]
    ul.pd_iconlist li.print {
      position:relative;
    }
    ul.pd_iconlist li.print:before {
      font-family: FontAwesome;
      content: '\f02f';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }  
    ul.pd_iconlist li.vote {
      position:relative;
    }
    ul.pd_iconlist li.vote:before {
      font-family: FontAwesome;
      content: '\f075';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }
    ul.pd_iconlist li.express {
      position:relative;
    }
    ul.pd_iconlist li.express:before {
      font-family: FontAwesome;
      content: '\f218';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }
    ul.pd_iconlist li.wishlist {
      cursor:pointer;
      border-bottom:1px solid #eee;
      position:relative;
    }
    ul.pd_iconlist li.wishlist:before {
      font-family: FontAwesome;
      content: '\f005';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }

    Ergebnis:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    hpzeller

    • Experte
    • Beiträge: 4.130
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #67 am: 10. Juli 2017, 12:31:12
    Hallo Timm,

    sehe es auch so wie du, aber solltest du deinen Wunsch nicht besser beim Lieferanten des Templates anstatt hier im Forum anbringen?

    Gruss
    Hanspeter

    michaelEberl

    • Mitglied
    • Beiträge: 111
    Re: Responsive Template für Modified
    Antwort #68 am: 10. Juli 2017, 12:51:58
    Gibt es bestimmte Vorteile alles in die CSS datei zu machen?

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #69 am: 10. Juli 2017, 12:54:30
    • Es lässt sich alles zentral an einer Stelle ändern, ohne Grafiken austauschen zu müssen.
    • Es steht die gesamte Font-Awesome-Bibliothek zur Verfügung, was das Erstellen von Grafiken überflüssig macht.
    • Es werden weniger Grafiken beim Seitenaufbau geladen.

    Timm

    • Fördermitglied
    • Beiträge: 6.342
    Re: Responsive Template für Modified
    Antwort #70 am: 10. Juli 2017, 13:32:34
    @awids
    Vielen Dank, das klappt wunderbar. Hab auch nichts anderes erwartet  :-D

    Gibt es eine Möglichkeit das nicht als Cheatsheetnummer, sondern als fa fa-star oder fa fa-heart anzugeben, damit es genauso ist wie in der box_wishlist.html? Fände ich noch einheitlicher und einfacher, wenn man die shopdateien durchsuchen lässt, wo der Wert überall verwendet wird.

    Hab mehrere Varianten probiert, aber immer nur Text statt des Symbols erhalten :doh:

    Hallo Timm,

    sehe es auch so wie du, aber solltest du deinen Wunsch nicht besser beim Lieferanten des Templates anstatt hier im Forum anbringen?

    Gruss
    Hanspeter
    Lieferant des Templates und Forumbetreiber sind in diesem Fall die selbe Person und ich hab auch auf "Moderator informieren" geklickt  :thumbs:

    • Es lässt sich alles zentral an einer Stelle ändern, ohne Grafiken austauschen zu müssen.
    • Es steht die gesamte Font-Awesome-Bibliothek zur Verfügung, was das Erstellen von Grafiken überflüssig macht.
    • Es werden weniger Grafiken beim Seitenaufbau geladen.
    4. Die Symbole sind moderner, kräftiger in der Farbe und vor allem schärfer.

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #71 am: 10. Juli 2017, 13:46:46
    @awids
    Vielen Dank, das klappt wunderbar. Hab auch nichts anderes erwartet  :D

    Danke für die Blumen.  :thumbs:

    Gibt es eine Möglichkeit das nicht als Cheatsheetnummer, sondern als fa fa-star oder fa fa-heart anzugeben, damit es genauso ist wie in der box_wishlist.html?

    Wenn es da eine andere Möglichkeit geben sollte, hab ich sie gerade nicht auf dem Schirm. Wenn man das in die Sprachdateien einträgt, bekommt man entweder keine Anzeige oder den gesamten i-Tag der FontAwesome-Klasse zu Gesicht. Finde aber nicht, dass meine genannte Variante so viel Mehraufwand bedeutet. Die Icons passt man doch i. d. R. nicht mehr als einmal an?!  :mhhh:

    Timm

    • Fördermitglied
    • Beiträge: 6.342
    Re: Responsive Template für Modified
    Antwort #72 am: 10. Juli 2017, 13:56:24
    Finde aber nicht, dass meine genannte Variante so viel Mehraufwand bedeutet. Die Icons passt man doch i. d. R. nicht mehr als einmal an?!  :mhhh:
    Stimmt auch wieder. Die Idee war nur meinem zwanghaften Ordnungssinn geschuldet. :oops:

    [ Für Gäste sind keine Dateianhänge sichtbar ]
    I´m loving it.

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.181
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #73 am: 10. Juli 2017, 14:00:59
    Hier einmal der ganze CSS-Block:

    Code: CSS  [Auswählen]
    ul.pd_iconlist li.print {
      position:relative;
    }
    ul.pd_iconlist li.print:before {
      font-family: FontAwesome;
      content: '\f02f';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }  
    ul.pd_iconlist li.vote {
      position:relative;
    }
    ul.pd_iconlist li.vote:before {
      font-family: FontAwesome;
      content: '\f075';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }
    ul.pd_iconlist li.express {
      position:relative;
    }
    ul.pd_iconlist li.express:before {
      font-family: FontAwesome;
      content: '\f218';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }
    ul.pd_iconlist li.wishlist {
      cursor:pointer;
      border-bottom:1px solid #eee;
      position:relative;
    }
    ul.pd_iconlist li.wishlist:before {
      font-family: FontAwesome;
      content: '\f005';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
    }
    [...]

    Verbesserungsvorschlag:

    Code: CSS  [Auswählen]
    ul.pd_iconlist li.print {
      position:relative;
    }
    ul.pd_iconlist li.print:before {
      font-family: FontAwesome;
      content: '\f02f';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
      color:#858585;
    }  
    ul.pd_iconlist li.vote {
      position:relative;
    }
    ul.pd_iconlist li.vote:before {
      font-family: FontAwesome;
      content: '\f164';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
      color:#858585;
    }
    ul.pd_iconlist li.express {
      position:relative;
    }
    ul.pd_iconlist li.express:before {
      font-family: FontAwesome;
      content: '\f218';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
      color:#858585;
    }
    ul.pd_iconlist li.wishlist {
      cursor:pointer;
      border-bottom:1px solid #eee;
      position:relative;
    }
    ul.pd_iconlist li.wishlist:before {
      font-family: FontAwesome;
      content: '\f005';
      font-size: 16px;
      position:absolute;
      top:5px;
      left:8px;
      color:#858585;
    }

    Grüße

    Torsten

    awids

    • Experte
    • Beiträge: 3.789
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #74 am: 10. Juli 2017, 14:16:45
    Ich würde es nicht Verbesserungsvorschlag nennen.  :mhhh: Dass die Farbe nicht geändert wird, war in meinem Beispiel ja so gewollt. ;-) Drum nennen wir es doch einfach eine weitere mögliche Option. :D
    Templateshop - Eine große Auswahl an neuen und modernen Templates für die modified eCommerce Shopsoftware
    1 Antworten
    3110 Aufrufe
    24. April 2018, 09:36:44 von lukass
    48 Antworten
    40578 Aufrufe
    18. Juni 2017, 11:01:06 von Timm
    10 Antworten
    8896 Aufrufe
    28. November 2018, 23:00:26 von cayuco
    3 Antworten
    1928 Aufrufe
    21. Juli 2018, 14:02:31 von Tomcraft