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.
Im unseren Fall sieht das Bild so aus: http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png
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.
Ich finde die Tutorials so toll :) Respekt!
AntwortenLöschenHallo (: 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öschenGibt 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...
AntwortenLöschenIch hoffe, ihr könnt mir helfen. Liebe Grüße
Hach, ich mag euren Blog einfach. Ihr habt sooo tolle Tutorials, das ist wunderbar :)
AntwortenLöschenMara's
Noch einfacherer geht's mit CSS - dies hier schaltet den Gradient komplett aus:
AntwortenLöschenVorlagen-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!
Hallöchen,
Löschenbei 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
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öschenWow... danke das ist genau das tutorial was ich letztens gesucht habe... Danke!
AntwortenLöschenMein Blogger sieht ganz anders aus :o
AntwortenLöschenWie bekomme ich das auch so hin?
xoxo
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!
AntwortenLöschen(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
Wunderbares Tutorial :)
AntwortenLöschenKönnt ihr villt aush erklären wie man das Gradient an den Seiten der Posts wegbekommt? Oder bei Bildern? Würde mir seeehr helfen :)
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öschenwie 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öschenGelobt 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öschenich komme nicht so ganz zurecht... mit dem neuen HTML Ding... HELP please
AntwortenLöschenLeider funktioniert weder Variante eins noch zwei bei mir.
AntwortenLöschenin meiner Blogger-Version gibt es kein "tabs-outer", sodass ich auch nichts entfernen könnte. Für Hilfe wäre ich sehr dankbar :)