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 » Themes sind Stylesheets (CSS) Vorlagen (Farben, größen, Abstände (prosilver auch Grafiken))
Adminbereich » Styles » Templates sind HTML Vorlagen (wo was angezeigt wird und ob überhaupt)

subSilver und prosilver Styles - es gibt 2 Arten von Styles, hier alle im Überblick:
subSilver2 Styles: 610nm, AcidTech, Vista, bo2Soft, subsilver2, eTech, Serenity, vBoard, vLight, vPlasma, subBlack
prosilver Styles: BrownChocolate, WoWKing, Eliteblue, Glacier, GreenGrass, RedSunrise, prosilver
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: 1
Views: 12921

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
You do not have the required permissions to view the files attached to this post.
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


Return to "phpBB3: Styles, Themes und Templates"


 

Who is online

Users browsing this forum: Google [Bot] and 3 guests

Besucher kamen durch folgende Suchbegriffe auf diese Seite:

firebug code ändern

phpbb style farbe ändern

phpbb styles ändern

phpbb3 firebug

phpbb styles anpassen

mit firebug code ändern

phpbb acp css

firebug html bearbeiten

phpbb style ändern

wie html in firebug sichtbar machen phpbb firebug phpbb3 css ändern stylesheet vorlagen mit firebug direkt bearbeiten firebug phpbb firebug direkt bearbeiten phpbb anleitung farben ändern komplette style veränderung phpbb css ändern phpbb3 style farbe ändern phpbb style anpassen firebug vorschau ändern mit firebug phpbb leicht ändern firebug css ändern