Artikel Tagged 'CSS'


Sehr kurze Auszug: Wordpress, trennen Sie die Kategorien in zwei Spalten

Inspiriert von WordPress Hack # 2 - Trennen Sie die Kategorien in der Seitenleiste Spalten nützliche "break" in zwei Spalten werden die Arten von WordPress.

Fortsetzung ...

Sehr kurze Trick: Vielseitigkeit von CSS-Klassen

nei fogli di stile CSS. Die meisten Experten wird schon wissen, aber ich werde oft gefragt, was ist der Unterschied zwischen class und id in der CSS. , è la possibilità di usare classi multiple. Ein Überblick über einige Unterschiede und Warnhinweise auf der Dose gefunden werden Klassen-und ID in CSS , aber eine nützliche Funktion, unterscheidet class von id ist die Möglichkeit, mehrere Klassen verwenden.

Fortsetzung ...

jQuery: runde Kanten auf die Bilder überlappen

Aufgrund der unterschiedlichen Rendering auf Browser, Microsoft Internet Explorer auf jeden Fall sehen, dass im Hinterkopf, wir müssen immer an Tricks Zuflucht zu Spezialeffekten, die mittlerweile zum Standard werden sollte gelten. Die vielfach diskutierte abgerundeten Kanten sind ein klassisches Beispiel für "Katastrophe" durch die völlige Unfähigkeit zu einer ernsthaften Standards auf Seite Rendern von HTML / CSS machen produziert. , etc… Es gibt viele Lösungen, die das Netzwerk an die "Effekte" (Auswirkungen der Befreiung bestehenden HTML als abgerundete Kanten, Schatten, Spiegelungen, etc ...) mit Flecken auf den Blättern von Stilen, spezielle Tricks bei der Verwendung von zu erhalten erlauben div gepfropft, Bibliotheken JavaScript, Verwendung von canvas , etc ...
Auf einer rein technischen Lehre möchte ich erklären, weitere (Cross-Browser), um die abgerundeten Kanten der Bilder anzuwenden:

Demo und Quelle

Fortsetzung ...

WordPress: Schritt für Schritt, wie sie ihre eigenen Login erstellen

In diesem Tutorial werden wir sehen, wie man einen persönlichen Login-Prozedur zu erstellen, auch mit Ajax-Funktionalität via jQuery . ). Es gibt mehrere Möglichkeiten, um die Anmeldung von WordPress anpassen, zum Beispiel durch die Verwendung von Haken und Filter ( add_action() , add_filter() ). Hier werden wir mit einem niedrigeren Ebene Verfahren, auch wenn es noch Schnittstellen zu den Kernel von WordPress. Darüber hinaus werden wir versuchen, einen Benutzer durch die dupla E-Mail / Passwort zu bestätigen.

Warum ihre eigenen Login?

  • In manchen Kontexten zurückkehren können uitle haben die maximale Kontrolle über die Login-Seite, um ein benutzerdefiniertes Layout für unsere registrierte Benutzer vorschlagen. Darüber hinaus können Sie die Seite mit nützlichen Informationen, ein Logo von der klassischen "Passwort vergessen?"
  • Um den Zugriff über die E-Mail (wie in den hier diskutierten Beispiel) statt user_login Standard WordPress
  • Um eine Anmeldung Panel in der Sidebar des Blogs eingeben
  • Und schließlich haben ein Skelett - und eine Idee - eine tolle Plugin : D

Umwelt

In unserem Beispiel / Tutorial werden wir auf die Wurzel eines Ordners innerhalb von WordPress Arbeit mylogin . . Wir schaffen zwei PHP-Dateien in diesen Ordner: index.php und logon.php . Die erste Frage wird unsere login-Schnittstelle mit allen Funktionen JavaScript / jQuery wir brauchen enthalten. Die zweite Datei, logon.php , enthalten den Code für benutzerdefinierte Validierung. e una cartella images . Dann erstellen Sie einen Ordner css und in dieser Datei layout.css und Ordner images . Im Inneren der Bilder Ordner legen Sie eine klassische Ajax-Loader: erstellen Sie Online- AjaxLoad.info . Am Ende sollten Sie haben:

  • mylogin
  • index.php
  • logon.php
  • Füttern
  • Layout.css
  • Bilder
  • ajax-loader.gif

Fortsetzung ...

WordPress: modifcare AdminBigWidth für Entwickler

AdminBigWidth ist ein Plugin für WordPress , dass der Arbeitsbereich der Verwaltung im Vollbildmodus können. Es ist ein sehr einfaches Plugin und trivial, in der Tat, seinen Code ist die Veränderung der CSS-Klasse .wrap :

1
2
3
4
AdminBigWidth function () {
; echo '<style type="text/css"> wrap {max-width: none}. </ style>';
}
, 'AdminBigWidth' ) ; add_action ('admin_head', 'AdminBigWidth');

Für diejenigen wie mich, die WordPress-Editor verwendet im HTML-Modus könnte nützlich sein, um einen nicht-proportionalen Schriftart wie Courier-Schrift anstelle der vorgeschlagenen voreingestellt. Auf diese Weise, zumindest für Entwickler, ist es einfacher, den Quellcode auszurichten. Dazu fügen Sie einfach, im Stil der AdminBigWidth , einen neuen Ansatz für CSS, die reflektiert, wenn der Editor im HTML-Modus befindet. Man könnte ein Plugin schreiben (zwei Linien), dies zu tun, aber es ist besser, einfach den Code verwenden AdminBigWidth , um so eine weitere Belastung durch die n-te Plugin zu vermeiden:

1
2
3
4
AdminBigWidth function () {
; echo '<style type="text/css"> wrap {max-width: none} # content # editorcontainer {font-family: "Courier New", Courier, Monospace}. </ style>';
}
, 'AdminBigWidth' ) ; add_action ('admin_head', 'AdminBigWidth');

Fortsetzung ...

jQuery: animated backgroundColor

(che nella versione camelize è backgroundColor ). Ich verstand nicht, wenn es ein bug oder so gewollt ist, bleibt die Tatsache, dass das, was die Methode animate() , um jQuery funktioniert nicht mit einigen CSS-Attribute der Arbeit, einschließlich background-color (welche Version camelize ist backgroundColor ). Zum Beispiel den folgenden Code hat keine Auswirkung:

1
2
3
4
5
"text/css" > < style type = "text / css">
div # box {background-color: # eee; width: 100px; height: 100px}
</ style >
<-! .... ->
"box" >< / div > < div id = "box"> </ div >
1
) . animate ( { backgroundColor : "#f90" } ) ; $ ('# Div box') animieren ({backgroundColor: "# f90"}).;

Zur Behebung dieses Problems müssen Sie eine Erweiterung installieren: jQuery Farbe Animationen . Dies ermöglicht eine "Animation"-Attribut backgroundColor und mehr:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Fortsetzung ...

Erstellen Sie ein Rohrtrenner durch CSS

Oft sieht man eine Reihe von Links verteilt horizontal getrennt durch Pipe "|" ist das Bildzeichen dell'asticella vertikal. . Darüber hinaus, wenn es eine gute Schreiben von HTML, merkt man, dass diese Liste von Links - scheinbar horizontal - nichts als Aufzählungen sind UL -oder OL . Daraus folgt, dass anstelle des Schreibens:

1
2
3
< p >
"#1" > Link 1 < / a > | < a href = "#2" > Link 2 < / a > | < a href = "#n" > Link n < / a > < ein href = "# 1"> Link 1 </ eins > | < ein href = "# 2"> Link 2 </ eins > | < ein href = "# n"> n Link </ eins >
</ p >

Es wäre besser zu nutzen:

1
2
3
4
5
< ul >
= "#1" > Link 1 < / a >< / li > < wird > < ein href = "# 1"> Link 1 </ eins > </ sie >
= "#2" > Link 2 < / a >< / li > < wird > < ein href = "# 2"> Link 2 </ eins > </ sie >
= "#n" > Link n < / a >< / li > < wird > < ein href = "# n"> n Link </ eins > </ sie >
</ ul >

Fortsetzung ...

Safari, entfernen Sie den blauen Rand am Eingabefelder

Safari, der Apple-Browser für Windows, erzeugt einen blauen Rand (blau umrandet), wenn Sie innerhalb eines Feldes klicken Sie input . Wenn es in manchen Fällen kann angenehm, wird anderen wirklich ärgerlich! So löschen Sie einfach einstecken in unserem Stylesheet:

1
2
/ * ____________________________ Entfernen blauen Rand * /
: 0 none } Eingang {outline: 0 none}

Oder alternativ direkt als Attribut in das Tag input :

1
"outline: 0 none" ... / > < Eingang style = "outline: 0 none" ... />

Fortsetzung ...

Text Replacement Techniken für HTML / CSS

Der korrekte Weg, um einen Titel in Grafiken auf einer Webseite einzufügen ist auf den Betrieb mit Stylesheets zu ersetzen (siehe Progressive Enhancement in Accessibility und Usability: unaufdringlich JavaScript ). Diese Technik ermöglicht es Ihnen, Inhalte leichter zugänglich Site unabhängig von der Display-Grafiken durch Stylesheets festgelegt machen. Außerdem haben Raupen und Spinnen, eine korrekte Lesen von HTML, ohne auf die Ersatz-Grafiken bieten dem Endbenutzer. Fügen Sie ein Bild direkt (TAG img ), in der Tat machen den Titeltext unzugänglich gewöhnliche Leser ASCII (Raupen, Spinnen, Blog-Plugins, Screenreader, etc ...).

Fortsetzung ...

Einfügen von Text mit CSS: IE7, ein schlechtes Geschäft

Auch wenn ich mich schriftlich über die Möglichkeiten von Stylesheets zu finden, bin ich gezwungen, auf die Seite legen Microsoft Internet Explorer! e after . Mit CSS2 wurde ein sehr interessantes Feature, das Eigentum, content in Verbindung mit Pseudo-Elemente verwendet before und after . Durch diese "style" verändern Sie den Inhalt einer Seite, wirkt ausschließlich auf die CSS-Datei. Zum Beispiel, wenn wir schreiben:

1
content : ">>" } li: before {content: ">>"}

) avrà ogni elemento preceduto dai caratteri “>>”! Eine Aufzählung ( UL , LI ) wird mit jedem Element vorangestellt werden ">>"! Alles, natürlich, kann auf diese Weise behandelt werden:

1
> fogli di stile < / span >< / p > < p > Ich kann Zeichen mit Einsatz < span > Stylesheets </ span > </ p >
1
content : "-->" } div p: before {content: "-->"}

Die Vielseitigkeit dieses Element ist noch nicht alles! Es ist möglich, weitere Parameter neben der einfachen (aber sehr nützlich) Text zu verwenden. Das Element content , in der Tat, es erlaubt auch spezielle Werte oder url:

1
2
3
content : url ( images/quote.gif ) } p: before {content: url (images / quote.gif)}
content : close-quote } p: after {content: close-quote}
content : url ( waves/sound.wav ) } p: before {content: url (Wellen / sound.wav)}

Für Details der Implementierung direkt auf der W3C - Schade, dass es nicht einmal Microsoft!

Fortsetzung ...