1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Styling von Textwidgets

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von sabienes, 17. August 2011.

  1. sabienes

    sabienes Well-Known Member

    Registriert seit:
    10. Februar 2008
    Beiträge:
    52
    Zustimmungen:
    0
    Hallo Ihr!
    Ich habe in meiner Sidebar einzelne Textwidgets, die ich unterschiedlich stylen möchte.
    Also:
    Widget 1 soll eine andere Hintergrundfarbe haben,
    Widget 2 ein bestimmtes Hintergrundbild,
    Widget 3 wieder eine andere Farbe.

    Geht das?
    Sabiene
     
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    Anderen Hintergrundfarben, Hintergrundbilder etc. sollte man ohne Probleme nutzen können, da man ja auch HTML in den Textwidgets verwenden kann.

    http://de.selfhtml.org/css/eigenschaften/index.htm

    Ob es dann auch den gewünschten Effekt erzielt, hängt aber trotzdem im Endeffekt vom gewähltem Theme ab, da das Aussehen der Sidebar ja auch über die im Theme enthaltene CSS-Datei definiert wird.

    Wenn dort, mal recht übertrieben ausgedrückt, eine dicke Pinkfarbene Umrandung definiert ist und du dann mit Grellgrünem Hintergrund ankommst, kann man sich ja vorstellen, dass dieses eventuell nicht so prickelnd ist, falls du verstehst, worauf ich hinaus will. ;)
     
  3. sabienes

    sabienes Well-Known Member

    Registriert seit:
    10. Februar 2008
    Beiträge:
    52
    Zustimmungen:
    0
    Und wo trage ich den HTML-Code ein? Direkt ins Widget?
     
  4. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
  5. sabienes

    sabienes Well-Known Member

    Registriert seit:
    10. Februar 2008
    Beiträge:
    52
    Zustimmungen:
    0
    Verrätst du mir an einem Beispiel, wie sowas aussehen soll?
    Ich habe es schon probiert, aber es geht nicht
     
  6. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    Ich habe da mal etwas vorbereitet. ;)

    Für die Hintergrundfarbe habe ich diesen Code verwendet;
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das fettgedruckte ist der Bereich, wo der Textinhalt eingetragen wird, der im Textwidget angezeigt werden soll.

    Für eine Hintergrundgrafik habe ich diesen Code verwendet;
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Beim oberen Code wird eine CSS Klasse mit der Bezeichnung hintergrund angelegt und dort dann die Hintergrundfarbe durch den mit der # versehenen Sechs Stelligen Hexcode vergeben.
    Es gehen auch 3 Stellen, wie zum Beispiel #fff für Weiß, aber ich kann jetzt nicht genau sagen, ob dies auch für Zwischentöne geht, da müsste man mal nach Farbtabellen suchen.
    Du musst bei den Klassenbezeichnungen eigentlich nur eine Regel beachten.
    Keine Klassenbezeichnung darf doppelt vergeben werden.

    Und so sieht das ganze dann in Aktion bei meiner Lokalen Installation aus;
    http://imageshack.us/photo/my-images/705/textwidgets.jpg/

    Ich hoffe ich habe es jetzt nicht zu kompliziert gemacht und konnte dir ein wenig weiterhelfen. ;)
     
  7. sabienes

    sabienes Well-Known Member

    Registriert seit:
    10. Februar 2008
    Beiträge:
    52
    Zustimmungen:
    0
    Super!
    Danke!
    Klappt wunderbar!
    Aber ein Problem habe ich noch: Ich möchte in den Widgets Links für weitere Infos zur Verfügung stellen.

    Ich habe den Code so geschrieben:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der Hintergrund ist wie gesagt richtig, aber die Links passen sich nicht an und ich finde echt den Fehler nicht.
    Oder lassen sich die generellen Vorgaben vom Sheet nicht einfach so überschreiben?
    Wenn ich den Code in das Style Sheet übertrage, werden mir wenigstens die Links unterstrichen, dass ist aber auch alles.

    Ich habe nicht gewusst, dass man solche Codes auch in die Widgets schreiben kann - again what learned!
     
  8. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi,

    nachdem die Gewitterfront mal so langsam weiterzieht, kann man auch mal wieder etwas besser nachdenken. ;)

    Mir ist aufgefallen, dass du zwar für die Links eine Klasse erstellt hattest, diese aber nicht angewendet hast.

    Laut diverser Tutorials, die ich zu diesem Thema gefunden habe, müsste die Definition auch ein klein wenig anders aufgebaut werden.

    Ich habe das ganze unter Berücksichtigung der Tutorials mal so versucht und es hat in meinem Testblog hingehauen.
    Die Änderungen habe ich mal hervorgehoben.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  9. sabienes

    sabienes Well-Known Member

    Registriert seit:
    10. Februar 2008
    Beiträge:
    52
    Zustimmungen:
    0
    Hallo Markus,
    oh Mann, ich habe dir ja echt viel Arbeit gemacht!
    Aber die Links bekomme ich nicht hin.

    Alles mögliche kann ich nun in meinem Widget verändern ... aber nicht die Links.

    Auf jeden Fall hast du mir viel geholfen, habe ein bisschen was verstanden.

    Falls ich mal was für dich tun kann....:lol:

    Sabiene
     
  10. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.955
    Zustimmungen:
    175
    Hi Sabiene,

    Was hattest du denn in Sachen Darstellung bei den Links genau geplant?

    Möglich ist ja (fast) alles. ;)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden