Farbverlauf im Menü entfernen/Menü anpassen ♥♥


Hallo ihr Lieben, nach einer Weile flaute (mir kamen keine Ideen mehr für Tutorials), habe ich entdeckt, dass Blogger es möglich gemacht hat, die Menüleiste nach unser Belieben zu verändern. Deshalb gibt es heute ein Tutorial dazu, wie man den Farbverlauf, der bei einigen Menüs im Vorlagendesigner auftaucht, entfernt.



Schritt 1
Öffnet in "Vorlage" die Html-Vorlage. Es kommt eine Meldung, drückt einfach auf Fortfahren, immerhin könnt ihr nichts kaputt machen. Falls ihr trotzdem Angst habt, dass euch das passiert, könnt ihr rechts oben im gleichen Fenster ein Back-Up herunterladen. So könnt ihr diese immer wieder hochladen, falls etwas schief läuft.


Schritt 2: Entfernen des Verlaufs
Es gibt zwei Möglichkeiten, den Verlauf zu entfernen. Die erste Möglichkeit ist, das Bild, das den Verlauf eures Menüs ausmacht, direkt zu entfernen.

Wenn ihr dieses Bild löscht, seit ihr schon fertig. Der Nachteil an der ganzen Sache ist, dass ihr, falls ihr doch wieder den Verlauf haben wollt, ihn nicht so schnell wieder kriegt, da sich wohl keiner den Link des Bildes merken wird. Aber sonst ist es nicht so tragisch.


Ich bevorzuge lieber die zweite Möglichkeit.


Hier ersetzt ihr den Wert einfach mit einem Farbwert. Oder ihr löscht nur "$(tabs.background.gradient) repeat scroll 0 0;". Dafür müsst ihr dann den Wert von "tabs.background.color" ändern, wie, zeige ich euch im nächsten Schritt.



Schritt 3: Fine-Tuning
Sucht weiter oben nach "Tabs Text". Es sollte so ähnlich aussehen wie im Bild. Hier könnt ihr eure Werte abändern, bis es euch gefällt. (Die Werte im Bild sind teilweise schon verändert. Achtet darauf, dass ihr bei Value und nicht bei Default eure Werte anpasst!)

Farbcodegeneratoren findet ihr im reichlich im WWW, zB.: http://colorschemedesigner.com/

Mehr Schriftarten findet ihr hier: http://www.google.com/webfonts#ChoosePlace:select
Ein Tutorial dazu wird noch kommen.

Und so sieht es am Ende bei uns aus:



Tipp: Bevor ihr alles per Auge absucht, benutzt die Suchfunktion. Die lässt sich bei den meisten Browser mit Strg+F öffnen. Noch mehr Kurzbefehle für Mac & Windows findet ihr hier.

16 Kommentare

  1. Ich finde die Tutorials so toll :) Respekt!

    AntwortenLöschen
  2. Hallo (: Ich hab' da ein Problem und zwar, mein Header der ist so weit nach rechts und eigentlich will ich den links haben ? nur ich weiß nicht wie sowas geht, hilfe wäre lieb (: copypastelove hat mir schon oft bei meinem blog geholfen, dankeschoen <3

    AntwortenLöschen
  3. Gibt es auch die Möglichkeit, da einen Farbverlauf einzubauen oder nur einfarbig? Mein Blog heißt Sonnenmädchen und ich hätte gerne richtig orange, rot, gelb...
    Ich hoffe, ihr könnt mir helfen. Liebe Grüße

    AntwortenLöschen
  4. Hach, ich mag euren Blog einfach. Ihr habt sooo tolle Tutorials, das ist wunderbar :)

    Mara's

    AntwortenLöschen
  5. Noch einfacherer geht's mit CSS - dies hier schaltet den Gradient komplett aus:

    Vorlagen-Designer > Benutzerspezifische CSS hinzufügen:

    .tabs-outer,.tabs-inner .widget li.selected a, .tabs-inner .widget li a:link,.tabs-inner .widget li a:visited,.tabs-inner .widget li a:hover {
    background-image:none !important;
    }


    Anschließend könnt ihr jede gewünschte Farbe im Vorlagen-Designer wählen.

    @Laura

    Verschiedene Farben für die einzelnen Punkte vom Seiten-Gadget bekommst du so:

    Vorlagen-Designer > Benutzerspezifische CSS hinzufügen:

    .tabs-inner .widget li:first-child a
    {
    background:green
    }
    .tabs-inner .widget li:nth-child(2) a
    {
    background:yellow
    }
    .tabs-inner .widget li:nth-child(3) a
    {
    background:orange
    }
    .tabs-inner .widget li:last-child a
    {
    background:red
    }


    Das ist die CSS für _vier_ Punkte - falls du mehr Punkte hast, musst du die CSS nach diesem Muster erweitern.


    .tabs-inner .widget li:nth-child(4) a
    {
    background:blue
    }
    .tabs-inner .widget li:nth-child(5) a
    {
    background:brown
    }


    usw. Der Selektor mit 'first-child' muss immer am Anfang sein, der Selektor mit 'last-child' immer am Ende - dazwischen kannst du die neuen Punkte einfügen, die immer um einen Wert (1,2,3,4 ..) nach oben gezählt werden. Die Zahl in der Klammer (2) gibt die Position von der Hintergrundfarbe an.

    Ist viel simpler als es vielleicht ausschaut, probier's vorher in einem Test-Blog aus, bevor du es in deinem Haupt-Blog anwendest.

    Cheers!

    AntwortenLöschen
    Antworten
    1. Hallöchen,
      bei mir funktioniert das ledier nicht :-(
      hab immernoch diesen blöden Schatten hinter dem Datum und den Gadget-Titeln. Was mach ich falsch?
      LG
      my Blog

      Löschen
  6. danke fuer die ganzen tutorials, sie helfen echt! ♥ ich wolt sagen, dass ich es gut hingekommen habe und ihr echt gut erklaeren koennt, wie diese ganzen HTML sachen funktionieren mit bildern etc. vielen dank! :)

    AntwortenLöschen
  7. Wow... danke das ist genau das tutorial was ich letztens gesucht habe... Danke!

    AntwortenLöschen
  8. Mein Blogger sieht ganz anders aus :o

    Wie bekomme ich das auch so hin?

    xoxo

    AntwortenLöschen
  9. Danke, danke, danke!!!! Ich bin seit Jahren daran verzweifelt für meinen Blog, mit dem Auwesome Inc template, eine vernünftige Menuleiste zu erstellen, weil ich keine Ahnung hatte, wie ich die Farbe - dass es ein Gradient ist, habe ich erst vor kurzem mitbekommen! - wegbekomme! ENDLICH eine hübsche Menüleiste!!! Du kannst Dir nicht vorstellen wie glücklich ich jetzt bin!
    (Und ich habe wirklich das ganze Netz auf Deutsch und Englisch nach einer Anleitung oder einem how to/tutorial abgesucht ... nichts! Bis ich das hier gefunden habe.)

    Ganz liebe Grüße

    Ursula

    AntwortenLöschen
  10. Wunderbares Tutorial :)

    Könnt ihr villt aush erklären wie man das Gradient an den Seiten der Posts wegbekommt? Oder bei Bildern? Würde mir seeehr helfen :)

    AntwortenLöschen
  11. boa danke dieses tutorial ist genau das was ich die letzten 2 tage versucht habe..wollte den balken weg aber wusste einfach nicht wie. dankeschön, super tutorial.lg noreen

    AntwortenLöschen
  12. wie kann ich denn mit dem vorlagendesigner mein menü in die mitte verschieben? hab "pages" nicht "links".. weiß nicht wie der CSS Code dazu ist :/

    AntwortenLöschen
  13. Gelobt seist du für dieses Toturial! Dieser hässliche graue Verlauf hatte sich bei mir im Hintergrund verselbstsständigt und ich hab mir nen Wold gesucht, um den wegzubekommen. 1000 Dank, jetzt hats geklappt!

    AntwortenLöschen
  14. ich komme nicht so ganz zurecht... mit dem neuen HTML Ding... HELP please

    AntwortenLöschen
  15. Leider funktioniert weder Variante eins noch zwei bei mir.

    in meiner Blogger-Version gibt es kein "tabs-outer", sodass ich auch nichts entfernen könnte. Für Hilfe wäre ich sehr dankbar :)

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!