CSS | Undolog.com

Sehr kurze Trick: Vielseitigkeit von CSS-Klassen

Montag, 10. November, 2008

Die meisten Experten bereits kenne ihn, aber ich bin oft gefragt, was ist der Unterschied zwischen class und id CSS Style Sheets. Ein Überblick über einige Unterschiede und Warnungen finden Sie es in den Klassen und ID in CSS, jedoch eine nützliche Funktion, unterscheidet class id ist die Fähigkeit, mehrere Klassen. Sie können beispielsweise definieren:

PLAIN TEXT

CSS:

border :2px solid #000 } . BordoNero (border: solid 2px # 000)
color :#f00 } . ColoreRosso (color: # f00)
border :2px solid #f00 } . BordoRosso (border: solid 2px # f00)

und schreiben in HTML:

PLAIN TEXT

HTML:

> Bordo nero con caratteri rossi </div> <div class = "bordoNero coloreRosso"> Border schwarz mit roter Schrift </ div>
> Bordo rosso con caratteri rossi </div> <div class = "bordoRosso coloreRosso"> Border rot mit roter Schrift </ div>

class im Gegensatz zu id kann es innerhalb von mehreren Definitionen in beliebiger Reihenfolge!

jquery: Runde Kanten an Bilder, um zu Überschneidungen

Donnerstag, 30. Oktober, 2008

Aufgrund der unterschiedlichen Rendering zwischen verschiedenen Browser, der sicherlich finden Sie im Microsoft Internet Explorer zu berücksichtigen, müssen wir immer Mittel zu beantragen artifizi Effekte, die jetzt sollte ein Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe", hergestellt durch die vollständige Unfähigkeit zur Erreichung einer Standard ernsthaft auf Seite Rendering HTML / CSS. Es gibt zahlreiche Networking-Lösungen, die Ihnen die Möglichkeit zu "Auswirkungen" (Auswirkungen Freistellung dall'HTML als abgerundeten Kanten, Schatten Effekte, Reflexionen, etc ...) mit Patches auf den Blättern der Stile, spezielle Tricks mit div veredelten , JavaScript-Bibliotheken, die Nutzung von canvas etc ...
Aus rein pädagogischen ich würde erklären, weitere technische (Cross-Browser), die für die abgerundeten Kanten der Bilder:

Demos und Quellen

Lesen Sie weiter ... "

Wordpress: Schritt für Schritt, wie Sie ein Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie die Schaffung eines persönlichen Login-Prozedur, mit Ajax-Funktionalität via jquery. Es gibt verschiedene Möglichkeiten zum Anpassen der Login Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir benutzen ein Low-Level, obwohl wir noch Schnittstellen zu den Kernel Wordpress. Achten Sie außerdem darauf, zur Validierung eines Nutzers durch die doppelte E-Mail / Passwort ein.

Warum erstellen Sie ein Login?

In manchen Kontexten zurückkehren können uitle haben die Kontrolle über die Login-Seite, auf, einen benutzerdefinierten Layout an unsere registrierte Benutzer. Sie können auch bereichern die Seite mit Informationen, ein Logo von der klassischen "Passwort vergessen?"
Um den Zugang per E-Mail (wie hier gezeigt-Vertrag) statt user_login Standard Wordpress
Zu können, geben Sie einen Login-Panel in der Seitenleiste von unserem Blog
Und schließlich, haben ein Skelett - und eine Idee - für eine gute Plugin

Umgebung

In unserem Beispiel / Tutorial Arbeit an der Wurzel von Wordpress in einem Ordner mylogin Ich habe zwei PHP-Dateien in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle von unseren Login, mit allen Funktionen Javascript / jquery denen wir dienen. Die zweite Datei, logon.php wird der Code zur Validierung der Benutzer. Dann erstellen wir einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder sind ein klassisches Ajax-Loader: erzeugen Sie sie online unter AjaxLoad.info. Am Ende sollten Sie:

mylogin

index.php
logon.php
css

layout.css
Bilder

ajax-loader.gif

Lesen Sie weiter ... "

Wordpress: Verbesserung der Liste der Kommentare

Mittwoch, 22. Oktober, 2008

Die Standard-Template für Wordpress (wie andere) in der Regel eine alternative Layout für die Liste der Kommentare. In der Standard-Vorlage zum Beispiel ist auf eine Klasse css alt nach der Logik:

PLAIN TEXT

PHP:

/ / File comments.php
$oddcomment ; ?>id= "comment-<?php comment_ID() ?>" > <li <? php echo $ oddcomment;?> id = "comment-<? php comment_ID ()?>>
[...]
/ * Änderungen jeder anderen Kommentar an eine andere Klasse * /
empty ( $oddcomment ) ) ? 'class="alt" ' : '' ; $ Oddcomment = (empty ($ oddcomment))? "Class =" alt "':'';

Dies führt dazu, dass der Tag li $oddcomment gesetzt ist, sobald eine leere ( "" und class="alt" = class="alt" Eine Änderung könnte nützlich sein, eine zusätzliche Klasse ist, wenn der Autor des Blogs um einen Kommentar schreiben:

Bild

Ich zum Beispiel habe ich den folgenden Code in die Datei comments.php:

PLAIN TEXT

PHP:

<? Php
$comment -> user_id == 3 ) ? ' $ Authcomment = ($ Kommentar -> user_id == 3)? " ; authcomment':'';
empty ( $classcomment ) ) ? ( ( $authcomment == '' ) ? ' alt' : '' ) : '' ; $ Classcomment = (empty ($ classcomment)), (($ authcomment =='')? "alt':''):'';
>
id= "comment-<?php comment_ID() ?>" > <li class = "<?=$ classcomment ?><?=$ authcomment?> "id =" comment-<? php comment_ID ()?>>

Die Zeile $comment->user_id==3 je nach ID Ihrer Benutzer. Ich möchte nicht mit dem Administrator, auf das Blog, aber ich habe meine ID=3 Normalerweise ID 1 1, wenn Sie diesen Benutzer $comment->user_id==1 In diesem Weg, die abwechselnd neben Layout auf der linken Seite Kommentare von Besuchern, ist sofort erkennbar Reaktion der Autor des Blogs.

Wordpress: ändern AdminBigWidth für Entwickler

Freitag, 17. Oktober, 2008

AdminBigWidth ist ein Plugin für Wordpress können, um den Arbeitsbereich der gesamten Bildschirm. Es ist ein wirklich einfaches Plug-and-trivial, weil der Code tut, ist die .wrap

PLAIN TEXT

PHP:

AdminBigWidth Funktion () (
; echo '<style type="text/css">. wrap (max-width: keine) </ style>';
)
, 'AdminBigWidth' ) ; add_action ( 'admin_head', 'AdminBigWidth');

Für diejenigen, die wie ich mit dem Wordpress-Editor im HTML-Modus kann nützlich sein, um eine feste Zeichen, wie z. B. Courier, statt der vorgeschlagenen Standard-Schriftart. In diesem Weg, zumindest für Entwickler, ist es einfacher, um Source-Code. Gehen Sie hierzu einfach den Stil der AdminBigWidth, einen neuen Ansatz, die sich CSS sull'editoria, wenn im HTML-Modus. Man könnte ein Plugin schreiben (zwei Zeilen), dies zu tun, aber es ist besser zu nutzen ihren Code AdminBigWidth, um zu vermeiden, eine weitere Belastung aufgrund all'ennesimo Plugin:

PLAIN TEXT

PHP:

AdminBigWidth Funktion () (
; echo '<style type="text/css">. wrap (max-width: none) # # editorcontainer Inhalt (font-family: "Courier New, Courier, Monospace) </ style>';
)
, 'AdminBigWidth' ) ; add_action ( 'admin_head', 'AdminBigWidth');

CSS3: jemand hat gesehen Internet Explorer?

Donnerstag, 16. Oktober, 2008

Ich besitze keine ...

PLAIN TEXT

CSS:

p (
/ * * Runde Ecken /
border-radius: 9PX; / CSS * 3 * /
-o-border-radius: 9PX; / Opera * * /
-iCab-border-radius: 9PX; / iCab * * /
-KHTML-border-radius: 9PX; / Konqueror * * /
-MOZ-border-radius: 9PX; / * Firefox * /
-webkit-border-radius: 9PX; / * * Safari /
)

Wordpress: wie man eine Antwort auf den Kommentar mit jquery

Freitag 3. Oktober, 2008

Vor kurzem Cristiano Fino eine Gewinn-Plugin für Wordpress können zwei Links zu jeder Kommentar von einem Post (vielleicht haben Sie installiert eine ähnliche, angesichts der Tatsache, dass das Verzeichnis Wordpress.org Ich habe ein paar Irre, sondern als ein italienischer Software wäre die Veranstaltung zu Ehren der ausgezeichneten Arbeit von Cristiano). Diese Link (Antwort & shares), treffen und / oder ein Zitat der Autor von einem Kommentar, indem Sie die langweilige Betrieb, um das Zeichen an (@), um anzuzeigen, an wen sie gerichtet ist. In diesem Tutorial möchte ich erklären - in den mittel-erfahrene Benutzer - wie Sie diese beiden Features "auf der Hand", ohne all'istallazione Plugin. Auch nutzen die Möglichkeiten der jquery an die Partei, in Javascript. Die Technik stellt die gleichen I verwendet, um diese Funktion in diesem Blog.

Hinweis: Die Verwendung eines Plug ist die beste Lösung für diejenigen, die häufig zur Änderung ihrer Vorlage Wordpress oder zumindest, hat in der Erwartung zu tun. Dieses Tutorial soll nur zeigen, wie Sie gezielt in den Code Wordpress und ist für die meisten neugierig.

Ändern Sie die Datei comments.php

Die erste Änderung zu machen ist, geben Sie den Link "Antwort" und "Einheiten" innerhalb jeder Kommentar. Um dies zu tun, bearbeiten Sie die Datei comments.php befindet sich im Ordner unserer Thema. Diese Datei enthält alle Anweisungen, die Ihnen erlauben, um die Kommentare am Ende eines Posts. Der Abschnitt, der uns interessiert (die können geringfügig vom Thema zu Thema) ist die Schleife Schaffung der verschiedenen Stellungnahmen, erkennbar durch:

Lesen Sie weiter ... "

Erstellen Sie ein Rohr durch Trennzeichen CSS

Dienstag, 9. September, 2008

Oft finden Sie eine Reihe von Links verteilt waagerecht, getrennt durch ein Pipe "|", das Bildzeichen dell'asticella vertikale. Außerdem, wenn Sie über gute Schreiben von HTML, werden Sie feststellen, dass diese Reihe von Links - scheinbar horizontalen - andere sind nicht wetten, dass Listen UL oder OL Das Ergebnis ist, dass anstelle des Schreibens:

PLAIN TEXT

HTML:

<p>
> Link 1 </a> | <a href = "#2" > Link 2 </a> | <a href = "#n" > Link n </a> <a href = "#1"> Link 1 </ a> | <a href = "#2"> Link 2 </ a> | <a href = "#n"> Link n </ a>
</ P>

Es wäre besser zu nutzen:

PLAIN TEXT

HTML:

<ul>
> Link 1 </a> </li> <li> <a href = "#1"> Link 1 </ a> </ li>
> Link 2 </a> </li> <li> <a href = "#2"> Link 2 </ a> </ li>
> Link n </a> </li> <li> <a href = "#n"> Link n </ a> </ li>
</ Ul>

Lesen Sie weiter ... "

Firebug Lite: Firebug für IE, Opera und Safari

Dienstag, 22. Juli, 2008

Durch Firebug Lite können Sie eine vereinfachte Version der "Note"-Erweiterung für den Firefox-Browser Microsoft Internet Exploer, Opera und Apple Safari. Firebug Lite kann auf zwei Arten: als Aufforderung Lesezeichen oder als Bibliothek offline

Bookmark-Modus

Durch die Aufnahme dieser "besonderen Adresse" Firebug Lite unsere Favoriten (ziehen Sie den Link zu den Favoriten) - Der Code ist:

PLAIN TEXT

HTML:

javascript: var% 20firebug = document.createElement ( 'script'); firebug.setAttribute ( 'src', 'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); Dokument. body.appendChild (Firebug); (Funktion () (if (window.pi & & window.firebug) (firebug.init ();) else (setTimeout (arguments.callee );}})(); void (Firebug);

Sie können Firebug Lite auf jedem Web-Site und von jedem Browser. Dies ist vielleicht die interessanteste, obwohl die Funktionen sind sehr begrenzt.

Offline

Alternativ, wenn wir die Entwicklung einer Web-Site, können Sie ein Paket Javascript und installieren Sie es auf unserer Web! Auf diese Art können wir Firebug Lite auch ohne eine Internet-Verbindung und lokaler Ebene.

Firebug Lite ist ein Weg zum Ausgleich für das Fehlen dieser Ausweitung auf andere Browser, aber es erschien mir sehr langsam und begrenzt, vor allem in CSS! Wie sie sagen: besser als nichts ...

Safari, löschen Sie die blaue Grenze zu den Eingabefeldern

Montag, 14. Juli, 2008

Safari, der Apple-Browser für Windows, produziert mit blauem Rand (blaue Grenze), wenn Sie in ein Feld input Wenn in einigen Fällen kann es angenehm, andere werden wirklich ärgerlich! Zum Löschen geben Sie einfach in unserem Stylesheet:

PLAIN TEXT

CSS:

/ * ____________________________ Entfernen blauem Rand * /
: 0 none } Eingang (Entwurf: 0 none)

Oder, alternativ, direkt Attribut dem Tag input

PLAIN TEXT

HTML:

... <Eingang style = "umreißen: 0 none" ... />

Undolog.com

Sehr kurze Trick: Vielseitigkeit von CSS-Klassen

Verwandte Post