farbiger Hintergrund für Gadgets

Dienstag, 26. Februar 2013

Ich mache bei der Februarblogrunde von Grete mit und bin heute dran, ein Kreativ-Freebie zur Verfügung zu stellen. Ich hab mir was zum Aufhübschen für´s Blogoutfit überlegt und versuche mich mal an einem Blogtutorial. Ich hoffe, dass ich es einigermaßen verständlich rüberbringen kann und ihr euch am Ende nicht fragt "hä was wollte uns die Autorin eigentlich damit sagen?"
Es geht darum, die Gadgets in der Sidebar mit farbigen Hintergründen zu versehen wie ich es beispielsweise bei meinen Labels oder im Blogarchiv gemacht habe:



Also los gehts...

Erstens:
Speichert sicherheitshalber euer jetziges Design mal wieder ab:
Öffnet "Vorlage" dann "Backup/Wiederherstellung" und speichert eure Vorlage.


Zweitens:
Öffnet "Vorlage" dann "HTML bearbeiten"  und sucht (mit STRG + F) nach "widget id"


Drittens:
Jetzt suchen wir die Widget ID von dem Element, welches farbig hinterlegt werden soll.
  • Ist es wie im Beispiel die Liste mit den Labels suchen wir nach "Label1" oder "Label2" (wie in meinem Fall). 
  • Bild -> "Image1", "'Image2" etc.
  • Linklisten -> "LinkList1"
  • HTML/JavaScript Seitenelement -> "HTML1"
  • Text -> "Text1"
  • usw.
Alle Gadgets mit Überschrift sind leicht zu finden, da sie dahintersteht.

Viertens:
Nun suchen wir uns einen Platz in unseren Widget-Vorlagen, wo wir unseren "Code" einfügen. Im Prinzip könnt ihr ihn überall dort hinsetzen wo ihr die "geschweiften" Klammern = } findet.
Ich habe die Codes bei den

/* Widgets
----------------------------------------------- */


untergebracht (die Stelle findet ihr, wenn ihr mit STRG+F nach "widgets" sucht) und zwar muss der folgende Code an einer Stelle direkt unter eine } Klammer gesetzt werden!!!

Hier der Code:

#Label2 {
background: #DEIN FARBCODE;
}


Die Farbcodes findet ihr z.B. hier [Klick], sucht euch etwas nettes aus :-) und ersetzt "DEIN FARBCODE" mit der 6-stelligen Zahl.

Das Gleiche könnt ihr natürlich mit euren Linklisten, Texten, Bildern etc. machen:

 #Linklist1 {
background: #DEIN FARBCODE;
}


#Text1 {
background: #DEIN FARBCODE;
}


 #Image1{
background: #DEIN FARBCODE;
}


Fünftens:
Jetzt könnt ihr über "Vorschau" sehen wie es aussieht.
Wenn ihr fertig seid, nur noch speichern und das wars :-)

Ich hab mir das alles nicht selbst zusammengebastelt, sondern hier in ähnlicher/englischer Form entdeckt und für alle meine lieben Leser/innen übersetzt und aufgearbeitet.


Ich wünsch euch viel Spaß beim "Rumprobieren".
Viele liebe Grüße
pipa


Kommentare:

  1. Liebe Pipa

    Danke für den Tipp! Mal schauen, ob ich das hinkriege:-)


    Herzlichste Grüsse
    Esther

    AntwortenLöschen
  2. oh super !!! Vielen Dank ♥♥♥

    Liebe Grüsse,
    Andrea

    AntwortenLöschen
  3. Ob ich mich das traue? danke auf alle Fälle, du hast so ein tolles Blogdesign!


    lg von Daxi

    AntwortenLöschen
  4. Danke für den Tipp. Mal sehen, ob ich mich da mal ran trau. Ich hab immer Angst, dass ich den ganzen Blog zerschieß, wenn ich am Html rumbastel.

    Liebe Grüße
    Krissy

    AntwortenLöschen
  5. Supi, das passt mir gut in den Kram, da mein Blog eh noch ne ziemliche Designbaustelle ist...das werde ich bei Zeit mal ausprobieren. Danke!
    LG Vanessa

    AntwortenLöschen
  6. Ich hab mich bisher noch nie getraut am HTML rumzumachen.....hab immer Angst, dass hinterher nix mehr funzt :-)
    Vielleicht wage ich es mal???
    GLG
    Simone

    AntwortenLöschen
  7. ....danke Pipa....
    Ich brauche für alles Anleitungen in Sachen Pc:-)
    Wenn dieser dann mal wieder läuft werde ich am Blog schrauben:-)
    Vlg
    Maren

    AntwortenLöschen
  8. Danke Dir Pipa!
    Für solche Tipps bin ich immer dankbar...irgendwie tue ich mich in Sachen Blogdesign immer schwer...

    LG Tina

    AntwortenLöschen
  9. Vielen lieben Dank für diesss schöne Tut! Ich habe in der letzten Zeit schon immer Dein Design bewundert und dachte mir immer: "Wie macht sie das denn nur?".
    Ich werde mich da demnächst mal dran versuchen.
    Ich frage mich nun nur noch wie Du die kleinen runden Icons oben rechts gezaubert hast? ;)

    Liebe Grüße!

    AntwortenLöschen
  10. Danke für deine Hilfe... irgendwann wird mein Blog auch mal richtig schön ;-)
    LG Birgit

    AntwortenLöschen
  11. Super.... Danke dir liebe Pipa... ich versuche das auch mal... wenn alles weg ist; musst du es wieder reparieren ;))))

    GLG nadine

    AntwortenLöschen
  12. Oh toll, das merk ich mir – Danke für den tollen Tipp!
    Liebe Grüße, Änni

    AntwortenLöschen
  13. Liebe Pipa,
    vielen Dank für die lieben Kommentare!
    Dein Blog ist toll und deshalb bleib ich gleich hier ;o)
    Liebe Grüsse,
    Melanie

    AntwortenLöschen
  14. Das finde ich toll.
    Vielen Dank dafür.
    LG Nadine

    AntwortenLöschen
  15. Hallo,

    habe dir und deinem süßen Blog einen Award verliehen, hoffe du nimmst ihn an!

    http://taticupcake.blogspot.de/2013/03/geschenkanhanger.html

    GLG, Tati

    AntwortenLöschen

Vielen Dank, dass du dir die Mühe machst und Zeit nimmst, einen Kommentar zu hinterlassen. Da ich gern über die Kommentarfunktion kommuniziere, werde ich bei Fragen direkt hier antworten.
♥ liche Grüße
pipa