Codepal

Archive for the 'Blog' Category

WordPress Jahresrückblick: Die besten Tutorials des Jahres 2011

Mittwoch, 4. Januar, 2012

Die folgenden runden Tutorials ist mein neuester Artikel für schriftliche WPTuts + . Es enthält die folgenden Abschnitte des Tutorials:

• Theme Entwicklung Related Tutorials
• Plugins Related
• WordPress Sicherheit Related
• Data Analysis
• Fehlersuche und Debugging WordPress
• WordPress Post Management Related
• Wir freuen uns auf 2012

Hier ist eine Vorschau des Artikels.

---

Theme Entwicklungsbezogene

Deploy Ihre WordPress Blog in die Cloud

In den letzten zehn Jahren hat sich Hosting im großen Maßstab Webanwendung eine gewaltige Aufgabe gewesen, vorbehalten nur für Experten. Nicht mehr, wenn Amazon seinen Server-Architektur eröffnet, änderte sich alles. Computer-Hardware bewegt, um die Wolke, und steht nun vor, alle Entwickler. In diesem Tutorial werden wir WordPress in der Cloud zu installieren.

Tutorial-Link

WordPress Sicherheit Related

Quick-Tipp: Sichern Ihres Blog mit VaultPress

Wie bei fast jedem anderen Web-App, Informationen WordPress in einer Datenbank speichert. Es gibt immer eine Chance, dass Ihre Daten verloren gehen oder beschädigt werden, und es ist ratsam, eine solide Backup-Strategie verfügen. Dies ist, wo VaultPress die Bühne betritt den Tag zu retten, die das gesamte Backup und Sicherheit für Ihre WordPress-Website.

Tutorial-Link

Schauen Sie sich die vollständige Liste der besten Lernprogramme des Jahres 2011 durch den Besuch meiner neuesten Artikel auf WPTuts + . Auch Sie verlassen Ihre Anregungen und Feedbacks. Würde gerne wissen, welche Art von Tutorials und rund ups Sie möchten in der Zukunft lesen.

Tags: über wordpress , besten wordpress , wordpress Zukunft , wie man WordPress , wie man WordPress-Website , Tutorial , warum wordpress , Word Press , Wordpress , Wordpress 3
Posted in Blog , Tutorials | Keine Kommentare »

Quick-Tipp: Sichern Ihres Blog mit VaultPress

Sonntag, 10 Juli, 2011

Einführung

VaultPress ist das neueste Produkt aus Automattic (den Machern von WordPress.com), die rund um die Uhr bietet, komplettes Backup Ihrer WordPress-Blog. Es führt eine Synchronisierung von jedem Beitrag, Einstellung Kommentar-, Medien-Datei, Revision und Armaturenbrett in mindestens zwei getrennten Cloud-Services.

Wenn das nicht genug ist, bieten sie kontinuierliche Sicherheit, Disaster Recovery und helfen Ihnen auch bei der Migration von Deinem Blog auf einen neuen Host. All dies hört sich interessant an, und wenn Sie anfangen zu sichern und die Sicherung Ihres Blogs sofort wollen, dann ist dieses Quick Tip haben Sie in fünf Minuten!.

Diese schnelle Spitze ist eines meiner Tutorials auf WPTuts + Schauen Sie sich die komplette Tutorial hier .

Tags: Backup- , Quick-Tipp , Vaultpress , Wordpress
Posted in Blog , Tutorials | 14 Kommentare »

40 + Stunning WordPress Themes Portfolio

Donnerstag, 7. Juli, 2011

Dies ist meine erste Runde bis je. Gibt es einen besseren Weg zu meiner ersten Runde bis post zu schreiben, als um eine Liste der besten WordPress-Themes gibt für Portfolio Zwecke anzuzeigen. Diese Liste besteht aus den schönsten WordPress Portfolio-Themen sowohl kostenlose als auch Premium-Ones. Dies ist auch meine neuesten Beitrag auf WPTuts +

Mutig

Mutig ist ein schönes Thema für Portfolio mit einer erstaunlichen Schieberegler an der Spitze. Es hat alle Qualitäten eines Premium-Thema und hat jede Menge Anpassungsmöglichkeiten an das Backend.
Preview | Herunterladen

Wordfolio

Wordfolio ist ein preisgekröntes Portfolio wordpress Thema. Es ist dies ein einzigartiges innovatives Konzept der Darstellung der vorgestellten Arbeiten, die den Besucher in wenigen Sekunden überzeugt. Es ist total den Preis wert.
Preview | Kaufen

Um zu überprüfen, die restlichen 38 ehrfürchtige Themen und ihre Download-Links finden Sie auf meiner letzten Stelle in WPTuts + . Auch Sie verlassen Ihre Anregungen und Feedbacks. Würde gerne wissen, welche Art von Tutorials und rund ups Sie möchten in der Zukunft lesen.

Tags: Herunterladen , Gratis , Portfolio , Premium- , Round Up , Themes , Wordpress
Posted in Blog , Tutorials | 4 Kommentare »

Quick-Tipp: Mit Shortcodes in Theme-Entwicklung

Mittwoch, 6. Juli, 2011

Envato gerade gestartete ihre neuesten tuts + site WPTuts + . Diese Seite ist komplett auf wordpress gewidmet und ich bin sicher, ich werde schreiben viele Tutorials gibt es in der Zukunft . Dies ist eine der schnellen Tipps, die ich für WPTuts schrieb +, die kurz erklärt, wie Sie die mächtigen Shortcodes Funktion von WordPress zu nutzen.

Einführung

Shortcodes haben viele Vorteile, wenn sie richtig in Theme-Dateien verwendet. Wenn Sie sind vertraut mit Präprozessor-Makros in C / C + +, dann Kurzwahlnummern können eine ähnliche Funktion in WordPress zu dienen. Der grundlegende Zweck der Verwendung einer Kurzwahlnummer ist, um den Platzhalter mit Ihren eigenen Stück HTML-Code zu ersetzen, wenn der Server sendet die Seite an den Client-Seite. Die Schritte in Kreation und Umsetzung von Kurzwahlnummern beteiligt sind wie folgt ...

Sie können sich das komplette schnelle Spitze des neuen WPTuts + site . Sie können Ihre Kommentare und Ansichten über diese schnelle Spitze und auch Vorschläge für Tutorien lesen möchten .

Tags: Quick-Tipp , Shortcodes , Theme-Entwicklung , Wordpress
Posted in Blog , Tutorials | 1 Kommentar »

Erstellen Sie ein Multi-Layout Portfolio mit WordPress

DONNERSTAG, 2 Juni, 2011

Mein neuestes Tutorial für Nettuts diskutiert darüber, wie wir WordPress als CMS nutzen und biegen Sie es, um unsere Bedürfnisse zu einem atemberaubenden Portfolio mit mehreren Layouts zu erstellen. In diesem Tutorial werden wir intensiv nutzen leistungsstarken Funktionen von WordPress, wie z. B. benutzerdefinierte Beiträge, benutzerdefinierte Taxonomien, und wir werden auch eine Funktion schreiben unsere eigene Auszüge zu holen. Dies ist, was werden wir schaffen

Die Multi-Layout-Thema wird in einer Weise, dass der Benutzer kann zwischen einem Raster und Liste layout.This ist der prinzipielle Aufbau, wie unser Portfolio wird in Grid-Modus erscheinen Funktion auswählen:

Sobald der Benutzer klickt auf die Listenansicht, wird das gesamte Layout reibungslos, um eine Liste, die den Titel des Projekts, die tags mit ihr verbunden sind, und eine kurze Beschreibung enthalten, wird sich ändern.

Schauen Sie sich die komplette Tutorial auf Nettuts und auf die Schaffung, die cool-Portfolio Sie wollten schon immer los! Sie teilen Sie Ihre Kreationen, Anregungen mit uns

Tags: CMS , Grunge , jQuery UI , Portfolio , Theme , Wordpress
Posted in Blog , Tutorials | 3 Kommentare »

Integration von Cloud-Zoom mit WP e-Commerce Gold-Cart Gallery

Freitag 22. April, 2011

Update 30. April 2011: Die WP e-Commerce Gold-Cart Plugin hat eine neue Version (v2.9.1) aktualisiert. Sie haben einige Veränderungen in der Galerie-Display-Methode. Daher musste ich den Code I posted früher, so dass es mit der aktualisierten Version des Gold-Cart Gallery Arbeit zu modifizieren.:

Das Projekt

Dieses Projekt von mir benötigt eine Galerie in den einzelnen Produkt-Seite und auch die Cloud-Zoom-Plugin aktiviert, so dass die Benutzer können eine vergrößerte Ansicht des Produktes wichtigsten Bild nur den Mauszeiger über das Bild haben. Die Gold-Cart Plugin für WP e-Commerce ermöglicht die Galerie Option, aber es bietet die thickbox Funktion als Standard-Option für die Vorschau Bilder.

Das Problem

Auch wenn die Galerie war die Anzeige der Thumbnails durchaus, aber es gab einige Probleme mit sich, weil nach einem Klick auf die Miniaturansicht der Bilder in der Galerie, das Hauptprodukt Bild wurde nicht ersetzt. The Cloud Zoom Plugin wurde auf der Hauptstraße Bild des Produkts aktiviert und ohne die Möglichkeit, das Bild durch die Bilder in der Galerie ersetzt, war der springende Punkt bei der Umsetzung der Galerie sinnlos.

Die Lösung

So nachdem ich ein wenig Forschung und die Suche keine Lösung für das Hauptbild mit dem Bild in der Galerie geklickt ersetzen, war ich gezwungen, eine andere Lösung des Problems zu finden. Cloud-Zoom ist eine wunderbare Plugin und zum Glück bietet die Möglichkeit der Implementierung einer Galerie zu, indem einfach einige Klassen und eine komplexe rel-Attribut für die hyprlink Tags der Bilder. Dies kann in folgender Weise geschehen:

 <html>
 <head>

 <-! Laden Sie die Cloud-Zoom CSS-Datei ->
 <link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

 <-! Sie können die jQuery-Bibliothek aus dem Google Content-Werbenetzwerk zu laden.
 Wahrscheinlich besser als von Ihrem eigenen Server.  ->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>

 <-! Laden Sie die Cloud-Zoom JavaScript-Datei ->
 <script type="text/javascript" src="/js/cloud-zoom.1.0.2.min.js"> </ script>

 </ Head>
     <body>

         <! -
         Ein Anker mit Klasse "Cloud-zoom 'sollte umgeben das kleine Bild.
         Der Anker ist href sollte der große Zoom-Image verweisen.
         Alle Optionen können in das rel-Attribut des Ankers angegeben werden.
         Optionen sollten in regelmäßigen JavaScript-Objekt-Format angegeben werden,
         aber ohne die Klammern.
         ->

         <A href = '/ images/zoomengine/bigimage00.jpg' class = 'Cloud-zoom' id = 'zoom1 "
             rel = "adjustX: 10, adjustY: -4">
             <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional Titel display" />
         </ A>

         <! -
         Optional können Sie eine Galerie durch die Schaffung von Ankern mit einer Klasse von "Cloud-zoom-gallery".
         Der Anker ist href sollte der große Zoom-Image verweisen.
         In das rel-Attribut müssen Sie die ID des Zooms zu verwenden (useZoom: "zoom1 '),
         und auch das kleine Bild zu benutzen (smallImage: / images /....)
         ->

         <A href = '/ images/zoomengine/bigimage00.jpg' class = 'Cloud-zoom-gallery' title = 'Thumbnail 1'
        	 rel = "useZoom:" zoom1 ', smallImage:' / images / zoomengine / smallimage.jpg '">
         <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/> </ a>

         <A href = '/ images/zoomengine/bigimage01.jpg' class = 'Cloud-zoom-gallery' title = 'Thumbnail 2'
        	 rel = "useZoom:" zoom1 ', smallImage:' / images/zoomengine/smallimage-1.jpg '">
         <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/> </ a>                  

         <A href = '/ images/zoomengine/bigimage02.jpg' class = 'Cloud-zoom-gallery' title = 'Thumbnail 3'
        	 rel = "useZoom:" zoom1 ', smallImage:' / images/zoomengine/smallimage-2.jpg '">
         <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/> </ a>

     </ Body>
 </ Html>

Die Details zu den Argumenten für die Cloud Zoom-Plugin zur Verfügung gestellt hier .

Jetzt aus dem obigen Beispiel die wichtigsten Punkte zu beachten sind wie folgt:

• Class Cloud-zoom in das Hauptbild der Hyperlink-Tag.
• Das href-Attribut des Hyperlinks Tag enthält den Link zu der größeren Version der wichtigsten Bild.
• Die r el-Attribut in das Hauptbild Hyperlink, die die primären Argumente liefert für das Plugin, welches, wie das Plugin funktioniert definiert.
• Die Hyperlink-Tag umschließt die kleinere Version des Produkts main image.
• Die Klasse Cloud-Zoom-Galerie in der Hyperlink-Tag für die Galerie Thumbnails.
• Das href-Attribut des Hyperlinks Tag enthält den Link zu der eine größere Ansicht des Bildes.
• Die Argumente in das rel-Attribut für den Hyperlink-Tag in der Thumbnail-Galerie. Es enthält die ID des Haupt-image Hyperlink, den Link zu der kleinen Version des Bildes.
• Die Galerie Hyperlinks umschließen das kleine Thumbnail-Bilder der Galerie.

Daher haben wir im Grunde brauchen drei Versionen der Bilder in die Galerie zu implementieren.

• Große Version zum Zoomen ermöglichen: von der Gold-Cart Vorausgesetzt Plugin.
• Medium-Version, die angeblich die Größe der Haupt-Bild für die einzelnen Produkt-Seite ist: Wir müssen aus der Datenbank zu holen.
• Schließlich ist die kleine winzige Vorschaubilder für die Galerie: Erweiterung des Gold-Cart Sofern sich.

Jetzt werde ich beschreiben, wie Sie dies mit dem Gold-Cart Plugin und die erforderlichen hack zu integrieren. Vor allem nach der Installation des Gold-Cart Plugin, stellen Sie sicher, dass Sie einige Bilder für das Produkt hochgeladen und aktiviert die Galerie in den Einstellungen. Deaktivieren Sie außerdem die Lightbox-Funktion.

Danach stellen Sie sicher, dass die Galerie wird in den einzelnen Produkt auf der Seite angezeigt. Jetzt können Sie einige Code-Modifizierung. Vergewissern Sie sich, bis alles gesichert, besonders die Gold-cart plugin, bevor Sie fortfahren. Bearbeiten Sie die gold_shopping_cart.php Datei und suchen Sie für die Funktion der Galerie dh gold_shpcrt_display_gallery anzuzeigen. In dieser Funktion finden Sie im Abschnitt, die die Galerie zeigt für die Versionen über 3,8 gehen. Dies sollte von der Linie Nummer 308 (wenn Sie keine Änderungen am Code getan haben) beginnen. Dies ist die ursprüngliche Version des Codes, die die Galerie zeigt:

 $ Output ='';
 $ Product_name = get_the_title ($ product_id);
 $ Output .= "<div class='wpcart_gallery'>";
 $ Args = array (
	 "Post_type '=>' attachment ',
	 "Post_parent '=> $ product_id,
	 "Post_mime_type '=>' Bild ',
	 "Orderby '=>' menu_order"
	 'Bestellen' => 'ASC',
	 "Numberposts '=> -1
 );
 $ Attachments = get_posts ($ args);
 $ Featured_img = get_post_meta ($ product_id "_thumbnail_id ');
 $ Thumbnails = array ();
 if ($ Anhänge) {
	 foreach ($ Anhänge als $ post) {
		 setup_postdata ($ post);
		 $ Link = wp_get_attachment_link ($ post-> ID, "Gold-Thumbnails ');
		 $ Size = is_single ()?  "Medium-single-Produkt ':' Produkt-Thumbnails ';
		 $ Preview_link = wp_get_attachment_image_src ($ post-> ID, $ size);
		 $ Link = str_replace ('a href', 'a rev = "' $ preview_link [0].." "Class =" thickbox "rel =" '$ product_name.. "" Href ", $ link);

		 / / Immer die featured Thumbnail ersten
		 if (in_array ($ post-> ID, $ featured_img))
			 array_unshift ($ Thumbnails, $ link);
		 sonst
			 $ Thumbnails [] = $ link;
	 }
 }
 $ Output .= implode ("\ n", $ Thumbnails);
 $ Output .= "</ div>";
 wp_reset_query ();

Nun ist dies die modifizierte Version des obigen Code ein:

 $ Output ='';
 $ Product_name = get_the_title ($ product_id);
 $ Output .= "<div class='wpcart_gallery'>";
 $ Args = array (
	 "Post_type '=>' attachment ',
	 "Post_parent '=> $ product_id,
	 "Post_mime_type '=>' Bild ',
	 "Orderby '=>' menu_order"
	 'Bestellen' => 'ASC',
	 "Numberposts '=> -1
 );
 $ Attachments = get_posts ($ args);
 $ Featured_img = get_post_meta ($ product_id "_thumbnail_id ');
 $ Thumbnails = array ();
 if ($ Anhänge) {
	 foreach ($ Anhänge als $ post) {
		 setup_postdata ($ post);
		 $ Link = wp_get_attachment_link ($ post-> ID, "Gold-Thumbnails ');
		 $ Size = is_single ()?  "Medium-single-Produkt ':' Produkt-Thumbnails ';
		 $ Preview_link = wp_get_attachment_image_src ($ post-> ID, $ size);
		 / / Orignial $ link zur Galerie Bilder mit thickbox Represent
		 / / $ Link = str_replace ('a href', 'a rev = "' $ preview_link [0].." "Class =" thickbox "rel =" '$ product_name.. "" Href ", $ link);

		 / / Abrufen Medium Bild und Ändern von $ link bzgl. der Cloud Zoom jQuery Plugin Optionen zur Galerie Anzeige
		 $ Link = str_replace ('attachment-gold-Thumbnails','',$ link); / / Entfernen der Klasse aus dem img-Tag, weil seine verursacht einen Konflikt mit der Wolke Zoom-Plugin
		 $ Small_image = wp_get_attachment_image_src ($ post-> ID, array (337437)); / / gibt ein Array
		 $ Rel_options = "useZoom:" zoom1 ', smallImage: "" $ small_image [0 ]."'";.
		 $ Link = str_replace ('a href', 'a rev = "'. $ Preview_link [0]. '" Class = "cloud-zoom-gallery" rel = "". $ Rel_options. "Href", $ link) ;					

		 / / Immer die featured Thumbnail ersten
		 if (in_array ($ post-> ID, $ featured_img))
			 array_unshift ($ Thumbnails, $ link);
		 sonst
			 $ Thumbnails [] = $ link;
	 }
 }
 $ Output .= implode ("\ n", $ Thumbnails); / / Imploding Array-Element als Listenelemente
 $ Output .= "</ div>"; / / Ending Liste
 wp_reset_query ();

Jetzt können Sie aus den obigen Code sehen, dass alles, was wir tun müssen, ist eine kleinere Version des Bildes (in der Hauptsache Bildausschnitt Display) zu holen und ändern Sie die rel-Attribute, so dass die Wolke Zoom-Plugin der Galerie-Funktion aktiviert zu.

Um die Wolke Zoom-Funktion, bearbeiten Sie die WPSC-single_product.php und ändern Sie den Code in das Bild in einem hyerplink Tag angezeigt wird. Sie können es von der Klasse product_image suchen. Sie müssen sich das rel-Attribut zu ändern, und fügen Sie eine ID und eine Klasse, um den Hyperlink umschließt das Bild.

 <A id = "zoom1" rel = "position: 'innen', smoothMove: 4" class = "cloud-zoom" href = "? <Php echo wpsc_the_product_image ();>">
                        <Img class = "product_image" id = "product_image_ <php echo wpsc_the_product_id ();?>" Alt = "<php ​​echo wpsc_the_product_title ();?>" Title = "<php ​​echo wpsc_the_product_title ();?>" src = "<? php echo  ?>"/>
 </ A>

Das ist alles, was Sie tun müssen, um die Cloud Zoom jQuery-Plugin mit dem WP e-Commerce Gold-Cart Plugin der Galerie zu integrieren. Auch wenn Sie die jCarousel jQuery-Plugin auf der Galerie Bilder aktivieren möchten, dann müssen Sie die Galerie Hyperlink-Tags in der Liste Elemente umschließen. Hierfür benötigen Sie den Code leicht, so dass die Hyperlink-Tags in einer ungeordneten Liste eingeschlossen zu ändern.

 $ Output ='';
 $ Product_name = get_the_title ($ product_id);
 $ Output .= "<ul class='wpcart_gallery jcarousel-skin-tango'> <li>"; / / Hinzufügen von li-Tag zu implodieren Array-Elemente als Listenelemente beginnen
 $ Args = array (
	 "Post_type '=>' attachment ',
	 "Post_parent '=> $ product_id,
	 "Post_mime_type '=>' Bild ',
	 "Orderby '=>' menu_order"
	 'Bestellen' => 'ASC',
	 "Numberposts '=> -1
 );
 $ Attachments = get_posts ($ args);
 $ Featured_img = get_post_meta ($ product_id "_thumbnail_id ');
 $ Thumbnails = array ();
 if ($ Anhänge) {
	 foreach ($ Anhänge als $ post) {
		 setup_postdata ($ post);
		 $ Link = wp_get_attachment_link ($ post-> ID, "Gold-Thumbnails ');
		 $ Size = is_single ()?  "Medium-single-Produkt ':' Produkt-Thumbnails ';
		 $ Preview_link = wp_get_attachment_image_src ($ post-> ID, $ size);
		 / / Orignial $ link zur Galerie Bilder mit thickbox Represent
		 / / $ Link = str_replace ('a href', 'a rev = "' $ preview_link [0].." "Class =" thickbox "rel =" '$ product_name.. "" Href ", $ link);

		 / / Abrufen Medium Bild und Ändern von $ link bzgl. der Cloud Zoom jQuery Plugin Optionen zur Galerie Anzeige
		 $ Link = str_replace ('attachment-gold-Thumbnails','',$ link); / / Entfernen der Klasse aus dem img-Tag, weil seine verursacht einen Konflikt mit der Wolke Zoom-Plugin
		 $ Small_image = wp_get_attachment_image_src ($ post-> ID, array (337437)); / / gibt ein Array
		 $ Rel_options = "useZoom:" zoom1 ', smallImage: "" $ small_image [0 ]."'";.
		 $ Link = str_replace ('a href', 'a rev = "'. $ Preview_link [0]. '" Class = "cloud-zoom-gallery" rel = "". $ Rel_options. "Href", $ link) ;					

		 / / Immer die featured Thumbnail ersten
		 if (in_array ($ post-> ID, $ featured_img))
			 array_unshift ($ Thumbnails, $ link);
		 sonst
			 $ Thumbnails [] = $ link;
	 }
 }
 $ Output .= implode ("</ li> <li>", $ Thumbnails); / / Imploding Array-Element als Listenelemente
 $ Output .= "</ li> </ ul>"; / / Ending Liste
 wp_reset_query ();

Abschluss

Diese Methode funktioniert sehr gut für die Integration der Cloud-Zoom-Plugin mit dem WP e-Commerce Gold-Cart Galerie. Aber einen Nachteil ist, dass wir ändern den eigentlichen Inhalt des Goldes Warenkorb plugin und alle Änderungen gehen verloren am Tag aktualisieren wir die WP e-Commerce Gold Warenkorb Plugin werden. Daher werde ich versuchen, ein Plugin, welches diese Funktionalität ermöglicht, anstatt hart zu kodieren sie in die Plugin-Dateien zu machen.

Disclaimer: Die oben genannten Tutorial soll die Cloud-Zoom jQuery-Plugin mit dem WP e-Commerce Gold-Cart Gallery zu ermöglichen. Ich bin nicht verantwortlich, wenn etwas schief geht und der Warenkorb nicht in der erwarteten Weise verhalten. Bitte nehmen Sie die richtige Sicherung vor Unordnung mit jedem Code des Themas oder die Plugin-Dateien.

Tags: Cloud-Zoom , Gallery , Gold-Cart , jQuery , Wordpress , WP e-Commerce
Posted in Blog , Tutorials | 31 Kommentare »

iPhone Application Template

Samstag, 29 Januar, 2011

Heute, wenn es um iPhone kommt: "Es ist eine App für alles". Also dachten wir, der Slicing bis eine iPhone-Anwendung Motto Vorlage so, dass alle angehenden Entwickler eine iPhone-App vor Ort ihren eigenen Stellenwert haben kann. Aber dieses Mal gingen wir einen Schritt voraus. Anstelle des regulären xHTML / CSS-Templates, haben wir diese in ein HTML5-Vorlage, die Spuren von CSS3 und jQuery einige Zauber verwendet. Die Vorlage kann in jede bestehende Content Management System oder Web-Applikation integriert werden. Also zögern Sie nicht, setzen die Programmierer in Sie und entwickeln eine große iPhone-Anwendung. Dann nutzen Sie diese HTML5/CSS3 Web-Template, um es mit der Welt teilen Bitte lassen Sie uns wissen, wenn Sie Hilfe benötigen. Schließlich sind wir Code-Pal!

Tags: Anwendung , CSS 3 , Freie , HTML5 , iPhone , jQuery
Posted in Blog , Downloads | 19 Kommentare »

So erstellen Sie eine FAQ-Seite mit WordPress und benutzerdefinierten Post Types

Samstag 4. Dezember, 2010

Ich schrieb ein Tutorial für Nettuts darüber, wie die allseits beliebten Blogging / CMS Plattform WordPress verwenden, um einen engagierten FAQ-Bereich in den Back-End mit 'Custom Beitrag Types "zu schaffen. Dann holen die eigene Post-Typen und Display in der Front-End in einer aufgepeppt Weise mit jQuery und CSS3.
Dies ist, was das Endprodukt aussehen wird.

Klickt der Benutzer auf eine der FAQs, die Seite wird nach unten scrollen automatisch an die jeweilige Antwort und markieren Sie ihn.

Schauen Sie sich die komplette Tutorial auf Nettuts und erstellen ein paar coole, interaktive FAQ-Seite für Ihre eigene Website. Sie teilen Sie Ihre Kreationen mit uns

Tags: CSS 3 , benutzerdefinierten Post , FAQ , wie man , jQuery , jQuery UI , Wordpress
Posted in Blog , Tutorials | 1 Kommentar »

Listify, Convert Raw Text To HTML-Elemente

Montag 30. August, 2010

Was ist Listify?

Listify ist eine sehr einfache kostenlose Service für Web-Entwickler und Designer, die Sie auf Raw-Text in HTML ist 'Liste' oder 'die Option' Elemente, indem Sie verschiedene Optionen wie Trennzeichen, die Art der Listen und ignorieren Ziffern zu konvertieren. Ich habe diese Idee, als ich auf der Arbeit war Clinova Projekt. Ich hatte die Namen aller Länder in der Landing-Page der Website einfügen. Um dies zu erreichen, musste ich alle Namen innerhalb eines <select> Tag eingefügt. Sie können sehr gut verstehen, die Art von Zeit verschwendet worden wären es manuell zu tun. Also ging ich weiter und schrieb ein kurzes Stück Code in C , die eine Textdatei mit den Namen des Landes akzeptieren würde und erzeugen eine Textdatei mit dem <select> tags angehängt, um die Namen. Es ersparte eine große Menge an Zeit, die ich genutzt, um etwas anderes (ich wahrscheinlich sah eine Episode von How I Met Your Mother) zu tun. Wie auch immer, so, wenn ich mit Codeigniter begann, dachte ich, anstatt meine Zeit zum Erstellen einer Demo nutzloses Projekt, warum nicht konvertieren, die C-Programm, um ein Online-Tool. Daher kam Listify . Dies ist immer noch in der Alpha Phase und wir würden gerne einige Vorschläge für neue Features, die Sie gerne hören. Schreiben Sie uns Feedback hier feedback@code-pal.com oder hinterlassen Sie eine Kommentar hier.

Wie wird es helfen?

Mit listify können Sie die Geschwindigkeit Ihres HTML Codierung, wenn Sie große Listen oder Option Elemente in Ihrem Code enthalten müssen. Zum Beispiel, wenn Sie die Option Elemente wie Ländernamen benötigen, dann müssten Sie die Tags zu 257 Namen, die offensichtlich einige Zeit dauern wird hinzuzufügen. Mit Listify, würde es nur drei Sekunden.

Wie benutzt man es?

Mit Listify ist recht einfach. Alles, was Sie tun müssen, ist der Text in das Textfeld oberhalb einfügen, konfigurieren Sie Ihre Optionen nach Ihren Wünschen und einfach auf die Schaltfläche Erzeugen klicken. Sie können eine beliebige reiner Text und wählen Sie ein Trennzeichen, um ihn in der Liste / option Elemente unterteilen. Grundsätzlich geht es um drei Schritte zur Liste über Listify generete:

• Kopieren Sie Text aus die gewünschte Quelle und fügen Sie ihn in das Textfeld ein.
• Fügen Sie ihn in das Textfeld ein, konfigurieren Sie die Optionen.
• Kopieren Sie die generierte Liste aus dem Dialogfeld, fügen Sie ihn in Ihrem Code

Jetzt können Sie nutzen Ihre Zeit gespart, wie Sie wollen

Was sind das für Möglichkeiten?

Listentyp Diese Option ermöglicht es Ihnen, zu wählen, welche Art von Liste, die Sie generiert werden soll. Ob es sich um eine Liste Element für eine ungeordnete / geordnete Liste oder eine Option Element <option> Element für den Tag <select>. Ignore Digits Viele Male gibt es unerwünschte Ziffern im Text, die wir nicht wollen, in aufgenommen werden die Liste / option Artikel. Diese Option ermöglicht die Erzeugung der Liste ignorieren Sie die Ziffern in den Text ein. Zum Beispiel, wenn Sie eine nummerierte Liste zu einer ungeordneten Liste konvertieren möchten, dann kopieren Sie einfach die Liste, wählen Sie diese Option, und die Liste Elemente werden ohne die Zahlen generiert werden.

Delimiter Ein Trennzeichen ist eine Folge von einem oder mehreren Zeichen verwendet werden, um die Grenze zwischen separate, unabhängige Regionen in den gewünschten Text umgewandelt werden soll. Es bedeutet, dass, wie Sie Ihren Text wollen in der Liste Elemente unterteilt werden. Zum Beispiel, wenn ein Text a, b, c und das Trennzeichen ist, dann wird die Liste als <li> erzeugt werden a </ li> <li> b </ li> <li> c </ li> Standardmäßig Wenn kein Trennzeichen eingegeben, dann wird sie prüfen, "return" oder "new line" als Trennzeichen. Für den Raum als ein Trennzeichen, müssen Sie Speicherplatz etc. eingeben

Lassen Sie mich wissen, ob es sinnvoll war und Feedback für Verbesserungen und Bugs sind herzlich willkommen.

Recent Updates:

Updates auf Februar 08, 2011

• Option hinzugefügt, um Hauptnavigation Struktur zu schaffen.
• Neue Option zur Generierung von Option-Elemente mit dem Attribut value.
• Neue Optionen zur Generierung von li-Elemente mit Hyperlink-Tags oder span-Tags in ihnen.
• Möglichkeit zur Erstellung Bestellte / Ungeordnete Listen.

Verwenden Sie Listify!

Tags: codeigniter , konvertieren , li , Listify , Option , Tag , Text, HTML-Entities , Werkzeug
Posted in Blog , Projekte | 17 Kommentare »

Erstellen einer Neon Blink-Effekt für Ihre Formulare mit CSS3 und jQuery

Samstag, 17 Juli, 2010

Nun dank der hellen neuen Kind auf dem Block, CSS3, mit ein bisschen jQuery herausgeputzt, werde ich Ihnen zeigen, wie eine raffinierte Effekt auf Ihre Formulare verbessern zu bauen.

Bin sicher, dass dieses coole Neon blink-Effekte in Form sein werden nützlich für viele Zwecke so nicht vermisse meine Tutorial auf 1stWebDesigner.com .

In diesem Tutorial haben wir die Verwendung von @-webkit-Keyframes, die funktioniert nur in Browsern mit der Webkit-Layout-Engine wie Chrome und Safari gemacht. Für Browser, wie Firefox und Opera, wo es keine Alternative gibt, müssen wir anmutig beeinträchtigen die Wirkung, die in diesem Fall wird nur ein box-shadow werden auf den Fokus. Internet Explorer (bis Version 8) kann nicht machen das meiste, was wir hier lernen, aber IE 9 scheint sehr vielversprechend zu sein von dem, was ich in den letzten Platform Preview gesehen.

Tags: CSS 3 , Entwicklung , Formen , wie man , jQuery
Posted in Tutorials | 4 Kommentare »

Grunge-Vorlage

Freitag, 16. Juli, 2010

Psdnation.info ist eine Seite gewidmet Tutorials, Artikel, Ressourcen und Kunstwerke auf photoshop. Sie bieten viele Werbegeschenke, die hohe Qualität PSD Homepagevorlagen umfasst. They made Grunge available as a fully editable, layered, grunge PSD website template. Professionally designed by them and developed by us, this high-quality freebie from PSDNation is a now also available as a xHTML/CSS template for the web development community. It can be used as a blog template or can also form a basis for CMS integration.

Tags: CSS 3 , Dark , Free , Grunge , xHTML
Posted in Blog , Downloads | 19 Comments »

How to Create a Cool Slide Out Panel with CSS3 only

Monday, July 5th, 2010

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don't miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.

Tags: coding , CSS 3 , Development , how to , tutorial
Posted in Tutorials | 6 Comments »

New Web Host – Our Experience During the Transition

Sunday, June 6th, 2010

Wir freuen uns bekanntzugeben, dass Code-pal ist jetzt auf einem neuen Webhoster gehostet - wpWebHost . Gleichzeitig sind wir auch traurig und wirklich leid für die Unannehmlichkeiten bei allen bedanken, die uns während der Übergangsphase besucht. Obwohl unsere bisherigen Webhoster, 000webhost wurde sehr gut zu uns, wir dachten, es sei Zeit, um ein neues zu verlagern und zu erweitern Code-pal, neue Ausmaße. Zu sagen, etwas über unsere bisherigen Gastgeber, alles, was wir können sagen, dass 000webhost wurde einfach toll! Auch wenn wir ihre Hosting-Service kostenlos genutzt wurde die Website Ausfallzeiten minimal, fast gleich null und wir erhielten alle Funktionen einer guten Webhost uns zur Verfügung stellen würde. Wir würden sie für jeden, der uns zu starten seinem Blog und will einen Host zu empfehlen. Ihre Unterstützung war auch fantastisch und schnell.

Nun werden Sie vielleicht denken, dass wenn wir wirklich liebte sie so sehr, warum haben wir für wpWebHost gehen? Nun, viele unserer Freunde benutze es und sie waren wirklich glücklich mit ihm. Sie empfahlen sie den Tag starteten wir auf der Suche nach einem neuen Host. So dachten wir, es zu versuchen und in Anbetracht der Tatsache, dass es eine Reihe, die speziell wordpress orientiert, es könnte sich als ein recht gut ist. In diesem Moment bekamen wir die Nachricht von ihrer Super-Rabatt bieten aufgrund ihrer frisch renovierten Website. Diese Entscheidung sogar aus der Bewegung der Website auf einen neuen Host bestätigt.

Während des Übergangs, wir waren wirklich besorgt, wie die ganze Sache wird sich am Ende, nachdem es vorbei ist. Wir kontaktierten die Unterstützung von wpWebHost und ihre Antwort war recht schnell, das war beruhigend, denn wenn etwas schief geht, gibt es einige Unterstützung, die wir gehen könnten laufen würde. Aber die Informationen, die sie zur Verfügung gestellt war nicht genug. Sie führte mich zu einer Stelle, die, wie man ein WordPress-Blog aus der Werkzeugleiste den Export erwähnt. Wir wussten bereits, etwa, dass (wie die meisten von uns da draußen, die zuvor verwendet haben WordPress für einige Zeit). Also dachten wir diskutieren unsere Erfahrung der Verlagerung der Website von einem Host auf einen anderen.

Wenn wir von einem Ort zum anderen transportieren wollen, nehmen wir alle unsere entlang stopft mit uns, informieren die zuständigen Behörden über unsere neue Adresse und richten Sie dann unsere bewegt stopft in unser neues Zuhause. Der Wechsel von einem Server auf einen anderen ist genau das gleiche. 'Our Stuff' ist unser Website-Inhalte, "Unsere Adresse" des Domain-Namens ist, sind die richtigen "Behörden" die Nameserver in unserem Domain-Manager. Diese sind die wichtigsten Schritte in diesem Prozess beteiligt.

Schritt 1. Sichern von Dateien

Zunächst einmal, wir haben nur gesichert unserer Daten, insbesondere die wp-content Ordner und alle anderen Dateien in das Home-Verzeichnis. Also das nächste Mal wenn Sie ein Backup Ihrer WordPress-Seite, nicht nur Backup der wp-content-Ordner und auch einen Blick auf die Dateien im Home-Verzeichnis, weil sie einige Identifizierung html-Dateien für verschiedene Dienste wie Google Analytics etc enthalten können .

Schritt 2. Herunterladen der Datenbank

Der zweite Schritt war sehr wichtig. Dies ist der Schritt, wo Sie zurück aus Ihrer Datenbank. Wir fuhren mit dem Backup in allen Formaten zur Verfügung und die Dateien heruntergeladen mindestens zwei Mal nur für den Fall, wenn einer von ihnen entpuppt sich als korrupt. Ich habe irgendwo gelesen, dass das Herunterladen der SQL-Datei in gz-Format via Firefox kann es manchmal korrupt. Der WordPress Codex ist Leitfaden für die Sicherung von Datenbanken war sehr hilfreich für uns.

Schritt 3. Die Aktualisierung der DNS

Der nächste Schritt war, die Domain Name Server (DNS) in unserem Domain-Provider Domain-Verwaltung Bereich zu aktualisieren. Dies war die größte Plage Teil der Partie, da die DNS Aktualisierung dauert seine Zeit. Es dauert in der Regel etwa 2 bis 3 Stunden, aber es könnte sogar einen Tag, um es zu aktualisieren. Wir hatten das Glück, so dass es innerhalb von 3 Stunden wurde nach der Änderung aktualisiert. Dieser Schritt wurde wieder wichtig, weil wir keinen Zugang zu unserem neuen Host-ftp ohne unsere Domains auf sie zeigen.

Schritt 4. Laden der Daten

Sobald Sie unsere Domäne zu den richtigen Server verwies, die nur einen Teil übrig geblieben war, um die Website auf den neuen Host-Upload. Zuerst installierten wir WordPress auf sie. Dann geht der phpMyAdmin, restaurierten wir die vorherige Datenbank gelöscht und die neu erstellte. Auch WordPress Codex ist Leitfaden für Datenbank wiederherstellen war sehr hilfreich für uns. Sobald das geschehen war, war das letzte, was links, um die wp-content-Ordner hochladen.

Sobald das Thema hochgeladen wurde, gingen wir in das Backend, aktiviert das Thema und jedes Plug-in, das war inaktiv. Unsere Website war die gleiche wie vorher, sondern auf eine andere Stelle war. Dieser Artikel wurde von großer Hilfe, um uns während des gesamten Prozesses und die meisten unserer Schritte wurden gemäß ihrer Leitlinie folgen. Der Wechsel von einem Host zum anderen klingt komplex, aber es ist nicht so hart, dass weder komplex. Das Wichtigste ist, um eine ordnungsgemäße Datensicherung vor dem Start nichts und Geduld.

Ein kleines Problem

Die Seite wurde gut funktioniert, aber es gab ein Problem, wenn wir das Hochladen einer Datei versucht. Der Fehler, der kam, war "Kann Verzeichnis / home/xxx/public_html/wp-content/uploads/20XX/XX erstellen. Ist das übergeordnete Verzeichnis, auf das Server? "Das Problem war, dass die Datenbank-Tabelle wp_option noch einige Werte unserer alten Host-Account-Namen enthalten. Das vermasselt den Pfad zu dem Upload-Verzeichnis. Da wir nicht importieren Sie die Website mit dem wordpress 'default Import / Export-Tool, damit dieses Update wurde nicht richtig gemacht. Um dieses Problem zu lösen, gingen wir in das phpMyAdmin, durchsucht die Datenbank mit diesem 'xxx' Begriff, der Erstellung der gesamten Problem war. Nach all seinen Ausprägungen, wo aufgeführt ist, ersetzt wir jeweils mit den neuen Begriff. Dieses vollständig das Problem gelöst. Wir empfehlen Ihnen, diese folgen
Anleitung richtig zu bewegen WordPress aus einem Verzeichnis in ein anderes innerhalb der gleichen Server-oder Umzug von einem Server auf einen anderen

Abschluss

Unsere Erfahrungen während der gesamten Übergang von einem Host zum anderen war sehr angenehm. Wir haben nicht vor irgendwelchen Schluckauf während des gesamten Prozesses.
Wie war deine Erfahrung, wenn Sie von einem Host auf einen anderen verschoben?

Tags: 000webhost , dns , Umzug , neue Host , Verlagerung wordpress site , Transfer WordPress-Blog , der Übertragung wordpress Datenbank , Verzeichnis kann nicht erstellt , wpwebhost
Posted in den Artikeln , Blog , Neuigkeiten | 4 Kommentare »

The 'Select' Problem After Using jqTransform and its Solution

Thursday, February 18th, 2010

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

Das Problem

The drop down list control of the html form contains the 'select' tags which enclose the various 'option' tags. Here is a form which I am using in this tutorial to explain the problem:

<form>
	<h4>Select Box Without jqTransform</h4>
	<div id="box-city" class="select-menus">
		<label>City</label>
		<br/>
		<select name="select-country">
  		        <option>Gotham</option>
			<option>New York City</option>
			<option>Smallville</option>
		 </ Select>
		<div class="clear"></div>
	 </ Div>
</form>

What jqTransform does is, it scans the whole 'select' tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original 'select' tag and its content.

<form class="jqtransform jqtransformdone"> <h4>Select box with jqTransform and normal select change method</h4> <div class="select-menus" id="box-name"> <label style="cursor: pointer;">Name</label> <div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;"> <div> <span style="width: 119px;">Batman</span> <a class="jqTransformSelectOpen" href="#"></a> </div> <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;"> <li><a index="0" href="#" class="selected">Batman</a></li> <li><a index="1" href="#">Robin</a></li> <li><a index="2" href="#">Superman</a></li> <li><a index="3" href="#">Spiderman</a></li> </ul> <select name="select-country" class="jqTransformHidden" style=""> <option>Batman</option> <option>Robin</option> <option>Superman</option> <option>Spiderman</option> </select> </div> <div class="clear"></div> </div> </form> 

This does not create a problem when we use the 'select' tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the 'change' method of the select control. The 'change' method captures the value-change event and we can access the value selected by the user in the following manner.

// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
	var value= $(this).val();
    alert("Value Selected = "+value);
 });

But after using the jqTransform plugin, the 'select' tag is no more there to apply the change method on.

Die Lösung

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
	var value= $("#box-age div.jqTransformSelectWrapper span").text()
	alert("Value Selected = "+value);
	return false; //prevent default browser action
 });

Abschluss

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the 'Select' boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.

Tags: CSS , forms , jqTransform , jQuery
Posted in Tutorials | 71 Comments »

Spice Up Your Twitter Feed Display Box Using CSS

Friday, October 23rd, 2009

For a very long time now there has been this trend of displaying tweets on the website's sidebar, footer or the header. Many designers have designed ingenious ways of displaying the tweets by creating beautiful eye-catching illustrations containing them. The main purpose of making them visually attractive is so that the visitors can get interested and read the fresh updates that the site's owner is providing. What this tutorial is going to do is enable to you to make your twitter feed display box interactive so that your visitors can go 'wow! That's pretty cool' when they visit your site or read your feeds. So here it goes:

Step 1. How do I insert the feed in my website?

Inserting your twitter account's feed in your website may become tricky. It's a good thing there are so many tutorials out there which provide you with the knowledge of inserting these feeds easily. Here are some resources which will enable you to get the feeds from twitter onto your very own site:

1. Designing a Unique Page for Twitter Updates
2. 10 Awesome Ways to Integrate Twitter With Your Website
3. Tweet!

WordPress users can use some awesome plugins to get their twitter feed on their site:

1. 35 Awesome Twitter Plugins for WordPress
2. Juitter
3. jQuery Plugin For Twitter

Schritt 2. Creating the image sprite.

Now that you have successfully learned how to import the twitter feed, it's time to configure the display area. For this tutorial, I am going to use the same design for the twitter box as I have used in this site's footer ie a twitter bird staring at the tweets.

What our primary aim is that when ever the user hover's over the twitter feed box, some action is going to take place. In our case the twitter bird will look towards the user.

You can create designs like this using various twitter icons made by some wonderful designers who love to share their work with the web community. Here is an ultimate source to these icons.

100+ Remarkably Beautiful Twitter Icons And Buttons (Always remember to ask the designer first before using these icons.)
Free vector icon set by ProductiveDreams.com

I have used the icons made by ProductiveDreams. After creating a simple box in photoshop. Place the normal twitter bird icon ie the one with the cross sectional view of the bird, at the bottom right side of the box such that the bird appears to be looking inside the box. Now paste the other twitter bird icon, the one which appears to be looking towards the viewer.

Then push the tilted bird icon above the older icon which you placed at the bottom right corner of the box such that it appears like a two headed twitter bird as shown below

Now hide the tilted twitter bird icon and properly mark a square containing the normal twitter bird using guide lines. Make sure that both the tilted and the normal bird fit properly in the same square made by the guidelines.

Crop the image with the normal twitter bird icon along the guidelines and open a new file and paste it there. Then check the height of the cropped image and increase the canvas size by that amount vertically. This is done so that you can paste the tilted twitter bird version on the same canvas to give the final touches to the image sprite.

Hide the normal twitter bird icon and make the other tilted bird visible. Then crop the image again along the guide lines just as you did for the previous image. Copy the image and paste it on the newly created canvas where you pasted the other image. Adjust the images so that they properly fit the whole canvas. Your image sprite is ready for use and should look like this:

Step 3. Coding the bird to life!

The html skeleton of the twitter feed box is going to be a simple one. There would be a main container div containing the twitter feed, the bird and an optional “Follow Me” link.

<div id="twitter">
	<a href="http://twitter.com/SumeetChawla" id="twitter-link">Follow Me!</a>
	<div id="twitter-bird"></div>
	<!--Your Twitter Feed Comes Here-->
</div>

The CSS for the '#twitter' container div is very simple. The '#twitter-bird' div is going to contain the bird. It should have half the height of the original sprite we made because only one of the two images in the sprite will be displayed. Using CSS sprites is a good practice because it reduces server requests, hence decreases the load time and prevents the sudden flashes of the image when hovered upon for the first time.

The twitter bird div should be floated to the right and a negative margin should be assigned to it so that the bird appears to be some what outside the container div. Make the background position 'top' so that the normal twitter bird is displayed. To give the finishing touches to our twitter feed box, just change the background image position of the 'twitter-bird' div to 'bottom' when ever the user hovers over the container div.

#twitter {
	color: #658097;
	position: relative;
	width: 332px;
	height: 122px;
	background-color: #1f1f1f;
	border: 1px solid #414040;
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-top: 10px;
 }
#twitter-bird{
	background-image: url('images/twitter.jpg');
	background-position:top;
	position: relative;
	float: right;
	margin-top: 32px;
	margin-right: -75px;
	width: 101px;
	height: 100px;
	background-repeat: no-repeat;
 }
#twitter:hover #twitter-bird {
	background-position: bottom;
 }

To see how the final result would look like, just scroll down to the footer at the bottom of this page.

Examples

Gopal Raju from ProductiveDreams has made his twitter feed look very lively and bright. The twitter bird is interactive in a very friendly and casual way. It winks and displays the total number of followers that he has.

Before Hovering :

After Hover :

This was the only site I could find which made the twitter feed box interactive. If you guys find any other site which follows this trend just post about it in the comment and I will make sure to add it here.

Tags: CSS , display feed , feed , how to , sprite , Twitter
Posted in Blog , Tutorials | 15 Comments »

How to Code an Overlapping Tabbed Main Menu

Wednesday, October 14th, 2009

There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! Written by Collis from NetTuts.com This ended up being the main inspiration for my site and while going through the tutorial I found Collis saying that:

” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build. "

So I tried coding one into html and after I succeeding thought of sharing it with you all.

Step 1.Gearing Up

So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. The above tutorial is very detailed and Collis does a great job in teaching how to build such a menu in photoshop. I have built one simple one specially for this tutorial.

Now let me specify that there are three states of the tab.The inactive state is grayish in colour, the active state is deep blue and the hover state is light steel blue colour. Hence, rather than slicing up three images for each tab, we can slice out an image sprite.

Schritt 2. Slicing The Tabs From the PSD

Align the tabs vertically using grids as shown in the image above. You can also align the tabs horizontally rather than vertically but then the CSS background image position will be accessed in a different way. The choice depends on person to person but both work perfectly. While cropping the image follow the guidelines properly and note that I have made the background transparent because we will be needing a transparent background if we need to overlap the tabs. Crop the image and save it for web in PNG24 format. One more point to note while slicing up the images is that the first tab ie the 'Home' tab should not be having any shadow on its left edge in the inactive state. Hence, for that specific tab we have to create another sprite without the shadows in it.

Step 3. Code Away

Now that our slicing is complete and we have all the images needed we can start coding our navigation bar. Just to make the example look good, I have constructed a sample featured content area layout with the overlapped navigation bar. The whole layout looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
 </ Head>

 <body>
	<div id="page-wrap">
		<ul id="main-nav">
			<li class="current"><a href="index.html">Home</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="services"><a href="services.html">Services</a></li>
			<li class="about"><a href="about.html">About Us</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
		<div class="clear"></div>
		<div id="featured">
			<div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Lets look at our main navigation menu. I have used a simple unordered list as any other navigation bar and styled it using a background image to the list's hyperlink tag.

<ul id="main-nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="about"><a href="about.html">About Us</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

ul#main-nav li {
	float: left;
	position: relative;
	display: inline;
 }

Remember that we are using an image sprite for the tabs in which the top most tab represents the active state, the middle represents the inactive state and the bottom represents the hover state. Hence, we will use the 'background-position' property to properly place the images to their respective state as follows:

ul#main-nav li a {
	position: relative;
	width: 110px;
	height: 29px;
	display: block;
	background-image: url('../images/tabs.png');
	background-position: center center;
	color: #44403b;
	text-decoration: none;
	font-size: 14px;
	padding-top: 12px;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
 }
ul#main-nav li.home a {
	background-image: url('../images/tab-home.png');
 }
ul#main-nav li.current a {
	background-position: top;
	color: #ffffff;
 }
ul#main-nav li a:hover {
	background-position: bottom;
	color: #ffffff;
 }
ul#main-nav li.current a:hover {
	background-position: top; /*To Prevent the Current tab from changing colour on hover*/
	color: #ffffff;
 }

You will notice that I have given a relevant class to each of the list elements and a class named 'current' to the tab which is for the current page. This is done so that I can assign different z-index values to each tab in an ascending order such that each tab lies at a higher z-axis than the tab following it. The tab with the class 'current' will lie at the highest order of the z-axis because it represents the current page and will always stay on top irrespective of it's position in the list. Before applying the z-index values, make sure that the position attribute for the list element is set to relative. Without any positioning value the z-index property won't work at all.

ul#main-nav li.current {
	z-index: 100;
 }
ul#main-nav li.home {
	z-index: 100;
 }
ul#main-nav li.portfolio {
	z-index: 99;
 }
ul#main-nav li.services {
	z-index: 98;
 }
ul#main-nav li.about {
	z-index: 97;
 }
ul#main-nav li.contact {
	z-index: 96;
 }

Even though we have assigned different z-index values to the tabs, they still don't appear over lapped and will look like this:

To give the finishing touches to our navigation bar, we have to push each tab on top of the other. We have assigned the z-index values in descending order from left to the right. Hence, we will just push each tab starting from the right to about 20px to its left by adding a negative 'margin-left' property to the 'ul#main-nav li' and push the whole navigation bar unordered list to the left by adding a positive 20px 'margin-left' to nullify the left wards movement of the bar.

ul#main-nav {
	margin-left: 20px;
 }
ul#main-nav li {
	float: left;
	position: relative;
	margin-left: -20px;
	display: inline;
 }

Mission Accomplished

After assembling all the css and the xhtml together, we will have our overlapped tabbed main navigation menu ready for use. This was my take on how to create this kind of a menu and am sure there are many better ways to do the same. I would be glad if you could share any other way of doing this or just discuss some improvements to this procedure itself.
Here are some site which use over lapping tabs as their main navigation menu:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS , how to , menu , navigation , over lapped
Posted in Blog , Tutorials | 47 Comments »

Orange

Tuesday, October 6th, 2009

PSDTemplate.com is a great site providing some really cool website templates created in photoshop. They have a section of premium PSD layouts where they release a layout every day. They also have a free PSD layout section where they release good quality layouts available free of cost. They released Orange as one of the free PSD templates and we have coded it so that people who want to have the xHTML/CSS version of this awesome template can have that too!

Tags: CSS , Free , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 4 Comments »

Summer of Love

Monday, September 28th, 2009

SloDive recently posted an article named 40 Free PSD Website Templates . This is an excellent resource for designers who don't want to start from scratch with their designing process or for developers who are not very good at designing. This xHTML/CSS template that we have coded for you guys can easily be integrated with any content management system. It is purely table-less and semantically correct for SEO purposes. Go ahead, download it and start your own band or organize a music event!

Tags: CSS , Free , PSD , Template , xHTML
Posted in Blog , Downloads , Portfolio | 7 Comments »

Personal Computer Assistant

Sunday, September 27th, 2009

Personal Computer Assistant is a very simple application and has very common features. Anyone who uses a computer a lot will be benefited by it. This was developed by myself and a very close friend of mine, Rakesh . Below is a demo graphical user interface which shows how the software looks like and how the user can interact with it. The main buttons in this demo GUI are interactive and you can click on them to know more about the different features.

Once installed the application minimizes itself to the system tray. Whenever you click on it, the main window is maximized and the emergency note pad is in focus automatically. I implemented this feature because many a times I needed to scribble something and had to start notepad. So I thought this would faster and comfortable for me. After writing in the emergency notepad, you can save it anywhere you want. The application is still in Beta phase. You can download and check it out. Don't forget to comment!

Anforderungen:

Windows Installer 3.1

Microsoft .NET Framework Version 2.0

Supported Operating Systems:
Currently only supported in Microsoft Windows XP and Windows operating systems before that.

Herunterladen

Tags: application , manager , pca
Posted in Blog , Projects | 11 Comments »

The Launch!

Thursday, September 24th, 2009

Code-pal started as a company which provides PSD to XHTML/CSS services. But since our first launch, in January 2009, we have grown with time and expanded our range of services. The previous version of code-pal was a very dark themed website and was more of a fun site rather than a professional one. There were many drawbacks of the previous version. To name a few, it was a static site and as our work experience grew, it was a very time consuming task to update our portfolio at regular intervals. The biggest disadvantage was that there was no blog. The main aim behind redesigning the site was to integrate a blogging system within the site where we can share, learn basically interact with the web community.

This is how the homepage of our previous site looked like:

The main features of this new site are as follows:

The home page consists of a giant portfolio viewer, order form, a feed of what our client's say about us and a recent blog post section. The portfolio is a simple page consisting of all the work we have done till now some details about each of them. The services page enlists all the services we are currently providing.

In the project section, we are going to display all the projects and research work we have worked upon or are pursuing. The download section is going to consist of a wide variety of freebies which you can download and share. At present, we are going to start by providing free xHTML/CSS templates and later on we will be increasing our stocks with different stuffs like wordpress/joomla themes. We are also working on a windows desktop application at present and soon will be launching a free version of it too.

The blog section is going to be all about tutorials, articles, news and stuffs. Initially, we are going to start writing about coding and web development only. There are loads of awesome web development communities out there and we want to pitch in with whatever we can to help this web community grow and prosper. This can only be possible if we receive the same love, support and encouragement from you.

The homepage of the new site looks like this:

Even before the officially launching the site, we have provided two templates for download. Over the new few days you might constantly see some changes here and there. We are still in the process of completing the whole design process and fixing stuffs here and there. Please feel free to review our site. Don't hesitate to comment if you like the redesign or even if you hate it. Of course let us know the reason behind it too. We warmly welcome suggestions on how to improve it further.

-Sumeet Chawla

Your friendly neighbourhood coder.

Tags: Launch , News
Posted in Blog , News | 2 Comments »

• «Ältere Einträge