Hintergrund vom Shop ändern

[Badner28]

Hallo Leute ,

Ich bin am verzweifeln.... Ich habe fast alles alleine hinbekommen aber nun brauche ich eure Hilfe .

Mein anliegen an euch ist :

Hintergrund ändern vom Shop ( Hintergrund ist ja Weiß )

Wie kann ich das Shopsoftware Logo gegen ein Banner ersetzen ? Der oben über den Shop ist dann .

Wenn geht für halb Anfänger schreiben oder kurzes Video wo ich schauen kann .

DANKE Euch

Linkback: https://www.modified-shop.org/forum/index.php?topic=37643.0

[awids]

Schau mal unten auf der Seite bei ähnlichen Beiträgen nach. Das sind Anfängerfragen, die hier mehrfach gestellt und beantwortet wurden. Es liegt in deiner eigenen Verantwortung, dir wenigstens Grundkenntnisse in CSS anzueignen. Bei Dingen, wo du dann nicht weiter kommst, hilft dir die gerne die Community. Aber ein bisschen Eigeninitiative setzen wir schon voraus.

[Badner28]

Dann hat sich meine Frage erledigt . Und Thema kann geschlossen werden . Da ich mir das zum 10 mal angeschaut habe ,  und weiss immer noch nicht wo ich anfangen sollte .

Deswegen war mein Letzter ausweg hier Hilfe zu finden . Aber leider auch keine Hilfe für mich dein schreiben .
Für mich ist das was 2 Linke Hände angeht . Dann muss ich jemand beauftragen .

Thema kann geschlossen werden .

[hpzeller]

Hallo Badner28

wenn du das Template tpl_modified verwendest, dann kannst Du die Hintergrundfarbe wie folgt ändern.

Wenn du in der Datei '/templates/tpl_modified/stylesheet.css' ab ca. Zeile 123 in folgendem Code

Code: CSS  [Auswählen]

body {
  font-family: 'arimoregular', sans-serif;
  font-weight: normal;
  font-size:13px;
  background-color:#fff;
  color:#555;
  line-height:19px;
  min-width:1000px;
}

diese Regel

Code: CSS  [Auswählen]

background-color:#fff;

zum Beispiel so abänderst

Code: CSS  [Auswählen]

background-color:#ff0000;

dann ist der Hintergrund nachher rot.

Gruss
Hanspeter

[Tomcraft]

Du hattest den Beitrag gemeldet und darum gebeten, dass man dafür mal ein Video erstellt. Nett Idee, aber wo fängt man an und wo hört man auf? Ich denke das ist eher was für ein Forum, wo man die Codes per Copy & Paste auch verwenden kann.

Die Fragestellung wurde dir ja nun von hpzeller beantwortet und bevor die Frage aufkommt, womit man solche Dateien bearbeitet, hier der passende Link: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Es ist nicht Ziel unseres Forums auch noch Hilfe in HTML, CSS & PHP Programmierung zu geben. Wer selber am Shop basteln will, der muss ein gewisses Maß an Grundwissen mitbringen oder sich in entsprechenden anderen Foren weiterbilden.

Grüße

Torsten

Grüße

Torsten

[Badner28]

Hallo Badner28

wenn du das Template tpl_modified verwendest, dann kannst Du die Hintergrundfarbe wie folgt ändern.

Wenn du in der Datei '/templates/tpl_modified/stylesheet.css' ab ca. Zeile 123 in folgendem Code

Code: CSS  [Auswählen]

body {
  font-family: 'arimoregular', sans-serif;
  font-weight: normal;
  font-size:13px;
  background-color:#fff;
  color:#555;
  line-height:19px;
  min-width:1000px;
}

diese Regel

Code: CSS  [Auswählen]

background-color:#fff;

zum Beispiel so abänderst

Code: CSS  [Auswählen]

background-color:#ff0000;

dann ist der Hintergrund nachher rot.
[...]

Danke dir Hans Peter ......

Ich habe das mit der Hintergrundfarbe die ich wollte nun hingebracht .
Habe die Farbe von dieser Seite selbst zusammengestellt ( http://www.rechnr.de/farbenrechner )

Aber ein Problem habe ich jetzt noch .

Wie kann ich das Standart Logo wo links oben im Shop ist ändern ?
Und dafür ein Banner über den Shop machen ?

Habe die zeile glaube ich gefunden :

Code: CSS  [Auswählen]

#logo {
  float:left;
  width:235px;
  height:75px;
  background: transparent url(img/logo_head.png) no-repeat;

Wäre sehr dankbar wenn ihr mir da noch helfen könnt .

Ich als Anfänger , bin selbst erstaunt wie ich das alles schick hingebracht habe .

[hpzeller]

Also ich weiss nicht genau wo Du den Banner haben willst, aber Du könntest mal folgendes machen.

In der Datei '/templates/tpl_modified/stylesheet.css' ab ca. Zeile 304 den folgenden Code

Code: CSS  [Auswählen]

#layout_logo {
  background-color:#ffffff;
  height:75px;
  /*overflow:hidden;*/
  padding:10px 0px;
  width:1000px;
  margin: 0px auto;
}
#logo {
  float:left;
  width:235px;
  height:75px;
  background: transparent url(img/logo_head.png) no-repeat;
}
#logo a {
  display:block;
  width:235px;
  height:75px;
  outline:none;
  text-decoration:none;
}

mit diesem Code ersetzen

Code: CSS  [Auswählen]

#layout_logo {
  background-color:#ffffff;
  height:75px;
  /*overflow:hidden;*/
  padding:10px 0px;
  width:1000px;
  margin: 0px auto;
}
#layout_logo_banner {
  background-color:#ffffff;
  height:75px;
  /*overflow:hidden;*/
  padding:10px 0px;
  width:1000px;
  margin: 0px auto;
}
#logo {
  float:left;
  width:100%;
  height:75px;
  background: transparent url(img/logo_head.png) no-repeat center center;
}
#logo a {
  display:block;
  height:75px;
  outline:none;
  text-decoration:none;
}

und in der Datei 'templates/tpl_modified/index.html' ab ca. Zeile 23 den folgenden Code

Code: XML  [Auswählen]

<div id="layout_logo">
  <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}">&nbsp;</a></div>
  {if isset($box_SEARCH)}<div id="search">{$box_SEARCH}</div>{/if}
</div>

mit diesem Code ersetzen

Code: XML  [Auswählen]

<div id="layout_logo_banner">
  <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}">&nbsp;</a></div>
</div>
<div id="layout_logo">
  {if isset($box_SEARCH)}<div id="search">{$box_SEARCH}</div>{/if}
</div>

Gruss
Hanspeter

[Badner28]

Hallo Peter  ,

Erstmal danke nochmal für die Hilfe im Hintergrund .

Ich habe ihm Anhang ein Word Datei erstellt ,  mit Bild und wie ich ihn gerne haben möchte .

Und wo genau muss ich mein Banner hochladen , um ihn später dann einfügen zu können .

[hpzeller]

Ich denke Du machst erst mal die Änderungen die ich dir gepostet habe.
Dann dieses Bild -> 'templates/tpl_modified/img/logo_head.png' musst Du durch dein Bannerbild ersetzen.
Danach sehen wir weiter.

Sollte danach etwa so aussehen.

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

Gruss
Hanspeter

[hpzeller]

Hallo Badner28,

denke jetzt weiss ich was Du willst, vergiss das was ich oben geschrieben habe und mache stattdessen folgendes.

In der Datei '/templates/tpl_modified/stylesheet.css' am Ende folgenden Code einfügen

Code: CSS  [Auswählen]

#banner_top {
  display: flex;
  align-items: center;
  justify-content: center;
}
#banner_top div{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:#ffffff;
  overflow:hidden;
  width:1000px;
}

und in der Datei 'templates/tpl_modified/index.html' ab ca. Zeile 23 den folgenden Code

Code: XML  [Auswählen]

<div id="layout_logo">
  <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}">&nbsp;</a></div>
  {if isset($box_SEARCH)}<div id="search">{$box_SEARCH}</div>{/if}
</div>

mit diesem Code ersetzen.

Code: XML  [Auswählen]

<div id="layout_logo">
  {* <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}">&nbsp;</a></div> *}
  {if isset($box_SEARCH)}<div id="search">{$box_SEARCH}</div>{/if}
</div>
{if isset($BANNER_TOP)}<div id="banner_top" class="top_banner"><div>{$BANNER_TOP}</div></div>{/if}

Danach kannst Du im Admin unter Hilfsprogramme -> Banner Manager einen neuen Banner mit z.B. dem Titel "Top Banner" und der Eingabe einer neuen Banner-Gruppe "BANNER_TOP" einfügen und dabei deinen Banner durch klicken auf [Dursuchen] von deinem Rechner auf den Server hochladen, siehe Bild.

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

Der Banner wird dann anstelle des Logos auf der ganzen Breite über dem Inhalt des Shops angezeigt, siehe Bild.

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

Gruss
Hanspeter

[Badner28]

Was heißt am ende ? Welchem ende ?

In der Datei '/templates/tpl_modified/stylesheet.css' am Ende folgenden Code einfügen

Das untere habe ich bei Datei 'templates/tpl_modified/index.html' geändert.

wie gesagt nur der oberere abschnitt blicke ich nicht ganz wo ich dies einfügen oder ersetzen muss .

[Timm]

Was heißt am ende ? Welchem ende ?

Wieviele Enden kann eine Seite denn haben? Das ist doch eindeutig.

Wenn du dich ein wenig mit css beschäftigen würdest, wüsstest du, dass es sogar egal ist, wo du es in der stylesheet.css einfügst. Der Übersicht halber ist es aber sinnvoll, deine zusätzlichen Änderungen immer unten anzuhängen, damit man nicht die ganze Datei immer durchsuchen muss.

Bei Stellen, die schon vorgegeben sind, musst du es natürlich dort ändern.

Gruss Timm

[hpzeller]

Was heißt am ende ? Welchem ende ?
[...]

Damit ist das Ende des Dateiinhalts gemeint.
Also wenn du die Datei '/templates/tpl_modified/stylesheet.css' öffnest und runter scrollst findest du am Schluss ab ca. Zeile 4209 folgenden Code

Code: CSS  [Auswählen]

#TB_iframeContent{
         clear:both;
         border:none;
         margin-bottom:5px;margin-top:1px;
}
 

und daran anschliessend fügst Du dann noch diesen Code ein

Code: CSS  [Auswählen]

#banner_top {
  display: flex;
  align-items: center;
  justify-content: center;
}
#banner_top div{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:#ffffff;
  overflow:hidden;
  width:1000px;
}
 

somitt muss also am Ende in der Datei '/templates/tpl_modified/stylesheet.css' folgendes darin stehen.

Code: CSS  [Auswählen]

#TB_iframeContent{
         clear:both;
         border:none;
         margin-bottom:5px;margin-top:1px;
}
#banner_top {
  display: flex;
  align-items: center;
  justify-content: center;
}
#banner_top div{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:#ffffff;
  overflow:hidden;
  width:1000px;
}
 

Gruss
Hanspeter

[Badner28]

Hallo Tim und Danke Peter für die Hilfe .......

 Ich habe es hinbekommen . Aber wie kann ich das obere in weiß löschen und den such Button links an die Seite machen  . Oder den such Button über den Banner zu machen

Nur sieht es jetzt so aus......

Dann habe ich es komplett geschafft ..... Nur dies fehlt noch . Farbe im Hintergrund + Bilder weiss ich nun wie ich dies zu machen habe . Dank eurer Hilfe .

[hpzeller]

Hallo  Badner28,

das kann ich die anbieten.

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

Ersetze in der Datei 'templates/tpl_modified/index.html' ab ca. Zeile 4 den folgenden Code

Code: XML  [Auswählen]

<div id="layout_navbar">
  <div id="layout_navbar_inner">
    {if isset($box_INFOBOX)}<div id="customers_group">{$box_INFOBOX}</div>{/if}
    {if isset($box_LANGUAGES) && $box_LANGUAGES != ''}<div id="languages">{$box_LANGUAGES}</div>{/if}
   <ul class="topnavigation">
     {if isset($account)}
       <li class="first"><a href="{$account}">{#link_account#}</a></li>
     {/if}
     {if isset($smarty.session.customer_id)}
       <li{if !isset($account)} class="first"{/if}><a href="{$logoff}">{#link_logoff#}</a></li>
     {else}
       <li{if !isset($account)} class="first"{/if}><a href="{$create_account}">{#new_customer#}</a></li>
       <li><a href="{$login}">{#link_login#}</a></li>
     {/if}
   </ul>
 </div>
</div>
{* ENDE layout_navbar *}

<div id="layout_logo">
 {* <div id="logo"><a href="{$index}" title="{#link_index#} &bull; {$store_name}">&nbsp;</a></div> *}
  {if isset($box_SEARCH)}<div id="search">{$box_SEARCH}</div>{/if}
</div>
{if isset($BANNER_TOP)}<div id="banner_top" class="top_banner"><div>{$BANNER_TOP}</div></div>{/if}
{* ENDE layout_logo *}
 

mit diesem Code

Code: XML  [Auswählen]

<div id="layout_navbar" style="overflow: visible !important;" >
  <div id="layout_navbar_inner">
    {if isset($box_INFOBOX)}<div id="customers_group">{$box_INFOBOX}</div>{/if}
    {if isset($box_LANGUAGES) && $box_LANGUAGES != ''}<div id="languages">{$box_LANGUAGES}</div>{/if}
   {if isset($box_SEARCH)}<div id="search" style="margin-top: 3px; width: 250px !important;">{$box_SEARCH}</div>{/if}
    <ul class="topnavigation">
      {if isset($account)}
        <li class="first"><a href="{$account}">{#link_account#}</a></li>
      {/if}
      {if isset($smarty.session.customer_id)}
        <li{if !isset($account)} class="first"{/if}><a href="{$logoff}">{#link_logoff#}</a></li>
      {else}
        <li{if !isset($account)} class="first"{/if}><a href="{$create_account}">{#new_customer#}</a></li>
        <li><a href="{$login}">{#link_login#}</a></li>
      {/if}
    </ul>
  </div>
</div>
{* ENDE layout_navbar *}
{if isset($BANNER_TOP)}<div id="banner_top" class="top_banner"><div>{$BANNER_TOP}</div></div>{/if}
 

Gruss
Hanspeter