Inhalte aufrufen

Profilbild
- - - - -

Hintergrundbild und Schriftarten im Shop

hintergrundbild schriftarten smartstore.net

  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
21 Antworten zu diesem Thema

#1 bridget

bridget

    Benutzer

  • Members
  • PunktPunktPunkt
  • 69 Beiträge

Geschrieben: 10 November 2013 - 17:51

Hallo und Guten Abend,
ich möchte ein Hintergrundbild in Smartstore.NET einbinden. Also anstatt Farbe soll eine Grafik im Hintergrund erscheinen. Kann mir jemand einen Tip geben in welchem Script und an welcher Stelle ich da etwas ändern muss?

...und welches Script muss angepasst werden, wenn ich andere Schriftarten einbinden möchte (die ich vorher auf den Werbserver geladen habe). Oder geht das mit Smartstore nicht?

Vielen Dank.
Bridget

#2 Murat Cakir

Murat Cakir

    SmartStore AG

  • Administrators
  • 1118 Beiträge

Geschrieben: 11 November 2013 - 23:58

ich möchte ein Hintergrundbild in Smartstore.NET einbinden. Also anstatt Farbe soll eine Grafik im Hintergrund erscheinen. Kann mir jemand einen Tip geben in welchem Script und an welcher Stelle ich da etwas ändern muss?


Themes/Alpha/Content/site.less > CSS Selektor body.

und welches Script muss angepasst werden, wenn ich andere Schriftarten einbinden möchte

.

Am besten ebenfalls in site.less ganz oben eine gültige @font-face Deklaration hinzufügen (So gehts...)

Murat Cakir
SmartStore AG


#3 bridget

bridget

    Benutzer

  • Members
  • PunktPunktPunkt
  • 69 Beiträge

Geschrieben: 13 November 2013 - 18:45

Vielen Dank. Ich habe die site.less geändert und diesen Code(in rot) eingefügt:

body {
background: url('hintergrund.gif')left top fixed repeat;
background-attachment: fixed;
@bodyBgColor: @var_SiteBackground;
#gradient > .vertical(@bodyBgColor, lighten(@bodyBgColor, 4%));

Das Hintergrundbild habe ich in die root hochgeladen. Im Shop wird mir jedoch kein Hintergrundbild angezeigt. Was habe ich falsch gemacht?

Danke für den Tip mit den Schriften, muss das noch in einer ruhigen Stunde probieren.
Gruß
Bridget

#4 Murat Cakir

Murat Cakir

    SmartStore AG

  • Administrators
  • 1118 Beiträge

Geschrieben: 13 November 2013 - 19:05

Das Problem ist:

#gradient > .vertical(@bodyBgColor, lighten(@bodyBgColor, 4%));

Schmeiß das raus oder kommentiere es aus. Wenn du's drin lässt, muss dein Code NACH diesem kommen.

Murat Cakir
SmartStore AG


#5 Gasmen

Gasmen

    Erfahrener Benutzer

  • Members
  • 487 Beiträge

Geschrieben: 24 November 2013 - 21:17

Vielen Dank. Ich habe die site.less geändert und diesen Code(in rot) eingefügt:

body {
background: url('hintergrund.gif')left top fixed repeat;
background-attachment: fixed;
@bodyBgColor: @var_SiteBackground;
#gradient > .vertical(@bodyBgColor, lighten(@bodyBgColor, 4%));

Das Hintergrundbild habe ich in die root hochgeladen. Im Shop wird mir jedoch kein Hintergrundbild angezeigt. Was habe ich falsch gemacht?

Danke für den Tip mit den Schriften, muss das noch in einer ruhigen Stunde probieren.
Gruß
Bridget


Hallo Bridget,
hat Das bei dir jetzt geklappt?

Gruss Dani

https://www.rc-racearena.ch/
Ich arbeite nur noch mit Smartstore Net. :D


#6 aby

aby

    Neuer Benutzer

  • Members
  • 127 Beiträge

Geschrieben: 24 March 2014 - 14:51

Ich habe die Grafik wie folgt in der site.less eingebunden:

#page {
	background-image: url(images/shop-background.png);
	background-size: cover;
	background-attachment: fixed;
/*	background-position: 10px 100px; */
	background-repeat: no-repeat;
}
 

So kann der Farbverlauf des Hintergrunds bestehen bleiben. Das Hintergrund-Bild muss im Theme-Unterordner "images" gespeichert werden. 

#content {
    background-color: @bodyBackground;
    .box-shadow(~'0 0 15px rgba(0,0,0, .15), 0 10px 6px -10px rgba(0,0,0, .4)');
    padding: 0 0;
    z-index: 2;

     opacity: 0.92;       /* modern browser */  
    -moz-opacity: 0.92;  /* older Mozilla browser */  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=92)"; /* IE8 in Standard Compliant Mode */  
    filter:alpha(opacity=92); /* IE5.x -7.0 */  
}

Viel Spaß damit

Thomas


  • MediArt gefällt das

Schöne Grüße

Thomas

------

Softwareentwicklung & Webdesign und Webentwicklung (>> aktuelles SmartStore.net-Projekt: http://www.vw-t3-bus-shop.de/ >> Administration und viele manuelle Anpassungen)

 

#7 Chris_tian

Chris_tian

    Senior Benutzer

  • Members
  • 1017 Beiträge

Geschrieben: 22 November 2014 - 13:56

Wie bekomme ich die Transparenz vom Shop weg?

 

*EDIT* habs schon  :rolleyes:


CS BikeWear


#8 Chris_tian

Chris_tian

    Senior Benutzer

  • Members
  • 1017 Beiträge

Geschrieben: 22 November 2014 - 14:08

Und wie bekommt man für den Zweitshop ein anderes Bild? Das wäre sehr wichtig, beim Favicon geht es ja.

 

Grüße

Christian


CS BikeWear


#9 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3498 Beiträge

Geschrieben: 05 December 2014 - 12:24

Hi,

 

seit SmartStore.NET 2.1 sollten Änderungen in der Datei user.less vorgenommen werden. Diese wird von zukünftigen Updates

dann nicht mehr überschrieben. So kann die site.less bei Updates gefahrlos aktualisiert werden.

 

Ein Shop in einer Multistore Umbegung kann über die ID des HTML-Body angepasst werden.

Die ID kann hier vergeben werden:

 

Admin->Konfiguration->Shops->Shop->ID des HTML-Body

 

Gibst du hier z.B. mein-zweitshop an, kannst über folgende Deklaration den Hintergrund der Seite ändern.

body#mein-zweitshop{
   background: #000;
}

MfG


Michael Herzog
Smartstore AG


#10 Chris_tian

Chris_tian

    Senior Benutzer

  • Members
  • 1017 Beiträge

Geschrieben: 10 December 2014 - 18:39

Hi,

 

seit SmartStore.NET 2.1 sollten Änderungen in der Datei user.less vorgenommen werden. Diese wird von zukünftigen Updates

dann nicht mehr überschrieben. So kann die site.less bei Updates gefahrlos aktualisiert werden.

 

Ein Shop in einer Multistore Umbegung kann über die ID des HTML-Body angepasst werden.

Die ID kann hier vergeben werden:

 

Admin->Konfiguration->Shops->Shop->ID des HTML-Body

 

Gibst du hier z.B. mein-zweitshop an, kannst über folgende Deklaration den Hintergrund der Seite ändern.

body#mein-zweitshop {
   background: #000;
}

MfG

 

Mit welchem Code, kann ich ein Hintergrundbild nach diesem Vorbild einbauen?

 

#page {
    background-image: url(images/shop-background.png);
    background-size: cover;
    background-attachment: fixed;
/*    background-position: 10px 100px; */
    background-repeat: no-repeat;
}

 

 


  • MediArt gefällt das

CS BikeWear


#11 SUMTE

SUMTE

    Erfahrener Benutzer

  • Members
  • 258 Beiträge

Geschrieben: 23 January 2015 - 21:49

Hallo,

wäre jemand einmal so nett, eine komplette Anleitung (Schritt für Schritt) für das Hintergrundbild zu erstellen? Bei SM6 habe ich das ja noch hinbekommen doch bei NET scheitere ich leider. Wäre klasse wenn jemand mal vernünftig erklären könnte.

 

Gruß Dirk



#12 Gasmen

Gasmen

    Erfahrener Benutzer

  • Members
  • 487 Beiträge

Geschrieben: 23 January 2015 - 23:44

folgenden Code in die Datei "user.less" im Verzeichnis "Themes/Alpha/Content"
 

body {
background-image: url('images/ihr-hintergrundbild.jpg');
background-repeat: repeat-x;
background-position: left 200px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}


https://www.rc-racearena.ch/
Ich arbeite nur noch mit Smartstore Net. :D


#13 SUMTE

SUMTE

    Erfahrener Benutzer

  • Members
  • 258 Beiträge

Geschrieben: 24 January 2015 - 17:56

Hallo Dani,

danke für den Tipp! Hat hervorragend funktioniert www.liegerad.net Der Shop ist zwar noch nicht ganz fertig, doch langsam wird es  :)



#14 grotec

grotec

    Benutzer

  • Members
  • PunktPunktPunkt
  • 102 Beiträge

Geschrieben: 28 January 2015 - 16:11

Moin,

 

habs gerade geteste - funktioniert bei uns leider nicht.

 

ciao

 

Harry



#15 Wolfgang Schmerge

Wolfgang Schmerge

    V.I.P

  • Members
  • 2454 Beiträge

Geschrieben: 28 January 2015 - 17:03

Hallo Harry,

 

was funktioniert nicht?

Gibt es eine Fehlermeldung?

Wie sieht der Inhalt deiner user.less Datei aus?

 

Liebe Grüße

 

Wolfgang


Shopbetreiber benötigen Ihre Hilfe! Bewerten Sie jetzt Smartstore auf Capterra.
Als Dankeschön erhalten Sie 20 Euro für Ihren nächsten Kauf im Marketplace.
Smartstore bewerten


Bleibt gesund!

Viele zusätzliche Smartstore Plugins gibt es im MARKETPLACE:
http://community.sma...dex.php?/files/

Hier geht es zu den Smartstore Videos:
Smartstore.NET Youtube-Channel

Die deutsche Smartstore Online-Dokumentation gibt es hier:
https://smartstore.a...iew?mode=global
In dem folgenden BLOG findet man interessante Tipps & Tricks zum Thema "Smartstore":
http://community.sma...t-tipps-tricks/

#16 grotec

grotec

    Benutzer

  • Members
  • PunktPunktPunkt
  • 102 Beiträge

Geschrieben: 28 January 2015 - 17:43

Hintergrundbild wird nicht angezeigt - keine Fehlermeldung - user.less ist bis auf zwei Zeilen Kommentar leer.

 

ciao

 

Harry



#17 Wolfgang Schmerge

Wolfgang Schmerge

    V.I.P

  • Members
  • 2454 Beiträge

Geschrieben: 28 January 2015 - 17:46

Hallo Harry,

 

dann packe doch den folgenden Code in die user.less:

 

body {
background-image: url('images/ihr-hintergrundbild.jpg');
background-repeat: repeat-x;
background-position: left 200px;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

 

Das Hintergrundbild muss du dann in das Theme-Verzeichnis in den "images" Ordner packen.

 

Liebe Grüße

 

Wolfgang


Shopbetreiber benötigen Ihre Hilfe! Bewerten Sie jetzt Smartstore auf Capterra.
Als Dankeschön erhalten Sie 20 Euro für Ihren nächsten Kauf im Marketplace.
Smartstore bewerten


Bleibt gesund!

Viele zusätzliche Smartstore Plugins gibt es im MARKETPLACE:
http://community.sma...dex.php?/files/

Hier geht es zu den Smartstore Videos:
Smartstore.NET Youtube-Channel

Die deutsche Smartstore Online-Dokumentation gibt es hier:
https://smartstore.a...iew?mode=global
In dem folgenden BLOG findet man interessante Tipps & Tricks zum Thema "Smartstore":
http://community.sma...t-tipps-tricks/

#18 grotec

grotec

    Benutzer

  • Members
  • PunktPunktPunkt
  • 102 Beiträge

Geschrieben: 29 January 2015 - 16:38

Danke - hab's hinbekommen.

 

ciao

 

Harry



#19 Chris_tian

Chris_tian

    Senior Benutzer

  • Members
  • 1017 Beiträge

Geschrieben: 17 February 2015 - 15:16

Und wie kann ich die Schriftfarben im Header und footer anpassen? (startseite/neu im shop/kontakt/rechtshinweis usw.)

 

Diese kann man mit dem aktuellen Hintergrundbild nicht mehr erkennen.


CS BikeWear


#20 Wolfgang Schmerge

Wolfgang Schmerge

    V.I.P

  • Members
  • 2454 Beiträge

Geschrieben: 18 February 2015 - 17:40

Hallo Christian,

 

packe mal bitte die folgenden Codes in die user.less:

 

Für die obere Navigation:

 

#nav-home li a {
    color: #08c;
    text-shadow: 0 1px 0 #fff;    
}

Für den Hinweis im Footer "alle Preise inkl. zzgl."

 

.footer-disclaimer {
    color: #a4a8ab;
}

 

Für den Hinweis im Footer "Versandkosten"

.footer-disclaimer a {
    color: #fff;
}

 

Einfach mit den gewünschten Farbwerten ausprobieren.

Sollten die Änderungen nicht übernommen werden setze jeweils ein "!important" hinter die Farbe.

 

Z.B.

 

.footer-disclaimer a {
    color: #fff !important;
}

 

Liebe Grüße

 

Wolfgang


Shopbetreiber benötigen Ihre Hilfe! Bewerten Sie jetzt Smartstore auf Capterra.
Als Dankeschön erhalten Sie 20 Euro für Ihren nächsten Kauf im Marketplace.
Smartstore bewerten


Bleibt gesund!

Viele zusätzliche Smartstore Plugins gibt es im MARKETPLACE:
http://community.sma...dex.php?/files/

Hier geht es zu den Smartstore Videos:
Smartstore.NET Youtube-Channel

Die deutsche Smartstore Online-Dokumentation gibt es hier:
https://smartstore.a...iew?mode=global
In dem folgenden BLOG findet man interessante Tipps & Tricks zum Thema "Smartstore":
http://community.sma...t-tipps-tricks/


Auch markiert mit einem oder mehrerer dieser Schlüsselwörter: hintergrundbild, schriftarten, smartstore.net