WordPress: Widgets frei positionieren

CSSKein WordPress Theme muss 08/15 sein. Das gilt besonders für Twenty Ten und Twenty Eleven. Mit ein wenig Kreativität kann man selbst aus den Standard-Themes eine Menge herausholen. Ich nutze das Twenty Ten Theme, was mich dazu nötigt, immer wieder Lösungen zu finden, wie bestimmt Elemente umgesetzt werden können. Nicht immer ist dies so simpel, wie das freie Positionieren von Sidebar-Widgets. Heute habe ich rechts neben den Euroclix Banner ein kleines Etikett eingefügt. Dieses Etikett befindet sich außerhalb des eigentlichen Bereiches.

Sidebar-Widgets können an jeder Position im Blog angezeigt werden

Die Position lässt sich einfach per CSS mit den Eigenschaften „margin“ und „position“ steuern. Wer nicht weiß, wie und wo man ansetzten kann, hier die Snippets für das rote „Tipp“-Etikett:

HTML-Code im Text-Widget:

"Tipp!"

Das div-Element dient der Formatierung, diese erfolgt über die Zuweisung class=“tipp“. Der zugewiesen Stylesheet wurde in einer CSS-Datei hinterlegt.

Stylesheet (style.css):

#tipp {margin: 500px 0 0 280px; position:absolute;}

Wie man sieht, es ist sehr einfach. Durch die margin Werte wird der Abstand zum Eltern-Div (Position des Text-Widgets) definiert. Die position Angabe wird in diesem Fall benötigt, um das Element sichtbar zu machen.

Nach diesem Prinzip habe ich auch das Feld „Link der Woche“ im Header definiert. Auch hier wird für den Inhalt ein Textwidget genutzt. Die Snippets sind aufgrund der weiteren Stylesheets etwas länger.

HTML-Code im Textwidget:

Stylesheet (style.css):

#ldw { padding: 3px 10px 3px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #ffffff; background-color: rgba(255, 255, 255, 0.5); margin-top: -64px; position:absolute; width: 260px; font-size: 11px; } #ldw a { color: #000000; text-decoration: none; } #ldw a:hover { text-decoration: underline; } .star { color: #000000; font-weight: bold; font-size: 12px; } 

Weitere Möglichkeiten:

Mit der Eigenschaft margin können auch Bilder und andere HTML-Elemente im Artikel in jede Position gebracht werden. Um ein bestimmtes Bild/Objekt in den Vordergrund zu holen, kann die Eigenschaft z-index: 1; im Stylesheet hinzugefügt werden. Bei mehreren Überlappungen wird das Bild mit dem höchsten Wert (z.B.: z-index: 10;) im Vordergrund angezeigt.

webdesignJeep

Frau


 

2 Gedanken zu „WordPress: Widgets frei positionieren“

  1. Hi,
    vielen Dank für den coolen Trick. 😉
    Hab ich sofort ausprobiert, nachdem ich schon lange danach gesucht habe. Nur beim Genesis-Theme funktioniert das nicht. Vielleicht weißt Du darauf eine Antwort?

    Liebe Grüße
    Thomas

    1. Hi Thomas,

      die Positionierung eines Bereiches (div) per CSS sollte immer funktionieren. Die einzige Erklärung, die ich habe: Irgendwo muss ein kleiner Fehler eingebaut worden sein (fehlender Punkt, fehlende Anführungszeichen etc.). Einfach den Code überprüfen, den Fehler sollte man schnell finden.

      Beste Grüße, Günter

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.