Tagcloud

Dem iPad – Tablet einen eigenen Style zuweisen – How-To

Wer ein iPad besitzt oder allgemein seine Seite für dieses speziell anbieten will, der wird sich über diese Erweiterung sehr freuen. Es reicht ein kleiner link rel Tag mit entsprechender Anweisung des Display-Größe und schon wird via iPad eine weitere CSS Datei eingelesen.

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="(pfad-zur-datei)/ipad.css" type="text/css" />

Wir nutzen diese Erweiterung dafür, dass der Hintergrund komplett weiss ist. Auf dem iPad ist unser grauer Hintergrund nur minimal zu erkennen und das wirkt etwas störend.

Das ist unser Inhalt der ipad.css Datei

1
2
3

body {
	background: #fff;
}

iPadScreen

Kostenloses xt:Commerce Template jc_free

Das kostenlose Onlineshop Template „jc_free“ ist ein Template was sich schnell und einfach für jede Branche anpassen lässt. Erstellt wurde das Template für die xt:Commerce Version 3.04 SP2.1 ( Deutsch und Englisch ). Wir wünschen viel Spaß mit Template.

(weiterlesen …)

Kostenloses Template für xt:Commerce in Planung und Umsetzung

Vor gut einer Woche überkam uns die Idee mal wieder ein “kostenloses” Template für xt:Commerce bereitzustellen. Welche Versionen abgedeckt werden kann noch nicht gesagt werden.

Ein kurzer Vorgeschmack zum Aussehen des Design soll nicht fehlen. Leicht, Clean und Sauber wird das Hauptargument.

Es soll möglich sein das Template auf alle gängigen Branchen schnell anzupassen. Die wichtigsten Elemente im Template werden stärker betont und das Template wird sauber in CSS/XHTML umgesetzt.

Schad Förderelemente GmbH & Co. KG bekommt ein neues Gesicht

Zusammen mit Daniel Alker ( alker&jung – visuelle Kommunikation ) realisiere ich in den nächsten Wochen den neuen Webauftritt der Schad Förderelemente GmbH & Co. KG. Der neue Auftritt wird mittels Content Management System ( CMS ) realisiert.

Ich werde die komplette Programmierung des Auftrittes übernehmen, während Herr Alker sich um die designtechnischen Elemente kümmert. Selbstverständlich wird die Realisierung nach Webstandard´s ( CSS, XHTML, PHP, etc. ) realisiert.

Wir freuen uns das Unternehmen Schad Förderelemente GmbH & Co. KG als Kunde begrüßen zu dürfen.

Roter Hinweis bei nicht verfügbarer Menge im Warenkorb von xt:Commerce 3.04 oder Fork

Wenn man bei xt:Commerce mit Lagerbestandsmengen arbeitet, der wird schon mal das Problem gehabt haben, dass gewisse Mengen die der Kunde bestellt nicht mehr vorhanden sind und der Shop die bekannten 3 Sterne ála *** hinter dem Namen anzeigt. (weiterlesen …)

Produktbild in der Bestsellerbox in xt:Commerce 3.04 SP2.1

Wer die Bestsellerbox im Standard von xt:Commerce nutzt, der wird einen Link zum Artikel, den Preis und den Namen des Artikels sehen.

Um das Ganze noch ein wenig zu verbessern kann man ganz leicht das Produktbild auch in der Bestsellerbox anzeigen.

Der CODE mit Link und fester Breite

<a href="{$box_data.PRODUCTS_LINK}"><img src="{$box_data.PRODUCTS_IMAGE}" alt="Gambio, xtCommerce, Templates" width="40" /></a>

Wo das Bild platziert werden soll und wie groß man es darstellt, bleibt natürlich jedem selbst überlassen. In dem Bsp. wird das Bild auf 40px Breite reduziert. Man kann dieses auch Mittels CSS machen. Aber hier das height:auto nicht vergessen, sonst sieht es im Internet Explorer etwas komisch aus.

Seine CSS/Stylesheet Datei online aufräumen und ordentlich einrücken lassen

Wer ein Projekt für seine Webseite plant und viel CSS Code verwendet, der wird schnell merken das man irgendwann die Datei so voller Code hat das die Übersicht, die Schreibweise und die Darstellungen gelitten hat.

Es kann sogar passieren das man im Stress oder Druck CSS Code falsch oder doppelt schreibt. Man könnte am Ende alles manuell noch einmal kontrollieren und dutzende mal testen. Aber will man sich das auch noch antun?

Ein nützliche Online-Tool übernimmt viele Möglichkeiten die CSS Datei ordentlich darzustellen. Die Webseite und das CSS Cleaning Tool kann kostenlos genutzt werden und ist hier zu finden.

http://www.cleancss.com/

Achtung: Einige Einstellungen sollte nur mit Kenntnissen und Vorsicht genutzt werden.

Ein Border-Radius in CSS3 vergeben.

CSS3 findet immer mehr Wege ins geliebte WWW. Hier ein kleiner Vorgeschmack auf die neue Funktion Border-Radius. Leider zeigen ältere Browser welche CSS3 nicht unterstützen dieses nicht an.

Dies 4 Zeilen einfach der ID oder der Class hinzufügen.

1
2
3
4

border: 1px solid #acdd70;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Das -webkit steht für Browser wie Safari & Google Chrome welche die Webkit Engenie nutzen. Das -moz steht für Broweser wie den z.B. den FireFox.

Padding & Margin Fix der Thickbox entfernen

Oft passiert es, dass wenn man ein Modul oder eine Erweiterung in xt:Commerce installiert, dass der Shop auf einmal nicht so aussieht wie er vorher aussah. Grund dafür kann ein Stylesheet Code sein, der den eigenen überschreibt oder verändert.

So geschieht dieses auch bei der Einbindung der Thickbox in xt:Commerce.

Diese Zeilen führen dazu, dass alle Abstände im Quellcode auf 0 gesetzt werden. Man muss lediglich die unten stehende Zeilen aud der thickbox.css Datei entfernen und der Onlineshop oder die Webseite sehen wieder normal aus.

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox < <<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
* {
	padding: 0;
	margin: 0;
}

Internet Explorer 6 – Fortan nur noch auf Anfrage

Wie man öfters von mir gehört hat, bin ich ein totaler Verächter des IE6 aus dem Hause Microsoft. Der veraltete und unsichere Browser ist nun 8 Jahre alt und ist bereits durch den IE7 und IE8 abgelöst worden.  Leider kommt es dennoch sehr häufig dazu, dass ich gebeten werden mir das Design oder die Webseite im IE6 anzusehen, da es hier und da zu Problemen kommen kann.

Ich habe stets mit Hacks, Weichen und mehreren Zeilen Code es immer über die Bühne gebracht auch den IE6 so anzusprechen, dass auch hier Kundenprojekte ordentlich funktionieren und angezeigt werden. Doch es geht einfach nicht mehr ohne eine vorherige Absprache und eine Berücksichtigung des Auftragswertes. Meistens sind es 3 oder 4 Stunden die man mehr aufbringen muss den validen Code im IE6 richtig anzeigen lassen zu können, obwohl es moderne Browser wie IE8, Firefox, Safari oder Opera bereits vorher machen.

Aktuell ist es so, dass CSS3 ( eine weitere Form des Codens mit CSS Dateien ) immer mehr Vormarsch im Web nimmt und der IE6 diese Technik gar nicht versteht, was nützt Ihnen also eine Seite, die auf Grund eines IE6 Wünsches zwar funktioniert aber nicht mehr mit tollen Highlights versehen kann oder auf Grund von CSS3 Techniken gar nicht erst bedienbar ist.

Bei einem Vorgespräch für Ihr zukünftiges Vorhaben werden Sie demnächst von mir evtl. einen Hinweis erhalten, dass der IE6 nicht mehr zum Standardverfahren einer Realisierung gehört, sondern extra realisiert werden muss.