Plugin/Boxen Layout

[NilsK]

Hallo,

aus dem Buch habe ich ein Plugin abgeschrieben, um Lieferdienste updatesicher anzeigen zu können. Hat soweit alles funktioniert, nur mit zwei Sachen komme ich nicht weiter, bzw. habe nichts gefunden:

1. Wie kann ich nun einen Abstand zwischen die Bilder bekommen?

2. Wie bekomme ich den Rand um die Box weg (ist wie bei xt_grid die Artikelumrandung)?

Bin dankbar für jede Hilfe (hier finde ich nichts).

Herzliche Grüße

Nils

PS: Lösung zu 2.: hier habe ich aus der box_xy.html ein class="box" entfernt, nun ist der Rahmen weg (ich hoffe, es ist richtig, da ich die Programmierung nicht kann ).

[[email protected]]

2 Sachen die ich / wir dazu haben / wissen müssten:

1. Benutzt du das xt_grid template? (soweit ich das verstanden habe ja aber dennoch nicht 100% klar)

2. Poste doch mal deinen html / smarty code

dann helf ich gerne weiter, ich habe das buch nämlich nicht, daher kann ich nicht nachschauen ;-)

[NilsK]

Hi,

genau, 4.1.10 mit xt_grid-Template.

Da ein Teil der Buchmaterialien ja frei erhältlich ist, sollte es kein Problem sein, wenn ich es hier poste, kann aber jeder selbst unter dem Link abrufen (könnte es auch xtc schicken):

https://www.galileo-press.de/xtcommerce-4_2997/

--> Buchmaterialien (Kapitel 17)

Struktur des Plugins

- Ordner "boxes" mit Datei "xt_boxshipping.php"

<?php

// Kein direkten Aufruf der Datei erlauben

defined('_VALID_CALL') or die('Direct Access is not allowed.');

// Wurde eine id uebergeben?

if($params['box_id']) {

$box_id = $params['box_id'];

} else {

// wenn nicht uebergeben, verwende box_shipping_default

$box_id = 'box_shipping_default' ;

}

// Uebergabe der Bildnamen und Parameter an das Template

$tpl_data = array('bild1'=> XT_BOXSHIPPING_BILD1, // Bild 1

'bild2'=> XT_BOXSHIPPING_BILD2, // Bild 2

'bild3'=> XT_BOXSHIPPING_BILD3, // Bild 3

'box_id'=>$box_id ); // Id des Box-Bodys

// Boxenausgabe aktivieren

$show_box = true;

?>

- Ordner "installer" mit Datei "xt_boxshipping.xml"

<?xml version="1.0" encoding="utf8"?>

<xtcommerceplugin>

<title>Shipping Box</title>

<version>1.0.0</version>

<code>xt_boxshipping</code>

<url>http://www.xt-commerce.com</url>

<type>template</type>

<configuration>

<config>

<key>XT_BOXSHIPPING_BILD1</key>

<value></value>

<de>

<title>Erstes Bild</title>

</de>

<en>

<title>First Picture</title>

</en>

</config>

<config>

<key>XT_BOXSHIPPING_BILD2</key>

<value></value>

<de>

<title>Zweites Bild</title>

</de>

<en>

<title>Second Picture</title>

</en>

</config>

<config>

<key>XT_BOXSHIPPING_BILD3</key>

<value></value>

<de>

<title>Zweites Bild</title>

</de>

<en>

<title>Second Picture</title>

</en>

</config>

</configuration>

<language_content>

<phrase>

<key>HEADER_BOX_SHIPPING</key>

<class>store</class>

<de>

<value>Versand</value>

</de>

<en>

<value>Shipping</value>

</en>

</phrase>

</language_content>

</xtcommerceplugin>

- Ordner "templates" Unterordner "boxes" mit Datei "box_xt_boxshipping.html"

<div class="sidebar-box" id="{$box_id}">

<p class="headline"><a href="{link page='content' id=1}">{txt key=HEADER_BOX_SHIPPING}</a></p>

<div>

<p class="ship-image"><style="padding:10px;">

{img type=m_Shipping alt='DHL' title='DHL' img=$bild1}

{img type=m_Shipping alt='UPS' title='UPS' img=$bild2}

{img type=m_Shipping alt='xyz' title='xyz' img=$bild3}</style>

</p>

</div>

</div>

Ist im Buch alles schön ausführlich erklärt. Danach folgt die Einbindung in die "index.html" vom Grid-Template, Plugin-Aktivierung usw..

Die Abstände der Bilder bekommt man vermutlich über CSS-Code hin? habe ich noch nicht ausprobiert/hinzugefügt, probiere ich die Tage mal aus, aber falls jemand schon was hat oder Tips - bitte einfach einreihen.

Herzliche Grüße

Nils

[[email protected]]

Die Class "box" wegzunehmen war schonmal korrekt.

Also am besten machst du das wahrscheinlich etwa so:

Mach die datei "xt_grid > css > stylesheet.css" auf und erweiterst das css in etwa so (habe es nicht direkt ausprobiert, müsste aber etwa so sein):

.ship-image img {

margin-bottom: 5px;

}

das hängst du am besten zuunterst am css an. Je höher die zahl bei "margin-bottom" desto höher wird der Abstand zum nächsten Element. Du kannst auch ein Abstand zur linken oder rechten Seite hin erzwingen.

Jeweils mit "margin-right, margin-left, margin-top,margin-bottom"... (ist ja selbstsprechend ;-))

Achtung: "margin" wird dir immer einen Abstand zum nächsten Element hin erzwingen und nicht einfach nur zum nächsten Bild. Wenn du also statt "margin-bottom: 5px;" Ein "margin-top: 20px;" benutzen würdest, so würde auch der Abstand des ersten Bildes zum Titel hin um 20px erhöht.

[NilsK]

Hallo,

super, Dankeschön.

Ich war schon nah dran, hatte nur das "img" vergessen:

/* Boxshipping */

.img-ship img {

margin: 0 0 3px 0;

}

Herzliche Grüße

Nils