Registriere dich hier, um versteckte Bereiche sehen zu können, Highscores zu speichern oder Fragen zu stellen!

Style verändern? Ganz einfach mit Firebug!

Adminbereich -> Styles -> [subSilver Styles]
für subSilver2 Styles: 610nm, AcidTech, Vista, bo2Soft, subsilver2, eTech, Serenity, vBoard, xand, zeige weitere

Adminbereich -> Styles -> [prosilver Styles]
für prosilver Styles: BrownChocolate, WoWKing, Eliteblue, Glacier, GreenGrass, RedSunrise, prosilver, zeige weitere
Kostenloses phpbb2 Forum
phpbb2 Forum Hosting
www.phpbb6.de
phpbb9 ist das Support Forum für unsere Hosting Services.Hilfe nur für Foren von Kostenloses-Forum.be, Userboard.org, plusBB, phpbb8.de, phpbb6.de, Gratis-Board.de und Forumo.de.
Du hast dein Forum nicht bei uns? Dann schaue dich um und siehe was du selbst völlig kostenlos machen könntest, gucke dir auch andere interessante Foren aus unserem Netzwerk an!
Du erhältst hier Tipps und Problemlösungen zu deinem Forum bei uns!

phpbb3
phpBB3 Forum Hosting
www.phpbb8.de
FollowersFollowers: 0
BookmarksBookmarks: 2
Views: 5596

Style verändern? Ganz einfach mit Firebug!

Post#1by sventibold » 11.02.2010 15:15

Style verändern? Ganz einfach mit Firebug! V2

Jetzt mit neuen Videos (über20 MIn.), alles sehr einfach erklärt!

HTML und CSS Grundwissen erforderlich, oder der Wille sich genauer damit zu beschäftigen.

Was ist Firebug

Image

Firebug ist ein Add-On für den Firefox Browser. Damit ist es möglich, CSS sowie HTML Code von gesuchten Stellen im Template /Theme zu finden und temporär zu ändern.

Firebug ist eine große Hilfe, wenn man sein Forum umgestalten möchte. Es ist möglich, einen Style sehr schnell, nahezu komplett zu verändern (temporär) und sich die Veränderungen in einer Vorschau anzusehen!

  • Testen ohne die Gefahr sich das Forum zu zerschießen
  • Ohne auf Hilfe im Support Forum warten zu müssen, da alles so einfach ist, dass es jeder selbst kann!

Besonders praktisch, wenn man:

  • Grafiken ändern möchte wie z.B. Hintergründe aller Art (Kategorie, Block, Foren Hintergrund),
  • Farben ändern möchte wie z.B. Schriftfarbe, Hintergrundfarbe usw.
  • Größen ändern wie Schriftgröße, Forenbreite usw.

Farbscodes und alle anderen Parameter, die mit dem Objekt zusammenhängen, lassen sich schnell ausfindig machen. Sonst muss man oft mühselig nach den einzelnen Parametern suchen. (Bsp. Schriftfarbe)
Man kann den Code direkt im Firebug verändern und somit eine Vorschau seines Vorhabens bekommen. -> Erst wenn alles wie gewünscht aussieht, müsst ihr in die empfindlichen Themes/ Templates eingreifen!

Dies verringert das Risiko sein Forum zu zerschießen, um ein vielfaches!


ACHTUNG: Änderungen im Firebug selbst sind nur temporär, sprich nur bis zum neuladen der Seite und NUR bei EUCH IM BROWSER sichtbar! Firebug dient nicht zum dauerhaften ändern von Templates /Themes! Das eigentliche ändern findet nach wie vor im ACP statt.

Anleitung mit Bildern

Was wird benötigt?

- Mozilla Firefox
- Firebug Add-On zum Firefox hinzufügen

Wie geht das?

Das Prinzip ist simpel und immer das gleiche.

1) Man geht mit dem Mauszeiger auf die Stelle, die man ändern möchte -> Image
2) Rechtsklick
3) "Element untersuchen" wählen --> Image
4) Firebug öffnet sich und man kann die Parameter ablesen, mit einem Doppelklick bearbeiten usw.
5) Ihr merkt euch die Parameter und sucht nach ihnen im Theme/ Template und ändert diese.

Das sollte in etwa so aussehen: --> Image
Erläuterung:
Pfeil links: HTML Ansicht Hier könnt ihr den ausgegebenen HTML Code ablesen.
Pfeil rechts: CSS Ansicht Hier seht ihr den CSS Code aus dem Theme.

Alle CSS Parameter, die mit dem ausgewähltem Objekt zusammenhängen, werden hier angezeigt.
Hierbei unterscheiden wir noch zwischen Parametern, die direkt mit dem Objekt zusammenhängen oder "Geerbt von...", also von anderen Parametern "vererbt" wurden. "Geerbt von" Parameter beeinflussen definitiv noch andere Einstellungen mit denen ihr evtl. nicht rechnet! Aufpassen beim Bearbeiten! Durchgestrichene Parameter sind für das ausgewählte Objekt nicht relevant.
Kreis: Höhe ändern Hier könnt ihr die Höhe des Firebug um Verhältnis zur Seite ändern.

Bei dem folgenden Beispiel, werden diese ersten 4 Schritte vorausgesetzt!

Beispiel: Schriftfarbe + Schriftgröße

Alle anderen Farben und Größen kann man auf die gleiche Weise ändern!
Da die Farbe und Schriftgröße über CSS definiert werden, müssen wir also rechts schauen.
Alle CSS Parameter, die mit dem ausgewähltem Objekt zusammenhängen, werden hier angezeigt.
--> Image
Schriftfarbe ermitteln:
Einfach mit dem Mauszeiger über einen Hex-Farbcode fahren und es öffnet sich ein Pop-up Fenster, das die Farbe anzeigt.
So findet man schnell die gesuchte Farbe und den dazugehörigen Hex-Code.
Image
Haben wir den benötigten Wert gefunden, lesen wir die zu ändernden Parameter ab.
Der zu ändernde Parameter ist folglich:
Code: Select all
element.style {
color:#996600;
}

Zum testen geben wir im Firebug mal einen anderen Farbcode ein. Doppelklick auf den Farbcode, nun kann man ihn bearbeiten.
Ich nehme ein blau:
Code: Select all
#000099

Die Ändernung wird sofort sichtbar (temporär - sprich, nur für den Moment und nur für euch sichtbar)! -> Image

Schriftgröße ändern:
Schriftgröße wird immer unter "font-size" in "px" oder "em" angegeben. -> Image
Oftmals enthält die Schriftgröße keine eigenen Parameter, sondern sie werden von anderen Einstellungen "vererbt". Dies bedeutet gleichzeitig, dass wenn dieser Parameter geändert wird, ALLE Objekte, die mit diesem Parameter verknüpft sind, geändert werden. (siehe Endergebnis)
Der zu ändernde Parameter ist folglich:
Code: Select all
ul.linklist li {
font-size:1.1em;
line-height:2.2em;
list-style-type:none;
}

Zum testen geben wir auch hier mal einen anderen Wert ein. Dazu Doppelklick auf den zu ändernden Wert.
Ich nehme mal 1.5 em.
Die Ändernung wird sofort sichtbar (temporär - sprich, nur für den Moment und nur für euch sichtbar)! -> Image
Auf dem Bild könnt ihr sehr gut erkennen, dass sich alle Schriften in der Navigationsleiste auf 1.5em vergrößert haben.

Wenn es euch gefällt, dann öffnet ihr das zu ändernde Theme.
Adminbereich -> Styles -> Theme -> Theme auswählen
Achtung: Parameter, die dort mit element."*" angegeben werden, sind nicht im Theme, sondern im Template zu finden.
In unserem Beispiel wäre das: Adminbereich -> Styles -> Templates -> (Dein Style) -> overall_header.html

Dort sucht nach einen Schlüsselwort, dass ihr der Firebug CSS Spalte entnehmt. Hier bieten sich z.B. element.style oder #996600 als Suchbegriff an.
Suchen kann man im Firefox mit f3 oder strg+f
Falls ihr nicht gleich beim gesuchten Parameter landet, kann man über ALT+W oder f3 im Text weitersuchen.

Jetzt die gewünschte Änderung vornehmen, absenden,

FERTIG!

--> VIDEO Anleitung! <--

Am besten im Vollbild Modus und HD ansehen um alles nachvollziehen zu können!

Video zum generellen Aufbau von Firebug.
Dieses Video bietet einen optimalen Einstieg und erklärt das Add-on und seine Funktionen sehr genau.

www.youtube.com Video from : www.youtube.com

Video zum praktischen Umgang mit Firebug und anschließendem übertragen ins Forum.
Hier wird erklärt. wie ihr die Veränderungen die ihr in Firebug gamacht habt am besten in euer Forum übertragt.

www.youtube.com Video from : www.youtube.com

Benutzung und Umgestaltung mit Firebug. (altes Video OHNE Stimme)
Hier das Video aus dem älteren Tutorial. Rein schauen lohnt sich auch hier, da in wenigen Minuten ein kompletter Style geändert wird.

www.youtube.com Video from : www.youtube.com
Attachments
firebug.jpg
firebug.jpg (6.41 KiB) Viewed 5201 times
Forum für alle mit auslands Fernbeziehung
User avatar
sventibold
Style Tüftler
Style Tüftler
 
Posts: 1205
Joined: 03.2009
Cash on hand: 5,751.13 Points
Bank: 15,706.93 Points
Thanks: 55
Thanked: 348 times in 226 posts
Gender: Male

The following user would like to thank sventibold for this post

Return to "Tipps zu den Styles"


 

Who is online

Users browsing this forum: No registered users and 1 guest

Besucher kamen durch folgende Suchbegriffe auf diese Seite:

firebug anleitung

anleitung firebug

wie kann man seinen style verändern styling ändern tipps wie kann man sein style ändern was ist firebug firebug bedienungsanleitung firebug handbuch firebug änderungen dauerhaft speichern wie kann man seinen style ändern firebug durchgestrichen anleitung für firebug style verändern firebug element.style warum kann ich im firebug nur einmal was ändern firebug bedienung firebug geerbt von firebug direkt ändern google.de firebug wert durchgestrichen mit firebug seite bearbeiten firebug durchgestrichene styles style ändern tipps tipps zum style ändern firebug manual