jerie.de

CSS3 NavigationBar

admin — Thu, 06 Oct 2011 10:24:41 +0000

For a recent project I created a navigation bar and css only styled buttons. As it is no longer used for the project feel free to use it on your own. It’s still “work in progress” and can be tweaked. But you get the idea.

Annotation:
As I wanted to style the links (a class=”tab-button”) without any additional elements it’s a must have to set the title attribute the same as the link text. You have to play with padding on the .tab-button and .tab-button::before to fit your needs. You can also add a span to the link and use the same css as its used for the .tab-bar (ul = a, li = span).

Markup


	Link 1
	Link 2
	Link 3




Button 1
Button 2

CSS

ul
{
	list-style: none outside none;
}
.tab-bar,
.tab-button
{
	border-radius: 8px;
	overflow: hidden;
	background-image: -moz-linear-gradient(center bottom , #fff 30%, #c6c5c5 75%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #fff),color-stop(0.75, #c6c5c5));
	padding: 3px;
}
.tab-bar li:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}
.tab-bar li:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.tab-button::before,
.tab-button.active::before
{
    content: attr(title);
	position: absolute;
	border-radius: 8px;
	padding: 0 20px;
	top: 3px;
	left: 3px;
}
.tab-bar li
{
	float: left;
	width: 33.333%;
	margin: 0 -1px;
	padding: 10px 0;
}
.tab-bar li,
.tab-button::before,
.tab-button.active::before
{
    border: 1px solid #aeaeae;
    text-align: center;
 	text-shadow: 1px 1px 0 #fff;
	background-image: 	-webkit-gradient(linear,left bottom, left top, color-stop(0, #CCCCCC),color-stop(1, #EEEEEE));
	background-image: 	-moz-linear-gradient(center bottom, #ccc 0%, #eee 100%);
}
.tab-button
{
 	line-height: 2em;
    padding: 5px 20px 19px 28px;
	position: relative;
}

.tab-bar li.active,
.tab-button.active::before
{
    background: none repeat scroll 0 0 #b8b8b8;
    box-shadow: 2px 2px 6px -4px inset;
 	text-shadow: none;
}

Magento Hauptnavigation aufteilen / Themenwelten

admin — Thu, 28 Jan 2010 11:31:17 +0000

Für ein aktuelles Projekt möchte ich neben der Standardnavigation für Kategorien (z.B. Bücher, DVD, Elektronik) eine alternative Navigation anlegen. In dieser Navigation bewegt man sich in Themenwelten, z.B. “Alles für’s Weinachtsfest”, “Präsente für den Valentinstag”…

Die Navigationen sollen unabhängig voneinander und an unterschiedlichen Stellen auf der Webseite angezeigt werden.
Außerdem sollen sie möglichst komfortabel über die Administration gepflegt und jederzeit verändert und erweitert werden können.

Scribbel der geplanten Platzierung:

Vorüberlegung:

Liegen die Kategorien der Hauptnavigation (oben) und die Kategorie “Themenwelten” in der selben Rootkategorie, so kann das Hauptmenu abgebildet werden, indem die Kategorie “Themenwelten” einfach ausgeblendet wird.

Die zweite Navigation (links) soll nur die Kindelemte (Weihnachten, Valentinstag…) der Kategorie “Themenwelten” anzeigen.

Anlegen der Kategorien in der Administration:

Zunächst lege ich die Kategorien in der Administration an. Die entsprechende Struktur zeigt der Screenshot. “root-1″ ist die Rootkategorie meines Shops. Für die nächsten Schritte benötigen wir die ID der Kategorie “Themenwelten”. In meinem Fall ist das die “12″.

Sind alle Kategorien angelegt und werden im Frontend angezeigt, kann es jetzt weitergehen.

Ausblenden der Kategorie Themenwelten (ID 12)

Anmerkung: meine Ausführungen beziehen sich auf das Default Theme. Es kann möglich sein, dass die Dateien bei Ihnen anders heißen.

Datei: magento/app/design/frontend/deinpackage/deintheme/template/navigation/top.phtml

Hier werden die Menuelemente ausgegeben. Wir suchen:

getStoreCategories() as $_category): ?>

drawItem($_category) ?>

Und ersetzen zu:

getStoreCategories() as $_category): ?>

getData('entity_id') == 12): ?>



drawItem($_category) ?>

Vergewissern Sie sich, dass Sie bei in Zeile 2 die ID verwenden, die für Ihr Setup gilt.
Ein kurzer Check im Frontend und die Kategorie Themenwelten sollte nicht mehr angezeigt werden.

Zweite Navigation (Themenwelten) erstellen

In: magento/app/design/frontend/deinpackage/deintheme/template/navigation/ erstellen wir eine neue Datei special.phtml und schreiben einen kurzen Blindtext hinein um später prüfen zu können, ob im Frontend auch etwas ankommt.

Jetzt muss der Block für das neue Menu in den Layout Dateien (XML) eingetragen werden.
In: magento/app/design/frontend/deinpackage/deintheme/layout/page.xml ergänze ich im Block für die Linke Spalte (left), also in:

den Block für das Menu:

In: magento/app/design/frontend/deinpackage/deintheme/layout/catalog.xml ergänze ich in der default Sektion:

Das sollte es jetzt schon gewesen sein. Machen wir den Check ob im Frontend unser Blindext in der linken Spalte erscheint. Jawoll. Alles Da.
Falls nicht, kann es sein, dass sie in der phtml-Datei die Ihre akteulle Page verwendet (1column.ptml, 2columns-left.phtml …) an der entsprechenden Stelle noch:

getChildHtml('specialMenu') ?>

eintragen müssen.

Menuelemte aus der Themenkategorie ausgeben

Datei: magento/app/design/frontend/deinpackage/deintheme/template/navigation/special.phtml

Hier will ich nun die Kindelemente der Kategorie mit ID 12 ausgeben. Die Ausgabe erfolgt als einfache unsortierte Liste und kann sehr einfach über CSS gestaltet werden. Da ich keine weiteren Unterebenen habe ist es recht simpel.

Copy & Paste




foreach (Mage::getModel('catalog/category')->load($parentCategoryId)->getChildrenCategories() as $childCategory) 

{ ?>

getName();?>

Frontend Check -> Läuft. Und alle so… YEAH.

Update

Nach Hinweis von Rouven Alexander Rieker folgende Ergänzung:
Das ganze funktioniert auch, wenn man die Kategorie “Themenwelten” in der Admin auf “inaktiv” stellt. Dann erspart man sich die “top.phtml” zu editieren.

Funktioniert nicht mit Flat Catalog Category.

Magento – E-Mail Vorlagen anpassen

admin — Tue, 13 Oct 2009 11:24:22 +0000

Wenn man aus seinem Magentoshop HTML E-Mails verschicken möchte, die zum CI des Shops passen, so hat man freie Hand bei der Gestaltung. Da es unglaublich viele E-Mail Vorlagen im System gibt, möchte ich ein paar Tipps geben, wie man die Arbeit und spätere Pflege optimieren kann.

Wenn man sich für HTML Mails entscheidet und die E-Mail Vorlagen entsprechend umsetzen möchte, sollte man sich zunächst im Klaren darüber sein, dass die Darstellung der E-Mail beim Kunden je nach verwendetem Mail Programm (Outlook, Thunderbird, MacOs Mail…) oder Online Mail Provider (Google Mail, Web.de, GMX …) sehr unterschiedlich ist. Leider unterstützt kein Programm/Seite, alle HTML Funktionen und/oder CSS Eigenschaften, die man im modernen Webdesign verwendet. Besonders so weit verbreitete Mail Programme wie Outlook 2007 machen es nahezu unmöglich in HTML Mails “vernünftiges” Markup zu verwenden.

HTML und CSS in E-Mails

Bevor man sich an die Gestaltung macht, sollte man einen Blick in folgende Liste werfen: http://www.campaignmonitor.com/css/
Hier werden die wichtigsten Tags und CSS Eigenschaften der wichtigsten Mail Programme überprüft und man ieht sofort, was geht, was geht nicht.

Hat man sich durch die Liste gearbeitet, kommt man unweigerlich zu dem Schluß die E-Mails in einem Tabellenraster zu gestalten. CSS setze ich sparsam ein.
Meist genügt es, Schriftfarben, Hintergrundfarben anzupassen und ein Logo einzubinden.

Wiederkehrende Inhalte ausgliedern

- Jede meiner E-Mail Vorlagen hat die gleiche Kopfzeile mit dem Logo, einem Link zum Shop und Platz um eine wichtige Info einzublenden (z.B. für besondere Aktionen)
- Jede E-Mail Vorlage hat einen Footer mit Links zum Beutzerkonto, Impressum und AGB, außerdem Kontaktdaten, UstID und Ladenadresse
- Einige E-Mail Vorlagen verwenden im Footer das Widerrufsrecht
- Einige E-Mail Vorlagen verwenden einen Absatz mit Informationen “Sollten Sie fragen zu Ihrer Betsellung haben…”

Da diese Blöcke in fast jeder Mail vorkommen und eigenes Markup und Text haben, macht es Sinn sie auszugliedern. Änderungen müssen so nur in einer Datei gemacht werden und die E-Mail Vorlagen im Adminsystem müssen nicht geändert werden.

Zunächst habe ich mir im Verzeichnis app/design/frontend/default/meintheme/template/email die phtml-Dateien für die entsprechenden Blöcke angelegt. Diese Dateien beinhalten sämtliches Markup und ggf. Texte.

Beispiel für footer-start.phtml

Sind alle Templatedateien vorbereitet, geht es nun daran die E-Mail Vorlagen in der Administration anzupassen, sodass die Templates auch verwendet werden. Das muss man einmalig erledigen. Sorry  
Um die Templates nun in der E-Mail Vorlage aufzurufen fügt man folgendes ein:
{{block type='core/template' area='frontend' template='email/footer-start.phtml'}}
Hier mal ein Beispiel für eine komplette E-Mail (new-order):
{{block type='core/template' area='frontend' template='email/header-start.phtml'}}


meinedomain |
Ihr Konto |
Impressum |
AGB







  
  
  Hallo {{htmlescape var=$order.getBillingAddress().getName()}},

  Vielen Dank für Ihre Bestellung
{{block type='core/template' area='frontend' template='email/paragraph-questions.phtml'}}
  Ihre Bestellung Nr.{{var order.increment_id}} (vom {{var order.getCreatedAtFormated('long')}})
  
  
  
  Rechnungsinformationen:
  
  Zahlungsmethode:
  
  
  
  
  
  {{var order.getBillingAddress().format('html')}}
  
   
  
  {{var payment_html}}
  
  
  
  
  

  {{depend order.getIsNotVirtual()}}
  
  
  
  Versandinformationen:
  
  Versandart:
  
  
  
  
  
  {{var order.getShippingAddress().format('html')}}
   
  
   
  
  {{var order.getShippingDescription()}}
   
  
  
  
  
  

  {{/depend}}
  
  
  
  Ihr Kommentar:
  
  
  
  
  
  {{var order.getBiebersdorfCustomerordercomment()}}
  
  
  
  
  

  {{layout handle="sales_email_order_items" order=$order}}
  

  {{var order.getEmailCustomerNote()}}
  
  
  
  {{block type='core/template' area='frontend' template='email/footer-start.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-sub-data.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-sub-disclaimer.phtml'}}
  {{block type='core/template' area='frontend' template='email/footer-end.phtml'}}

Weitere Möglichkeiten

Da es für mich immer einfacher ist und schneller geht die Inhalte in den phtml Dateien zu wechseln habe ich alle Texte in diesen stehen. Möchte man die Elemnte aber über die Adminoberfläche pflegen, so kann man statt der phtml Dateien natürlich auch statische Blöcke einbinden. Optimal ist sicher die Kombination aus beidem. So kann man als Entwickler das Markup einfach über die phtml Dateien pflegen und wer auch immer für die Texte zuständig ist, kann diese via Adminoberfläche Pflegen.

Statische Blöcke direkt in der E-Mail:

{{block type="cms/block" block_id="cms_email_footer"}}

In diesem Fall muss via Admin der statische Block mit dem Seitenbezeichner “cms_email_footer” angelegt werden.

Statische Blöcke in den Templatedateien:

createBlock('cms/block')->setBlockId('cms_email_footer')->toHtml() ?>

Magento – Newsletter für Deutschland

admin — Tue, 28 Jul 2009 11:45:58 +0000

Alles was Recht ist

Will man in Deutschland einen Newsletter versenden, so müssen sich die Abonennten über eine Double Opt In Funktion anmelden. Das bedeutet, dass der Eintrag in die Empfängerliste in einem zweiten Schritt bestätigt werden muss. Magento versendet dafür eine Email mit einem Link, den der Empfänger klicken muss. Erst dann ist er für den Empfang des Newsletters freigeschalten.

Bitte betrachtet diesen Beitrag als Anregung. Ich bin kein Programmierer und man kann das sicher eleganter lösen. Es funktioniert, und das war mir wichtig.

Einstellungen in Magento

Möchte man diese Double Opt In Funktion in Magento nutzen, muß das zunächst in der Administration konfiguriert werden.

Administration -> Konfiguration -> Newsletter ->

Bei “Bestätigung nötig” stellt man auf “JA”. Wer jetzt denkt das reicht, liegt leider falsch. Denn out of the Box funktioniert das in Magento wie jetzt wie folgt:

Es gibt folgende Fallunterscheidungen:

Gast trägt sich in Newsletter
In diesem Falle verschickt Magento jetzt die Mail, deren Empfang der Empfänger bestätigen muss, um für den Newsletter freigeschaltet zu sein. Double Opt In = Perfekt.

Bereits registrierter User (Bestandskunde) trägt seine Email Adresse ein
Dies ist immer dann der Fall, wenn der entsprechende Kunde bereits einmal im Shop bestellt hat und bereits über ein Kundenkonto verfügt. Ist die eingetragene Email Adresse also bereits mit einem Benutzerkonto registriert versendet Magento KEINE Mail, die der Empfänger bestätigen muss. Der Empfänger ist sofort für den Newsletter freigeschaltet. Völlig egal, dass wir in der Admin “Bestätigung notwendig” auf “Ja” gestellt haben. KEIN Double Opt In = SCHLECHT.

Editieren der Model Datei

Um oben genanntes Verhalten zu “fixen”, müssen wir etwas in der Subscriper.php vom Newsletter rumhacken.

Damit meine Änderungen bei einem nächsten Update von Magento nicht überschrieben werden, kopiere ich mir die Datei inklusive Verzeichnisstruktur aus dem “core” ins “local” Verzeichnis.

Quelle: app/code/core/Mage/Newsletter/Model/Subscriber.php

Ziel: app/code/local/Mage/Newsletter/Model/Subscriber.php

In der Subscriper.php wird an mehreren Stellen geprüft, ob sich die Email Adresse, die gerade im Formular eingetragen wurde, bereits in der Datenbank befindet. Dies kann zum Beispiel dann vorkommen, wenn der entsprechende Kunde bereits einmal im Shop bestellt hat und bereits über ein Kundenkonto verfügt. Wenn die Email Adresse also bereits mit einem Benutzerkonto registriert ist, versendet Magento keine Authorisierung mehr, sondern schaltet den Benutzer sofort für den Newsletter frei (wie oben bereits beschrieben). Da wir uns in Deutschland natürlich an deutsches Recht halten müssen, wollen wir das nicht.

Wir editieren in $customerSession->isLoggedIn() Zeile 311

Vorher:

$this->setStatus(self::STATUS_SUBSCRIBED);

Nachher:

$this->setStatus(self::STATUS_NOT_ACTIVE);

Außerdem noch Zeile 315:

Vorher:

$this->setSubscriberStatus(self::STATUS_SUBSCRIBED);

Nachher:

$this->setSubscriberStatus(self::STATUS_NOT_ACTIVE);

Komplett:

if ($customerSession->isLoggedIn()) {
            $this->setStoreId($customerSession->getCustomer()->getStoreId());
            $this->setStatus(self::STATUS_NOT_ACTIVE);
            $this->setCustomerId($customerSession->getCustomerId());
        } else if ($customer->getId()) {
            $this->setStoreId($customer->getStoreId());
            $this->setSubscriberStatus(self::STATUS_NOT_ACTIVE);
            $this->setCustomerId($customer->getId());
        } else {
            $this->setStoreId(Mage::app()->getStore()->getId());
            $this->setCustomerId(0);
            $isNewSubscriber = true;
        }

Wenn wir die Änderung nun speichern sind wir damit schon mal fertig. Magento versendet jetzt für jede einzutragende Emailadresse die Mail zum Bestätigen.

Jetzt gibt jetzt also den Double Opt In für:
- Gäste
- bereits registrierte Kunden

Anmerkung:
Trägt sich ein Nutzer mit einer Email Adresse in den Newsletter ein, der bereits einmal eingetragen ist (im Newsletter), so wird sein Status wieder reseted und er erhält eine neue Mail mit Bitte um Bestätigung. Die Email Adresse ist also niemals doppelt eingetragen.

Erfolgsmail versenden

Wenn die Eintragung in die Abonnentenliste bestätigt wurde gibt es auf der Seite im Shop eine kurze Bestätigung. Jetzt wollen wir noch eine Bestätigungsmail versenden. “Anmeldung im Newsletter”. Das macht Magento auch nicht automatisch für alle. Wir müssen also noch in der gleichen Datei (app/code/local/Mage/Newsletter/Model/Subscriber.php) dafür sorgen, dass die Mail versendet wird:

In public function confirm($code) ab Zeile 417 fügen wir ein:

$this->sendConfirmationSuccessEmail();

Sieht dann so aus:

public function confirm($code)
    {
        if($this->getCode()==$code) {
            $this->setStatus(self::STATUS_SUBSCRIBED)
                ->setIsStatusChanged(true)
                ->save();
                $this->sendConfirmationSuccessEmail();
            return true;
        }
        return false;
    }

In diese Email habe ich dann zusätzlich den Link zum abbestellen des Newsletters gepackt und darum gebeten, die Mail aufzuheben. Ein Formular, mit dem sich Gäste auf der Webseite aus dem Newsletter wieder austragen können, werde ich demnächst gesondert erstellen.

Meine komplette Subscriber.php habe ich hier auch nochmal zum Download angehängt.

Ich übernehme keinerlei Verantwortung für eventuelle Fehlfunktionen!

Über Anregungen und Verbesserungsvorschläge freue ich mich.

Update

Damit eingeloggte Kunden über Ihren Benutzerbereich den Newsletter einfach via Checkbox abonnieren können (und trotzdem durch das Double Opt Inn müssen) habe ich noch die entsprechende Datei komplett umgestrickt.

Die Änderung betrifft die Datei: app/design/frontend/default/default/ template/customer/form/newsletter.phtml

getMessagesBlock()->getGroupedHtml() ?>

__('Newsletter Subscription') ?>

getIsSubscribed()): ?>


getBlockHtml('formkey')?>
getIsSubscribed()): ?> checked="checked" /> Ja, ich möchte den Newsletter erhalten.
Sie sind momentan für unseren Newsletter angemeldet. Wenn Sie das Häckchen in der Checkbox entfernen und speichern, werden Sie zukünftig keine Newsletter mehr empfangen.

« __('Back') ?>








Sie sind momentan nicht für unseren Newsletter angemeldet. Sie können hier den Newsletter mit Ihrer hinterlegten E-Mail Adresse (htmlEscape($this->getCustomer()->getEmail()) ?>) abonieren.


 Ja, ich möchte den Newsletter erhalten.



« __('Back') ?>

Magento – Hersteller in Produktansicht

admin — Mon, 20 Jul 2009 10:07:45 +0000

Da Magento von Hause aus leider nicht die Möglichkeit mitbringt, Herstellerinformationen zu Hinterlegen, musste ich das für ein aktuelles Projekt über einen kleinen Workaround realisieren. Die Grundlage für die Umsetzung ist das bereits vorhandene Attribut “Manufacturer” und entsprechnde CMS-Blöcke.

1. Schritt – Eintragen der Hersteller

In der Administrationsoberfläche von Magento rufen Sie auf: Katalog -> Attribute -> Attribute verwalten.
Suchen Sie nach dem Attribut “manufacturer”.

Das Attributlabel muss hier zwingend “Hersteller” lauten. Ansonsten müssen Sie u.U. die Abfrage in der View (weiter unten) anpassen.
Wir bearbeiten nun die Bezeichnungen / Optionen und legen zunächst mal alle unsere Hersteller an. Dabei sollten Sie für diesen Workaround auf Sonderzeichen verzichten (komm ich später noch mal drauf zurück).

2. Schritt – CMS Blöcke anlegen

In der Administration rufen Sie auf: CMS -> Statische Blöcke -> Neuen Block anlegen.

Blocktitel: Name des Hersteller. Hier “Wingreen”. Damit man später immer weiß, dass es sich um eine Herstellerblock handelt, lassen Sie den Seitenbezeichner am besten immer mit der Zeichenfolge “man-” starten. Das ist wichtig, benötigen wir dann später auch in der View. Verwenden Sie ein andere Zeichenfolge oder verzichten Sie darauf, müssen Sie u.U. die Abfrage in der View (weiter unten) anpassen. Ebenso dürfen an dieser Stelle KEINE Leerzeichen und auch keine Sonderzeichen verwendet werden. Die Schreibweise muss zwingend die gleiche sein, wie die Bezeichnung der Option im Attribut.
Status: aktiviert (wichtig!)
Inhalt: Hier kommt jetzt die Herstellerinformation. HTML erlaubt, Sie können also auch Bilder und Links einfügen und die Informationen beliebig formatieren.

Beispiel:

Attribut Option: Wingreen and Friends
CMS-Block Seitenbezeichner: man-wingreenandfriends

3. Schritt – Produktview anpassen.

Diesen Schritt kann man mit Sicherheit viel eleganter umsetzen, aber ich bin Frontender. Weitergehende PHP Kenntnisse sind leider nicht mein Gebiet. Hier freue ich mich jederzeit über Feedback und Tipps.

Editor Ihrer Wahl: Wir bearbeiten nun die Datei, die in der Produktansicht die Attribute ausgibt. Wichtig: in Ihrem aktivierten Tempalte. “/app/design/frontend/default/default/template/catalog/product/view/attributes.phtml”

Hier wird in Zeile 11 die Variable $myType gesetzt und ausgegeben.

In Zeile 14 prüfe ich, ob das Label ($myType) “Hersteller” ist, denn dann möchte ich den entsprechenden CMS-Block ausgeben.

Verwenden Sie in Ihrem Attributset ein anderes Attributlabel, so müssen Sie diese Prüfung anpassen.

Jetzt konstruieren wir aus dem Value des Hersteller Attributes die passende Block-ID. Mit str_replace entfernen wir alle Leerzeichen und setzen unseren (in Schritt 2 verwendeten) Prefix davor.

Zeile 16 platziert dann den CMS-Block mit der ID aus $myManufacturer in die Seite.

Falls es sich nicht um die Angabe des Herstellers, sondern z.B. um Gewicht oder Farbe handelt, geben wir in Zeile 18 den ursprünglichen Value des Attributes aus.

Der Code (bestehende attributes.phtml kann komplett ersetzt werden) (UPDATE unten beachten)

helper('catalog/output');
    $_product = $this->getProduct()
?>
getAdditionalData()): ?>

    
    
    
        
       	htmlEscape($this->__($_data['label'])); echo $myType; ?>
        
        productAttribute($_product, $_data['value'], $_data['code']));
		    	echo $this->getLayout()->createBlock('cms/block')->setBlockId($myManufacturer)->toHtml();
            else:
                echo $_helper->productAttribute($_product, $_data['value'], $_data['code']);
			endif;
		?>

htmlEscape($this->__($_data['label'])); echo $myType; ?>	productAttribute($_product, $_data['value'], $_data['code'])); echo $this->getLayout()->createBlock('cms/block')->setBlockId($myManufacturer)->toHtml(); else: echo $_helper->productAttribute($_product, $_data['value'], $_data['code']); endif; ?>

Finished. Auf der Produktseite wird nun die im CMS angelegte Herstellerinformation angezeigt.

Screenshot (Liveshop comming soon)

Magento - Herstellerinformationen in Produktview

Mehrsprachigen Installationen

Bei mehrsprachigen Installationen sollten Sie die Seitenbezeichner der CMS Blöcke nicht nur mit “man-” beginnen lassen, sondern zusätzlich die Sprache integrieren. Zum Beispiel: “man-en-”… Die Prüfung des Labels (Schritt 3) muss dann über eine ODER Prüfung erweitert werden und die Konstruktion der Block-ID abgepast werden.

UPDATE

Hier nochmal etwas modifiziert der Code, damit man den Herstellernamen anzeigen lässt, wenn kein entsprechender statischer Block hinterlegt ist.

helper('catalog/output');
    $_product = $this->getProduct()
?>
getAdditionalData()): ?>

    
    
    
        
       	htmlEscape($this->__($_data['label']));
			if ($myType == "Hersteller"):
	    		$myManufacturer="man-".str_replace(' ', '',$_helper->productAttribute($_product, $_data['value'], $_data['code']));
                $myManufacturer=str_replace('ä', 'ae',$myManufacturer);
                $myManufacturer=str_replace('ö', 'oe',$myManufacturer);
                $myManufacturer=str_replace('ü', 'ue',$myManufacturer);
		    	$myBlock = $this->getLayout()->createBlock('cms/block')->setBlockId($myManufacturer)->toHtml();
            endif;
                echo $myType;
            ?>
        
        
        productAttribute($_product, $_data['value'], $_data['code']);
                endif;
            else:
                echo $_helper->productAttribute($_product, $_data['value'], $_data['code']);
			endif;
		?>

htmlEscape($this->__($_data['label'])); if ($myType == "Hersteller"): $myManufacturer="man-".str_replace(' ', '',$_helper->productAttribute($_product, $_data['value'], $_data['code'])); $myManufacturer=str_replace('ä', 'ae',$myManufacturer); $myManufacturer=str_replace('ö', 'oe',$myManufacturer); $myManufacturer=str_replace('ü', 'ue',$myManufacturer); $myBlock = $this->getLayout()->createBlock('cms/block')->setBlockId($myManufacturer)->toHtml(); endif; echo $myType; ?>	productAttribute($_product, $_data['value'], $_data['code']); endif; else: echo $_helper->productAttribute($_product, $_data['value'], $_data['code']); endif; ?>

Wild Navigation with bunny :-)

admin — Tue, 03 Feb 2009 10:19:56 +0000

As time is money I will show you an easy and fast way on how to create a navigation that is not horizontal or vertical, but more like a cloud.

Our navigation:

So your designer send you a screenshot with a navigation like the one above and you want to create the markup for this. First thing most people have in mind is an imagemap or slicing it in Photoshop. As you’re a professional webdesigner, you don’t want to use an imagemap as your are looking for semantics in your code. And as your are a professional webdesigner you will see that slicing is not as easy as it seems. There are overlapping edges in the slice (as shown below) and you will have a lot of work to do, to arrange the slices later.

Here we go. Fast and easy.

What we will do is setting up our navigation as an unordered list giving the ul a graphical background and then place the li absolute to overlap the clickareas. Easy, I told you!

As I’m a lazy guy I let adobe dreamweaver help me positioning the links.
Start with an emty dreamweaver document. In the document head add a little stylesheet

body
{
padding: 0; margin: 0;
}

Then place the image of your navigation (cutted and optimized as your will use it in your website later) into the body. You don’t need more.

From the layout menu choose “AP Div” icon (1), which lets you create an absolute positioned div-element. Draw a rectangle over our first navigation item (2). When clicking the element you can set its ID (3). Give your element a “speaking” ID. I choose “nav-portfolio”.

Repeat this step for every navigation link. Do not forget to name your div-elements. Clicking on a created item lets you edit. This way you can always adjust size and position of the elements.

After placing all the div-elements, let’s take a look at the source code.
You will find something like:

#nav-portfolio {
position:absolute;
left:150px;
top:40px;
width:183px;
height:52px;
z-index:1;
}
#nav-home {
position:absolute;
left:15px;
top:62px;
width:106px;
height:73px;
z-index:2;
}
#nav-informtion {
position:absolute;
left:31px;
top:141px;
width:210px;
height:48px;
z-index:3;
}
#nav-blog {
position:absolute;
left:250px;
top:100px;
width:166px;
height:70px;
z-index:4;
}
#nav-imprint {
position:absolute;
left:442px;
top:85px;
width:123px;
height:59px;
z-index:5;
}
#nav-contact {
position:absolute;
left:401px;
top:173px;
width:138px;
height:25px;
z-index:6;
}

You can delete “position: absolute” and “z-index: x” as we don’t need it here. Later we will copy this code to our websites stylesheet.

Now let’s create our semantic navigation.

Open the editor of your choice and create your website or open and edit an existing one. Here I will only show the part for the navigation, of course.


	Home
	Portfolio
	Information
	Bog
	Contact
	Imprint

A little styling and we are done.

#my-navigation {background: url(mybackground.gif) no-repeat; position: relative; width: 578px; height: 282px;}
#my-navigation li {position: absolute;}
#my-navigation li a {display:block; height:100%; width:100%; text-indent:-3000em; }

1. We set the image used above as a background image for our navigation list and set the positioning to relative so absolute positioned elements are positioned related to the ul-element. Set the size to the same size of your image.
2. We are positioning the li elemts absolute and give each li-element the ID we used in dreamweaver (that’s important).
3. Setting the links to display block with a width and height of 100% to fill the whole li-element.

Now copy the styles from dreamweaver to your websites stylesheet.

#nav-portfolio {
left:150px; top:40px;
width:183px; height:52px;
}
#nav-home {
left:15px; top:62px;
width:106px; height:73px;
}
#nav-informtion {
left:31px; top:141px;
width:210px; height:48px;
}
#nav-blog {
left:250px; top:100px;
width:166px; height:70px;
}
#nav-imprint {
left:442px; top:85px;
width:123px; height:59px;
}
#nav-contact {
left:401px; top:173px;
width:138px; height:25px;
}

We are done. Quick and dirty.

Of course, there is no need for using dreamweaver, but it makes the positioning of our elements easier. Writing the code yourself, you should set a border to the li-elements. This way, you can see, what your are doing.

Good luck with your try. I will have a writeup on mouse-overs for this one soon.

Pure CSS Thumbnails

admin — Fri, 02 Jan 2009 17:07:07 +0000

Inspired by the article Create Resizing Thumbnails Using Overflow Property on cssglobe.com I changed the CSS to really increase the image on mouseover and to have a different color (blackandwhite) version of the imaged used as the thumbnail.

This page is showing my version of pure CSS thumbnails. Just mouseover the small ones to get the full size version. There is no need for Javasript.

Off course: it is a complete missuse considering what thumbnails intended to be used for. As the full size version is loaded too, there is no saving in data. So it wouldn’t be a good idea to use the technique for a very large gallery.

Restrictions: – two versions for the image needed (of course) – full size version should not be bigger than 3x thumbsize! – each thumbnail needs its own id. You can use PHP: set a counter and let it generate your ids and css.

CSS:

.thumb img
{
   width: 100px;
   visibility: hidden;
}
.thumb a
{
   width: 100px;
   display: block;
   float: left;
   overflow: hidden;
   height: 65px; z-index:1;
   position: relative;
   margin: 0 20px 0 0;
   border: solid 1px #ccc;
}
.thumb a:hover
{
   overflow:visible; z-index: 1000;
}
.thumb a:hover img
{
   width: 250px;
   position: absolute;
   margin-left: -125px;
   margin-top: -50px;
   visibility: visible;
}

.thumb #m01	{background: url(01s.jpg);}
.thumb #m02	{background: url(02s.jpg);}
.thumb #m03	{background: url(03s.jpg);}

HTML:

Lazy guy version

I know! People looking for a little CSS Snipplet like this and not doing the work themself are lazy people. So, to support your lazyness, here is the “lazy guy version” using only one picture for the thumbnails and the full size version. The thumbs are scaled by CSS. The CSS is much smaller as there is no need to add a unique ID to every thumbnail.

CSS:

.thumb img	{width: 100px;}
.thumb a
{
   width: 100px;
   display: block;
   float: left;
   overflow: hidden;
   height: 65px;
   z-index:1;
   position: relative;
   margin: 0 20px 0 0; 

   border: solid 1px #ccc;
}
.thumb a:hover	{overflow:visible; z-index: 1000;}
.thumb a:hover img
{
   width: 250px;
   position: absolute;
   margin-left: -125px;
   margin-top: -50px;
}

HTML: