Sidebar Widgets CSS

Frau_Braun

Dies ist eine Ergänzung zu diesem Thread.

Ich habe mir die Mühe gemacht, die Selektoren der Standard-Widgets aufzulisten, damit man sie mal - z. B. für eine Neuformatierung - beisammen hat.

Hier sind sie.

Der universelle allumfassende Sidebar-Gesamtcontainer
#sidebar

Überschriften
h2.widgettitle

Pages-Widget
li#pages.widget.widget_pages (Container)
ul
li.page_item page-item-20 (Titel der Einzelseiten)

Kalender-Widget
li#calendar.widget.widget_calendar (Gesamtcontainer)
#calendar_wrap (äußerer Kalender-Container)
table#wp-calendar (innerer Kalender-Container)
caption (gibt den Monat an)
#prev (voriger Monat)
#next (nächster Monat
.pad (Raumfüller im Tablefoot)
Kalender-Tabelle:
tbody, thead, tr, td, tfoot

Archiv-Widget
li#archives.widget.widget_archive (Container)
ul (Monatsüberschriften)

Link-Widget
li#linkcat-13.widget.widget_links (Container für bestimmte Kategorie)
ul.xoxo.blogroll (Links)

Meta-Widget
li#meta.widget.widget_meta (Container)
ul (Metaangaben)

Such-Widget
li#search.widget.widget_search (Container)
form#searchform (äußerer Container)
div (innerer Container)
.hidden (Label)
input#s (Eingabefeld)
input#searchsubmit (Abschicken)

Letzte-Artikel-Widget
li#recent-posts.widget.widget_recent_entries (Container)
ul (Titel der Einzelposts)

Tag-Cloud
li#tag_cloud.widget.widget_tag_cloud (Container)
a.tag_link-17 (Einzeltag)

Kategorie-Widget
li#categories-208936371.widget.widget_categories (Container)
ul
li#cat-item.cat-item-12 (Kategorietitel)

Text-Widget
li#text-208932273.widget.widget_text (Container)
div.textwidget (Textinhalt)

Kommentare-Widget
li#recent-comments.widget.widget_recent_comments (Container)
ul#recentcomments

Akismet-Widget
li#akismet.widget.widget_akismet (Gesamtcontainer)
#akismetwrap (äußerer Container)
div#akismetstats (Zählerfeld)
a#aka (Link zu Akismet)
div#akismet1 (Zählertext)
span#akismetcount (Oberzeile)
span#akismetsc (Unterzeile)
div#akismet2 (Zählertext Rollover)
span#akismetbb (Oberzeile Rollover)
div#akismeta (Unterzeile Rollover)

Falls ich etwas vergessen habe oder mit ein Fehler unterlaufen ist, bitte Bescheid geben. Es wird in diesem Post korrigiert.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

bei meinen neuen Designs liefern die Wdgets anderes html und css
und bei vielen Designs kommt nicht genau dieses html und css dabei raus

wer zb runde Boxen in der Sidebar haben mag, muß das ändern -

daher vermut ich gibts da keine Standard--HIlfe

lg

Frau_Braun

Das sind die Namen der Selektoren derjenigen Widgets, die mit dem [COLOR=Red]Default[/COLOR]-Theme geliefert werden. Deshalb habe ich sie Standard-Widgets genannt. Zweck meines Posts ist nur eine Übersicht (wer sich dafür interessiert...), keine Frage nach Hilfestellung.[INDENT](Edit: Siehe auch diesen netten Beitrag zur Widget-Formatierung.)
[/INDENT]Vielen Dank übrigens für Deinen Blog, Monika, ich habe schon tolle Tips darin gefunden!

Holger71

Bei mir sind die Bezeichnungen für die Widgets in der Sidebar auch völlig anders. Um spezielle Formatierungen in der CSS einzubringen habe ich einfach die entsprechenden Widgets aktiviert und dann die entsprechenden class="" Einträge rausgesucht. Ist vielleicht nicht die eleganteste Lösung aber ging schnell und vor allem funktioniert es.

Frau_Braun

Huch, das ist ja interessant. Genau das Gleiche wie Du, Holger, habe ich auch gemacht, allerdings habe ich nicht nur die Klassen, sondern auch die Identifier rausgesucht, und dann überprüft, wie sie in Kombination in meinem CSS-Editor angezeigt werden. Woran kann die unterschiedliche Bezeichnung wohl liegen? Man lädt ja ein bestimmtes WP-Packet herunter, und das sollte doch bei jedem gleich aussehen, oder? Ich beziehe mich auf WP 2.6.

Ich finde das eine wichtige Frage, denn was macht man, wenn man ein widget-fähiges Theme entwickelt, das man gern weitergeben möchte? Wenn die Bezeichnungen nicht verbindlich sind, kann man seine Formatierungen ja vergessen.

Holger71

Die Formatierung des Widgets wird ja im Widget selbst mit angegeben und über die CSS dann definiert.

Ein Beispiel für ein Flickr Photo Widget aus dem Options Theme:

PHP

<?php // Flickr Photo Stream
function widget_op_flickr() {
    echo '<div class="menu flickr">';
    if(function_exists('get_flickrrss')) :
        echo '<h2 class="section-header">'; _e('Flickr Photos','options'); echo "</h2>\n<div>";
        get_flickrrss();
        echo '</div>';
    else:
        _e('You need the Flickr RSS plugin to use this option.','options');
        echo ' <a href="http://eightface.com/wordpress/flickrrss" title="';
        _e('Flickr RSS plugin','options'); echo '"> '; _e('Flickr RSS','options'); echo '</a> ';
    endif;
    echo '</div>';
}
/***********************************************************
    Register flickr widget
***********************************************************/
function widget_op_flickr_register() {
    // Check for the required API functions
    if ( !function_exists('wp_register_sidebar_widget') )
        return;
    if ( !$options = get_option('widget_op_flickr') )
        $options = array();
    $widget_ops = array('classname' => 'widget_op_flickr', 'description' => __('A nicer display of the flickrRSS plugin.','options'));
    $control_ops = array('width' => 200, 'height' => 350, 'id_base' => 'flickr');
    $name = __('Flickr','options');
    $id = false;
        register_sidebar_widget(array($name, $widget_ops), 'widget_op_flickr');
}
?>

Alles anzeigen

Die Formatierung dann in der CSS und alles ist schick :)

Monika

Zitat von Frau_Braun

.....
Ich finde das eine wichtige Frage, denn was macht man, wenn man ein widget-fähiges Theme entwickelt, das man gern weitergeben möchte? Wenn die Bezeichnungen nicht verbindlich sind, kann man seine Formatierungen ja vergessen.

nein
man legt in der functions.php fest wie ein Widget dann das css ausliefern muß,

zb.:

Code

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'sidebar 1',
        'before_widget' => '', // Removes <li>
        'after_widget' => '', // Removes </li>
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

oder

Code

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'About',
        'before_widget' => '<li><div class="li"><div class="re"><div class="reunten"><div class="liunten">
<ul><li  class="%2$s">', 
        'after_widget' => '</li></ul></div></div></div></div></li>', 
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));

damit machte ich alles rund ;)

lg

Frau_Braun

Zitat von Holger71

Die Formatierung des Widgets wird ja im Widget selbst mit angegeben und über die CSS dann definiert.

Das würde bedeuten, dass die Angabe für die Formatierung der [COLOR=Red]Standard[/COLOR]-Widgets des Theme default (bzw. default_de) in der WP-Ordner-Struktur, die man im ersten Schritt bei Wordpress herunterlädt, hier niedergeschrieben ist:

wordpress/wp-includes/widgets.php

All diese Bezeichnungen, die ich in meiner Liste in Post #1 angegeben habe, sind dort (in der widgets.php) tatsächlich auch zu finden. Aber wo ist die zugehörige CSS-Datei? In der style.css für default (bzw. default_de) sind die Definitionen nicht vorhanden. Das Flickr-Widget würde ich übrigens nicht als Standard-Widget bezeichnet, weil es nicht zum Original-Lieferumfang gehört, den man bei Worpress herunterlädt.

Liebe Monika, während ich dies hier formuliere, ist Deine Antwort hier eingetrudelt. Man schreibt ja in die functions.php nur ein Widget, das NICHT zu den Standard-Widgets gehört, stimmts? Wie das mit diesen Nicht-Standard-Widgets aussieht, verstehe ich nun (glaube ich jedenfalls...:)), den Link oben habe ich ja selbst angegeben (Post #3). Mich interessieren aber die Grund-/Standard-/Anfangs-Widgets.

fukushi

Habe mir die Posts durchgelesen, scheitere aber leider an meinen nicht vorhandenen Kenntnisse der CSS Gestaltung...

Ich verwende das RSS Widget im Theme Dark 3Chemical DE und möchte jetzt gerne die Überschrift anpassen (farblich)

Wenn ich jetzt richtig liege muß ich für

Überschriften
h2.widgettitle

in der style.CSS Angaben machen.

Frage: Welche und welches Format ?

Holger71

fukushi
Link zur Seite?

fukushi

Zitat von Holger71

fukushi
Link zur Seite?

anbei der Link auf meine Testseite

Holger71

Du brauchst nur die Formatierung von
class="widgetready" id="widgetwidget_archive"

übertragen auf

class="widgetready" id="widgetwidget_rss"

fukushi

Zitat von Holger71

Du brauchst nur die Formatierung von
class="widgetready" id="widgetwidget_archive"
übertragen auf
class="widgetready" id="widgetwidget_rss"

Wo wird diese Formatierung vorgenommen ? Weder in der style.css noch function.php finde ich die schon bestehende Formatierung z.B für "archive"

Ist leider doch nicht so einfach wie ich dachte.... Ich gebe hier auf...

Danke trotzdem für die Hilfe

gurumosh

hallo zusammen,

versuche gerade mittels einer custom.css meine sidebar zu formatieren. klappt soweit auch ganz gut, hier als beispiel die formatierung für die top-kommentatoren:

Code

/*MITARBEITER DES MONATS*/


#top-commentators ul {
    background: #FFFBCC;
    border: 1px solid #E6DB55;
    line-height: 1.0em;
    -moz-border-radius: 5px;
    padding: 0.9em;
    -webkit-border-radius: 5px;

jetzt suche ich nach der class bzw. ID für die interne wordpress-blogroll. lautet die "links" oder "bookmarks"? hab schon diverse varianten ausprobiert, bin aber irgendwo zu doof. (es handelt sich um den teil, der oben im code zwischen # und "ul" steht, denn bräuchte ich für die blogroll.

besten dank
guru

spickzettel

Die Blogroll hat die class .blogroll

gurumosh

Zitat von spickzettel

Die Blogroll hat die class .blogroll

Danke, aber mit dem "." davor bekomme ich im Editor gleich fehlerhaften CSS-Code angezeigt. Und nur "blogroll" funktioniert nicht.

Jemand noch 'ne Idee?

spickzettel

Nur .blogroll müsste eigentlich funktionieren. Natürlich ohne das # und ohne das ul, also z.B.

Code

.blogroll {
    background: #FFFBCC;
}

gurumosh

Danke Dir, Spickzettel! Hat funktioniert!

Code

.blogroll {background: #F2F2F2; border: 1px solid #000000; line-height: 1.0em; -moz-border-radius: 5px; padding: 0.9em; -webkit-border-radius: 5px;}

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar Widgets CSS

Jetzt mitmachen!