Thema: web developer tutorial

so, mal ein klitze klitze kleines tutorial, da immer wieder leute fragen, wie sie rausfinden können, wie man welche css eigenschaft ändert.

das web developer kit kann natürlich noch mehr, aber vielleicht hat ja irgendwer anderes lust darauf einzugehen

here we go...
web developer kit ist ein plugin für den firefox, ihr könnt ihn euch kostenlos runter laden unter folgender adresse:
https://addons.mozilla.org/de/firefox/addon/60
(oder mal nach googlen falls es die adresse irgendwann mal nicht mehr gibt ;D )

um ihn als plugin zu installieren, reicht ein kleiner klick auf den button "zu firefox hinzufügen", es öffnet sich ein kleines fensterchen einfach auf installieren klicken...



wenn ihr das gemacht habt, startet ihr firefox neu und ihr seht unter der adresszeile eine kleine leiste.



ihr seht schon, der webdeveloper ist ziemlich umfangreich, ich werde jetzt nur erklären, wie ihr den passenden css code für ein segment eurer homepage heraus bekommt.


wenn ihr in der wdk-leiste auf css klickt öffnet sich ein kleines menu, dort
findet ihr alle möglichen einstellungen für css codes, ihr könnt sie dort deaktivieren, temporär editieren oder auch komplett anschauen.
das funktioniert übrigens auf allen seiten, nicht nur auf euren eigenen, falls ihr euch mal fragt, wie andere seiten irgendwas umgesetzt haben kann man da prima abgucken
wenn ihr im menu punkt auf view style information klickt



ändert sich euer mauszeiger zu einem kleinen kreuz. wenn ihr nun mit der maus über eure, oder irgendeine website, fahrt, seht ihr, das sich über die einzelnen segmente der seite ein kleiner roter kasten bildet...





um nun heraus zu finden, welche css eigenschaft dieser kasten besitzt, klickt ihr einfach mit der linken maustaste hinein und es öffnet sich im firefox unten ein kleines fensterchen



dort wird euch so ziemlich alles wissenswerte über die css eigenschaft erklärt, in welcher datei das steht (...templates/joomla-downloads/css/template_css.css), wo ihr die findet, in welcher zeile (in diesem fall 345) und natürlich alle css eigenschaften, wie in diesem fall background, font-size, margin, padding, text-align etc.

um jetzt irgendwas zu ändern öffnet ihr einfach die passende css datei, geht in zeile 345 und editiert sie.

manchmal werden auch 2 oder gar 3-4 css dateien und mehrere css eigenschaften in verschiedenen zeilen angezeigt, wovon ihr euch aber nicht abschrecken lassen solltet.
guckt euch einfach die angezigten zeilen genau an und dann sieht man schon, was man ändern muss, um sein gewünschtes ziel zu erreichen.


so, hoffe das hilft einigen von euch ein wenig weiter, die bilder könnt ihr anklicken um sie zu vergrößern und es ist mein ersten tutorial, auch wenn es teilweise unklar sein sollte oder nicht ausführlich, ich denke das es euch wenigstens ein kleinen denkanstoß gibt.

Zitat von NBC

mit dem Add On Firebug kann man wenigsten die CSS Struktur ohne Auswickung verändern. Die Wirkliche Änderung muss man dann nur noch in der originalen CCS machen. Mit dem Tool, welches du beschrieben hast kann ich mir zwar den CSS Code ansehen, leider nicht bearbeiten.

NBC
www.it-crs.de

Blödsinn: Mit Strg-Umschalt-E kannst Du sehr wohl CSS editieren im WDT.
Erst lesen, dann mosern :-)

Zitat von Some1new

Blödsinn: Mit Strg-Umschalt-E ...

Bei mir leider im neuen FF 3.0.1 nicht mehr aber auch net so wichtig, habe ja alle dev tools drauf

@Cybergurk,

upps, das mag sein bzgl FF3.xx. Ich verwende noch FF2 gerade wegen der ganzen verfügbaren add-on´s.

Dann will ich den "Blödsinn" mal relativieren :-)

Danke für den Hinweis
Some1new

Zitat von NBC

mit dem Add On Firebug kann man wenigsten die CSS Struktur ohne Auswickung verändern. Die Wirkliche Änderung muss man dann nur noch in der originalen CCS machen. Mit dem Tool, welches du beschrieben hast kann ich mir zwar den CSS Code ansehen, leider nicht bearbeiten.

NBC
www.it-crs.de

doch, wie Some1new schon geschrieben hat kann man das machen, im firefox 1 und 2 mit Strg#umschalt#E und ab version drei eigentlich genauso, aber der shortcut funktioniert nicht mehr

also müsste man über die toolbox, auf css und dann auf edit css und dann funktioniert das auch.

trotzallem ist firebug viel mächtiger, garkeine frage.
hat auch viel mehr funktionen und es lässt sich besser damit arbeiten, ich benutze es selber auch lieber...

aber das kleine tutorial soll keinesfalls für irgendwelche webentwickler oder webdesigner sein, sondern für all die joomla neulinge die tag täglich zig fach fragen wie man die farbe der überschrift oder den hintergrund ändern kann und dafür sollte diese kleine beschreibung alle male ausreichen.

du kannst ja gerne was über den firebug schreiben, aber hier ne grundsatz diskussion anzufangen find ich quatsch. und wie gesagt soll das alles nicht für leute sein, die ihr 8. template veröffentlicht haben, sondern für leute die jede einzelne datei durchgehen und raten, wo sie was finden, wenn sie überhaupt wissen, wo sie die css dateien finden...

naja...

Und hier gibt es die Toolbar auch auf deutsch:
http://chrispederick.com/work/web-de.../localization/

CSS geht bei mir im FF3 über Strg+Umschalt+B
(deutsch Version)


Björn

Zitat von holmi

CSS geht bei mir im FF3 über Strg+Umschalt+B
(deutsch Version)


Björn

Hi Holmi,
nö, bei mir nicht öffnet sich die lesezeichen etc.. hab deutsch Version hihi, egal

edit: bei mir strg+umschalt+C weitere allgemeine hier zu finden http://support.mozilla.com/de/kb/Keyboard+shortcuts

Mist

Ich wollte es noch testen, habe dann aber wohl doch in der Menüleiste geklickt
Da steht Strg+Umschalt+B dran (geht aber nicht)

Duck und weg....

Björn