Archiv

Wordpress

Einen Hintergrund für den Text im Block

Manchmal macht es Sinn (zum Beispiel für die Suche) Text nicht auf einem Bild als px

Grafik zu lassen,sondern Ihn als Text auf das entsprechende Bild zu schreiben. Hier sicher nicht.

Code Beispiel hierzu ohne die .css zu bearbeiten kann so lauten:

< div style=“background-image: url(‚http://xy.files.wordpress.com/2012/03/xy.gif?w=500&#8216;); background-repeat: no-repeat;float:left;width:500px;“>Manchmal macht es..< / div >

Der Text kann in diesem Div container, dann nach belieben einfach durch das < br > Tag umgebrochen werden.

Für eine Angabe in der ausgelagerten .CSS findet man hier auch ein Beispiel für den Code

http://www.css4you.de/example/background-repeat.html

Ab CSS 3

Code-Beispiel für border-radius:

div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}

Aufruf der o.g. Stylsheetangabe Rahmen mit abgerundeten Ecken:

Beispiel 1 div1

<div class="div1">Inhalt </div>

Beispiel 2 div2

<div class="div2">Inhalt</div>

Browser

Alle Browser, die das -moz- oder khtml-prefix nicht unterstützen, zeigen normale eckige Rahmen an, deshalb ist der Einsatz kein Problem.

Beispiel1

Code Beispiel des Elementes (Divs) mit dem grauem Rand für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border:6px solid #aaaaaa;left:1.2em;top:30px;-moz-border-radius:10px;-khtml-border-radius:30px;“>Beispiel1 < /div >

Die folgenden Eigenschaften lassen Netscape ab Version 6, Mozilla und Firefox abgerundete Ecken darstellen. Dabei steht 1.für alle vier Ecken, die anderen entsprechend für oben links, oben rechts, unten links und unten rechts

Für Mozilla  (Gecko)

-moz-border-radius

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomrigh

CSS3

border-radius

  • border-top-left-radius
  • border-top-right-radius

Webkit

-webkit-border-radius

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius

Konqueror und Safari

-khtml-border-radius

  • -khtml-border-radius-topleft
  • -khtml-border-radius-topright
Beispiel2 runde Ecken

Code Beispiel des grünen Elementes (Divs) für die CSS Angabe im Blockelement, ohne die .CSS von WordPress zu verändern. Gesetzt:“was zu letzt steht gilt“

< div style=“border: 3px solid #aaaaaa; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; width: 100px; height: 200px; background-color: #058020; top: 140px; left: 450px; padding: 10px;“>Beispiel2 runde Ecken < /div >

Hier kann man sich den Borderradius online anzeigen lassen: http://border-radius.com/

Hier gibt es Informationen zum erstgenanntem ausgelagertem CSS http://www.css4you.de/trickkiste/tr00012.html

Sass für einen sauberen CSS Code von Verläufen

Sass – Syntactically Awesome Stylesheets

Es gibt verschiedene CSS-Präprozessoren, wie Sass. Sass ist eine etablierte kostenlose leistungsfähige Software.
Sie definiert ein Dateiformat mit der extension .sccs und übersetzt diese in .css Datein.
Die SCSS-Syntax ist eine Obermenge der gewöhnlichen CSS3-Syntax des W3Cs.

Neben der maßgeblichen Ruby-Umsetzung gibt es eine PHP-Umsetzung, die nahtlose Einbindungen in verbreitete PHP-basierte Systeme wie TYPO3, WordPress und Drupal ermöglicht.
(quelle:webkrauts.de)


Sass für Typo3

Für TYPO3 gibt es die Erweiterung „sassify“.
Sassify ermöglicht es, die SCCS – Datein direkt auf dem verwendetem Server abzulegen. Das spart Zeit, weil es die Kompilierung erspart

Für jede Webseite kann eine SCSS (Sass) angelegt werden
Beispiele befinden sich hier:

http://typo3blogger.de/sass-scss-sassify-extension/


Sass Anzeige in Gradient Generator

http://www.colorzilla.com/gradient-editor/

Willkommen bei Webdevlink.

Heute geht es in diesem Artikel, um ein Antispam Lösung für den kostenlosen xy.wordpress.com blog

Hier meine ersten deutschsprachigen Links:

http://playground.ebiene.de/antispam-bee-wordpress-plugin/

Der erste Artikel ist mir viel zu lang. Ich will keinen ewig langen Text lesen nur um einen Spamfilter zu finden, der für Typo 3 und Drupal recht leicht und schnell mit einem Capture einzubinden ist.

http://wpcafe.de/wordpress-plugin/wordpress-plugin-antispam-bee-schutz-gegen-spam/

Also zum zweiten Link: Hier ist ein tolles Video zu sehen, gut beschrieben, tolle Qualität aber unbrauchbar für die kostenlose Version- zwar ist der Download kostenlos, aber schon nach wenigen Sek. stellt sich raus, dass dieser Import des kostenlosen download nicht wie beschrieben möglich ist.

 

Zu den CSS Angaben: Ohne die .CSS (upgrade für WordPress ZB)gebe ich hier bis auf weiteres in allen Beispielen den einfachen Code an. Der kann in jedem Blockelement benutzt werden. Das gilt nicht nur für den WordPressblog sondern auch für andere CMS.
Professionelle legt man allerdings aus Gründen der Übersichtlichkeit eine externe CSS an. Nur ist das für kleine Blogs nicht notwendig. Wenn Ihr in einem Block Eurer Firma arbeitet solltet Ihr natürlich nicht einfach drauf los gestalten. Es gibt CB`s und diese werden meißt in den externen CSS – Datein umgestetzt.

Die Beispiele findet Ihr über die Kathegorien oder über die Artikel.

Date: 27.02.2012