ANLEITUNG: Content Boxen im Footer

[Tomcraft]

Da die Frage nun schon mehrfach aufkam, habe ich mir mal die Mühe gemacht und es in einer Anleitung zusammengefasst.

Variante 1 (Mit Boxen-Rahmen):

Suche in der "/templates/xtc5/index.html":

Code: PHP  [Auswählen]

    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>

und ersetze mit:

Code: PHP  [Auswählen]

    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>
    <div style="clear:both"></div>
    <div id="footerbox1">{$box_INFORMATION}</div>
    <div id="footerbox2">{$box_CONTENT}</div>
    <div id="footerbox3">{$box_NEWSLETTER}</div>
    <div id="footerbox4">{$box_ADD_QUICKIE}</div>

Füge in der "/templates/xtc5/stylesheet.css" ganz am Ende ein:

Code: CSS  [Auswählen]

#footerbox1, #footerbox2, #footerbox3 {
  width:200px;
  float:left;
  margin-right:58px;
}
#footerbox4 {
  width:200px;
  float:right;
  margin-right:5px;
}

So sieht es dann aus:

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

Wer unten nur 3 Boxen haben möchte der nimmt aus dem "<div id="footerbox"></div>" einfach eine Box raus und erhöht "width:200px;" für #footerbox und #footerbox-right so lange, bis es passt.

Variante 2 (Ohne Boxen-Rahmen):

Suche in der "/templates/xtc5/index.html":

Code: PHP  [Auswählen]

    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>

und ersetze mit:

Code: PHP  [Auswählen]

    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>
<div id="abstand"></div>
<div id="bottom">
  <div id="bottom-divs">
    <!-- Bottom Left -->
    <div id="bottom-left">
      {$box_CONTENT}
    </div>
    <!-- Bottom Mid -->
    <div id="bottom-mid">
      {$box_INFORMATION}
    </div>
    <!-- Bottom Right -->
    <div id="bottom-right">
      {$box_NEWSLETTER}
    </div>
  </div>
</div>

Füge in der "/templates/xtc5/stylesheet.css" ganz am Ende ein:

Code: CSS  [Auswählen]

#abstand {
  background:#FFFFFF none repeat scroll 0 0;
  clear:both;
  height:15px;
}

#bottom {
  background-color:#EDEDED;
  border-color:#CCCCCC;
  border-style:solid;
  border-width:1px 1px 1px;
  clear: both;
  float: left;
  width: 978px;
  height: 100%;
  font-size: 0.9em;
  text-align: left;
  color: #383838;
}
#bottom-divs {
  float: left;
  clear: both;
  margin: 0;
  padding: 0px;
  width: 100%;
}
#bottom-left,
#bottom-mid,
#bottom-right {
  width: 27%;
  padding: 10px 0 20px 60px;
  float: left;
}
#bottom h2 {
  margin: 0 0 10px 0;
  padding: 0 0px;
  font-size: 1.6em;
  color: #004B76;
}
#bottom h2 span {
  color: #1474b4;
}
#bottom ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-top: 1px solid #ccc;
}
#bottom ul li {
  line-height: 26px;
  border-bottom: 1px solid #ccc;
}
#bottom ul li a {
  display: block;
  padding: 0 10px;
  color: #383838;
  text-decoration: none;
  outline: none;
}
#bottom ul li a:hover {
  background: #CCCCCC;
  outline: none;
}
#bottom-sep {
  clear: both;
}
div#bottom h2.boxheader {
  background: none;
}
div#bottom .boxbody {
  background-color: inherit;
  border: none;
  padding: 0px;
  margin: 0px;
}
div#bottom .boxbody ul.contentlist {
  margin: 0px;
}

div#bottom .contentlist a {
  border: none;
}

So sieht es dann aus:

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

Grüße

Torsten

[EDIT Tomcraft 08.02.2011: Screenshot angefügt, Danke an jannemann.]
[EDIT Tomcraft 13.05.2011: Zweite Variante ohne Boxen-Rahmen hinzugefügt.]
[EDIT Tomcraft 20.05.2011: Fehler im Code korrigiert, Danke an mantis für den Hinweis.]

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

[jannemann]

Hallo Torsten,

vielen Dank fürs teilen!
Ich mache davon noch einen Screenshot und lade diesen dann hier hoch.

Schöne Grüße,
Jan

[EDIT Tomcraft 08.02.2011: Screenshot in Beitrag 1 mit angehängt.]

[Tomcraft]

Ja perfekt, vielen Dank!

Grüße

Torsten

[dermarcus72]

Funktioniert super! Vielen Dank für den Tipp!
Ich habe allerdings ein Problem.
Beim Content stehen Listenpunkte und zwar bei AGB, Widerrufsrecht usw.
Wo kann ich die Listenpunkte abschalten... sieht nämlich ziemlich doof aus.

[Tomcraft]

Füge der entsprechenden CSS-Klasse folgendes hinzu:

Code: CSS  [Auswählen]

list-style: none;

Grüße

Torsten

[dermarcus72]

Sorry, das haut leider nicht hin.
.contentlist in der css. habe es da geändert.
Die Listenpunkte bleiben.

[jannemann]

Hast du mal den Browser- und Templatecache geleert?

[Tomcraft]

Hast du bitte mal einen Link zu deinem Shop?

Grüße

Torsten

[dermarcus72]

Der Shop läuft in einer Testebene mit XAMPP.
Werde aber noch mal von vorne beginnen. Muss ja zu schaffen sein.

Melde mich, sobald es geklappt hat und sage dann woran es lag.

Grüsse

[Tomcraft]

Da musst du doch aber nicht gleich neu installieren?!

Das ist doch lediglich eine Sache des Templates.

Grüße

Torsten

[dermarcus72]

Torsten, das ist mir doch schon klar.  
Ich habe das aktuelle Shoptemplate (vom Liveshop) runter geladen und drüber gebügelt.
Jetzt fange ich nochmal an, dieses zu optimieren.

Grüsse

[Tomcraft]

Das klingt schon besser.

Grüße

Torsten

[Spegeli]

Ich hab das bei mir gerade mal so eingebaut und funktioniert auch.
Allerdings würde ich es gerne so haben, dass die Boxen ausserhalb des weisesn Bereichs sind.

Hab hier einen Shop gefunden der da so hat und wollte das auch so haben, finde allerdings den passenden Code nicht.

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

Das ist mein Shop und wie man sieht sind die Boxen im Footer noch im Weißen abschnitt.
Der Hintergrund des Main Contents sollte also unter dem ersten Copyright-Hinweis mit dem grauen Hintergrund aufhören.
  [ Für Gäste sind keine Dateianhänge sichtbar ]

In der index.php habe ich:

Code: PHP  [Auswählen]

include ('includes/application_bottom.php');

gefunden was die Parse Time usw. beinhaltet, aber das ist auch noch im weißen Bereich.

Vielleicht kann mir ja jemand weiter helfen wo ich den Code finde der für "ausserhalb" zuständig ist.

EDIT: Ok hat sich Erledigt. Hab ein bissl an der "index.html" und mit der "stylesheet.css" etwas rumgespielt und nun passt's.

[Tomcraft]

Du brauchst doch lediglich die Seite mit Firebug für Firefox untersuchen und siehst den Code und die zugeordneten Styles, siehe: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Ansonsten kannst du dem <div id="footerbox"> einfach ein "border-top" zuordnen, also beispielsweise:

Code: CSS  [Auswählen]

#footerbox {
    width:200px;
    float:left;
    margin-right:58px;
    border-top:30px solid #CCCCCC;
}
#footerbox-right {
    width:200px;
    float:right;
    margin-right:5px;
    border-top:30px solid #CCCCCC;
}
 

[sv.brueck]

Hi Torsten,

kann es sein, dass in der "Variante 2 (Ohne Boxen-Rahmen)" ein </div> zu viel drin steckt. Denn wenn man den Code für die "index.html" austauscht, wird das Template zerschossen.

Gruß

Sven