Unsere erste HTML5/CSS3 Animation ist online.
Intro: http://www.nordisch-arts.de
Umgesetzt wurde die Animation mit Adobe Edge (Previewversion) http://labs.adobe.com/technologies/edge/
Das wird auf jeden Fall ein weiteres großartiges Tool in der Creative Suite.
In einem aktuellen Projekt kam die Frage nach einem besseren / erweiterten / komfortableren Warenkorb für XT:Commerce auf. Da der Standard-Warenkorb sehr umständlich zu bedienen ist, empfehle ich folgende Erweiterung:
http://www.estelco.de/product_info.php/products_id/71/erweiterungen/modul-komfortabler-warenkorb.html
Das Script ist bei Selbstinstallation kostenlos. Für uns war es genau das, was wir gesucht haben.
Wer den Original-Warenkorb kennt, wird wissen, was ich meine…
Auf der Suche nach “schöneren” Scrollbalken, die in allen Browsern gleich aussehen, bin ich auf jScrollPane gestoßen. Die Lösung basiert auf jQuery und kann einfach per CSS gestalttet werden. Hier findet man einige Anwendungsbeispiele…
Die Lösung basiert auf Javascript und funktioniert natürlich nur mit eingeschaltetem Javascript. Ohne JS werden die Standard-Scrollbalken angezeigt.
Wenn man Plugin- oder WP-Upgrades über das WordPress Dashboard machen möchte, kommt
vielleicht diese Fehlermeldung: Unable to locate WordPress Content directory (wp-content).
Bei mir war es so – hier ist die Lösung:
1. Unter ../wp-content ein neues Verzeichnis anlegen, z.B. tmp
2. Verzeichnisrechte auf ../wp-content/tmp auf 777 setzen.
3. Folgende Zeilen in der wp-config.php ergänzen:
putenv('TMPDIR=/"Absoluter Pfad eures Webservers"/wp-content/tmp');
define('WP_TEMP_DIR', ABSPATH . 'wp-content/tmp');
Bei meinem Hoster (Host Europe) kann man den absoluten Pfad einfach unter den Allgemeinen Informationen im KIS (Absatz: Pfad) erfahren.
Um Links werden beim Klick oder bei der Auswahl per Tab gepunktete Rahmen angezeigt.
Wenn man das nicht will, hier die Lösung per CSS:
outline:none;
Kombiniert mit der dynamischen CSS-Pseudoklasse “:focus”, kommt folgendes heraus:
a:focus {outline:none}
Safari verhält sich bei Webformularfeldern nicht so, wie die anderen Browser.
Eingabefelder und Textareas hebt Safari mit einer Outline hervor, wenn man mit der Maus reinklickt.
Bei Textareas bietet Safari zusätzlich an, diese zu vergrößern, was das Layout komplett zerstören kann.
Will man dieses Verhalten verhindern, gibt es hier die Lösung:
<style type="text/css">
<!--
.input_text {
outline:none;
}
.textarea {
resize:none;
outline:none;
}
-->
</style>
<input type="text" class="input_text"/>
<textarea class="textarea"></textarea>Benötigt man für das CSS-Feintuning eine Browserweiche z.B. für Safari und benutzt man PHP, ist hier die Lösung:
<?php
$agent = $_SERVER["HTTP_USER_AGENT"];
if (isset($agent) && strrpos($agent, "Safari") > -1)
{
echo '<link href="css/safari.css" rel="stylesheet" type="text/css" />';
};
?>
Bekanntermaßen zeigt der IE 6 keine transparenten PNGs an. Hier hilft der CSS-Hack von Angus Turnbull weiter.
Man benötigt dazu das Zip mit dem Fix und den Hilfsdateien. Der Einbau gestaltet sich einfach und ist auch in der Hilfedatei gut dokumentiert. Ich zeige trotzdem kurz, wie es geht:
1. Hilfsdateien in das Web-Verzeichnis kopieren.
2.. Den Hack im HTML einbinden – ich habe es mit Conditional Comments gemacht:
<!--[if lt IE 7]>
<style type="text/css">
img { behavior: url(css/iepngfix.php) }
</style>
<![endif]-->
Dabei habe ich das PHP-File, der gleichzeitig den korrekten MIME-Type aufruft, eingebunden, da ich eh auf meinem Webserver PHP benutze. Der Hack liegt eigentlich in einer .HTC-Datei und einige Webserver erkennen den MIME-Type nicht. Dafür gibt es aber auch eine zweite Lösung per .htaccess File. (Wird alles in der Hilfe erklärt) Man sollte auch darauf achten, dass man den Hack gezielt einsetzt denn bei vielen PNGs auf der Seite kann es zu Performanceproblemen kommen.
Leider kann der IE 6 nicht mit der CSS-Anweisung min-height umgehen.
Der folgende CSS-Hack macht es trotzdem möglich, mit min-height zu arbeiten.
Dabei ist der Hack auch noch 100% CSS 2.1 valide…
mein_css_selector {
min-height: 750px;
height: auto !important;
height: 750px;
}
Wenn man mal eben schnell eine Variable an Flash übergeben will, kann man einfach folgendes tun:
Man hängt an das Src-File einfach die Variable als zusätzlichen Parameter an:
... src="mymovie.flx?myvar=123" ... (statische Variable)
... srv="mymovie.flx?myvar=<?php echo $vartoflx; ?>" ... (dynamische Variable)
In Flash kann man die Variable “myvar” dann z.B. mit einem dynamischen Textfeld ausgeben. So funktioniert übrigens unser Banner “Aus unserem Blog” auf unserer Homepage.