QR-Code dieser Seite

Open Search - Einbindung von time4joomla in das Suchenfeld des Browsers - und so funktioniert es: Open Search
Eine Liste der verwendeten Erweiterungen findet sich im Impressum

Langjährige Erfahrung als Dozent zu verschiedenen Themen.
Ich komme zu Ihnen in die Firma oder organisiere Räume vor Ort. Dazu steht mir ein Netzwerk aus vielen Jahren Tätigkeit als freier Dozent zur Verfügung.
Weitere Informationen, sowie Referenzen finden Sie auf der Firmenseite time4mambo

  • MS-Excel
    2003 / 2007/ 2010
  • MS-Project
    2003 / 2007
  • MS-Word
    2003 / 2007 / 2010
  • MS-PowerPoint 2010
  • Joomla! 1.5 / 2.5
  • Körpersprache für Präsentation und zur verkaufsfördernen Motivation

  • Weitere Themen auf Anfrage

Interesse? Lust? Zeit? Dann freue ich mich über eine eMail oder Anruf.
Kontaktdaten im Impressum

Immer informiert, was es Neues bei time4joomla und time4mambo gibt. Der Newsletter muss noch bestätigt werden, um Mißbrauch auszuschließen und kann jederzeit wieder abbestellt werden.

Wie man CSS-Angaben findet

Teile meine Beiträge in deinem sozialen Netzwerk
FaceBook  Twitter  

[Weiter unten finden Sie ein Beispiel, wie Sie mit dem Firebug arbeiten können.]

 

 

Das einfachste, aber auch mühseligste ist, einfach in den Quellcode zu schauen.

Es gibt aber ein paar nützliche Helferlein, die einem das Auffinden der CSS-Angaben erleichtern. Dazu bringt jeder Browser ein Addon mit oder hat es auch schon fest eingebaut.

Beim Microsoft Internet Explore, Versionen 8 und 9, reicht ein beherztes drücken auf die F12-Taste. Dann erscheint ein Fenster mit den CSS-Angaben für die aktuell geöffnete Seite. Dort zunächst auf den kleinen weißen Pfeil oben links klicken.

Bei den Versionen 6 und 7 kann man sich dieses Tool zusätzlich installieren. Dazu bitte entweder auf den Microsoft-Seiten suchen gehen oder besser gleich eine Suchmaschine seiner Wahl benutzen. Beim Downloaden unbedingt auf die verwendete Brwoserversion achten!

CSS im Internet Explorer finden – Das Auswahlwerkzeug

Bild: CSS im Internet Explorer finden – Das Auswahlwerkzeug

Bewegt man sich jetzt wieder mit der Maus auf die Website im Internet Explorer kann man sehen, wie sich kleine und große Vierecke um verschiedene Bereiche legen. Wenn man den Bereich umrahmt hat, zu dem man die CSS-Angaben wissen möchte, dann einfach einmal die linke Maustaste anklicken – und schon erscheint im zweiten Fenster die CSS-Angabe dazu und wird blau hinterlegt.

Im linken Teil des Fensters ist jetzt der Code, wie man ihn in etwa auch im Queltext widerfindet, dargestellt. Allerdings übersichtlich strukturiert. Im rechten Teil des Fensters finden sich die verwendeten CSS-Angaben. Alles was nicht durchgestrichen ist, ist gerade aktuell für den markierten Bereich.

CSS im Internet Explorer finden – Der Überblick

Bild: CSS im Internet Explorer finden – Der Überblick

 

Sie können nun im rechten Bereich die Häckchen wegnehmen und wieder neu set-zen und im Internet Explorer direkt sehen, ob und was sich verändert. Sie können auch im rechten Bereich des Fensters direkt in eine Zeile klicken und den CSS-Wert verändern. Nachdem Sie ENTER gedrück haben, können Sie die Änderung direkt im Browser sehen.

Keine Angst, Sie verändern damit nichts Dauerhaftes. Wenn Sie die Werte dauerhaft verändern möchten, müssen Sie die zugehörige CSS-Datei editieren und mit Ihren Werten versehen. In diesem Tool können Sie lediglich ausprobieren und suchen, aber nicht speichern.

Was im Internet Explorer geht, geht auch im Opera. Auch dort ist so ein Tool fest eingebaut. Sie finden es über das Menü:

Ansicht --> Entwicklerwerkzeuge --> Opera Dragonfly

Alle diese Tools funktionieren sehr ähnlich. Wobei Sie hier den Vorteil haben, dass das Fenster unten aufgeht und damit den Browser teilt.

CSS im Opera finden

Bild: CSS im Opera finden

 

Beim Opera müssen Sie den grünen Pfeil benutzen, der an dritter Stelle in der Iconleiste steht. Mit diesem dann im oberen Bereich den Bereich heraussuchen, zu dem Sie nähere Informationen haben möchten und diesen anklicken. Unten erscheinen jetzt wieder, wie im Internet Explorer auch, im linken Bereich der strukturelle Aufbau und im rechten Bereich des unteren Fensters die CSS-Angaben. Sie können rechts auch einen Haken setzen, bzw. entfernen. Dazu einfach mit der Maus über die Zeile bewegen, dann erscheint ein kleines Kästchen zum Haken setzen. Wenn Sie direkt in die CSS-Zeile klicken, können Sie dort auch die Werte verändern und wesentlich komfortabler als im Internet Explorer direkt die Veränderungen im oberen Fenster sehen.

Was auch interessant und nur im Opera ist, sind die Hilfslinien im oberen Fenster, mit dem Sie sehr schön das Layout überprüfen können.

Aber auch hier speichern Sie nichts. Speichern müssen Sie stets direkt in der zugehörigen CSS-Datei des Templates. Auch hier können Sie nur ausprobieren und suchen.

Der Firefox hat wohl das konformtabelste Tool dieser Art, muss allerdings erst installiert werden. Dazu gehen Sie im Menü unter Extras --> Add-ons. Es erscheint dann ein kleines Fenster. Dort klicken Sie bitte auf das erste Icon Add-ons suchen und dort geben Sie dann in das Suchenfeld (Alle Add-ons durchsuchen) Firebug ein.

12 09

Bild: Add-on Firebug für den Firefox installieren

 

Es erschenen dannn mehrere Tools in dem das Wort Firebug vorkommt. Sie entscheiden sich bitte für das erste, welches nur diesen einen Namen hat und klicken "Zu Firefox hinzufügen" an. In Ihrem Browser haben Sie nun unten rechts einen kleinen winzigen Käfer. Wenn Sie den einmal anklicken, dann erscheint im unteren Bereich des Browsers der Firefox. Alternativ können Sie den Firebug über das Menü finden: Extras --> Firebug --> Firebug öffnen oder Sie können auch die F12-Taste drücken.

Im Endeffekt funktioniert auch der Firebug genauso, wie die bereits vorgestellten. In der Iconleiste des unteren Fensters haben Sie links einen weißen Pfeil, mit dem Sie oben Ihre Auswahl treffen. Im unteren Fenster haben sie links wieder die Struktur und rechts die CSS-Angaben.

Sie können im rechten Bereich aber von allen genannten Tools am besten arbeiten. Zumal auch eine automatische Eingabevervollständigung angeboten wird. Interessant ist auch, dass Sie nicht nur die CSS-Angaben angezeigt bekommen, sondern auch, in welchen Dateien und in welcher Zeile sich die Angaben befinden. Wenn Sie mit der Maus eine Sekunde über den blauen Dateinamen im rechten Bereich des unteren Fensters verharren, bekommen Sie sogar den vollständigen Pfad als Tooltip angezeigt.

Der Firebug in seiner ganzen Pracht

Bild: Der Firebug in seiner ganzen Pracht

 

Die meisten Profis die ich kenne, arbeiten mit dem Firebug für den Firefox. Aber arbeiten Sie mit dem Browser und dem zugehörigen Tools, mit dem Sie sich auskennen und wo Sie sich wohl fühlen. Im Endeffekt sind alle sehr ähnlich und unterscheiden sich nur in Kleinigkeiten.

Beim Chrome gibt es ebenfalls einen fertig eingebautes Developer-Tool, das über das Tastaturkürzel Strg+Umschalt+I erreichbar ist.

Um direkt Bereiche in der Webseite zu markieren und sich die CSS-Angaben anzeigen zu lassen, muss man ganz unten auf die "Lupe" klicken. Interessant ist, dass Sie direkt beim überfahren mt der Maus Angaben zu den CSS-Elementen erhalten.

Entwickler-Tool im Chrome

Bild: Entwickler-Tool im Chrome

 

Beim Chrome gibt es einige weitere interessante Dinge, wie beispielsweise die Seite gleich zu übersetzen oder auch weitere verschiedene Möglichkeiten der Analyse.

 

Ein konkretes Beispiel, wie man mit den Tools arbeiten kann

Unter diesem Beitrag kann man Kommentare schreiben. Da gibt es die Zeile

"Veröffentlichen Sie ihre Kommentare..."
(gab es mal - inzwischen habe ich die Kommentar-Komponente gewechselt. Das Beispiel selber ist aber natürlich weiterhin gültig.)

Ich zeige Ihnen nun, wie Sie die Formatierung dieser Zeile mit Hilfe des Firebug verändern können.

Dazu klicke ich zunächst auf das Icon vom Firebug und suche die Zeile so lange, bois ich einen blauen Rahmen um diese Zeile habe und klicke dann auf sie.

Unten links im Firebug wird mir nun angezeigt, wie das Ganze in der HTML-Ansicht ausschaut. Man kann sich dort mit der Maus bewegen und sieht im oberen Fenster durch blau hinterlegte Bereiche, welche HTML-Angaben wowür zuständig sind. So kann man auch die Stellen suchen, die man verändern möchte, denn nicht immer ist die direkt ausgewählt Stelle auch die, die man tatsächlich ändern muss, um das gewünschte Ergebniss zu erhalten. Wenn man die Stelle gefunden hat, unten einfach auf die Stelle klicken, dann ist sie fixiert und man kann nun rechts die CSS-Formatierungen anpassen.

In unserem konkreten Beispiel jedoch reicht die direkte Auswahl, wir müssen nicht weiter suchen gehen.

Rechts sehen Sie die Formatierungen für unsere Zeile. Es handelt sich um ein h3-Tag, der einer Farbe zugewiesen wurde und eine bestimmte Schriftart enthält.

Wenn Sie die Maus etwa eine Sekunde auf der Farbe verweilen, wird Ihnen der Farbton direkt angezeigt. Ebenso erhalten Sie ein kleines Beispielkästchen, wie die Schriftart in verschiedenen Größen und Buchstaben wirkt. Das kann allerdings nur der Firebug im Firefox.

Am Rande sei vermerkt, dass meine "font-family" solch einen merkwürdigen Namen trägt, weil ich an dieser Stelle mit einer zugeladenen Schriftart arbeite. Sie finden bei Interesse hier auch ein Tutorial, wie Sie eigene Schriftarten einbinden können.

Wenn Sie direkt in das Farbfeld klicken, können Sie es nach Belieben ändern. Ich habe den Wert für eine grüne Farbe in unserem Beispiel eingetragen und SIe können direkt sehen, wie sich die Überschrift oben in der Farbe ändert.

Möchten Sie die Abstände verändern, klicken Sie einmal auf den letzen Eintrag ("haupttitel" wäre das) und drücken ENTER. Sie können nun neue Formatierungen eintragen und gleich sehen, was passiert. Im Beispiel verändere ich die Abstände nach allen Seiten:

Beim schreiben macht Ihnen Firebug auch gleich einen Vorschlag, wie das Element heißen könnte. Wenn Sie mit dem Vorschlag einverstanden sind, drücken Sie einfach die TAB-Taste. Firebug vervollständigt dann das Wort, schreibt den Doppelpunkt dahinter und springt in das Feld, wo Sie die Werte eingeben können. Ich habe einfach mal einen 50px Abstand nach allen Seiten gewählt. Das Ergebnis wird Ihnen sofort oben angezeigt.

Sie brauchen bei all dem keine Angst zu haben, dass Sie etwas kaputt machen. Wenn Sie meinem Beispiel gefolgt sind, sind Sie auch gerade dabei, meine Website zu verändern ;)

Wenn Sie Ihre Eingaben dauerhaft verändern möchten, zeigt Ihnen Firebug, welche Datei Sie dafür editieren müssen und in welcher Zeile Sie den Eintrag finden. Verharren Sie wieder eine Sekunde über den Dateinamen und Firebug zeigt Ihnen den kompletten Pfad, wo Sie die Datei finden.

Diese Datei müssen Sie nun also mit einem Editor Ihrer Wahl editieren und zu Zeile 457 gehen. Haben Sie einen Editor ohne Zeilennummern, klönnen Sie aber einfach den Eintrag mittels der Suchfunktion im Editor suchen. Eine Suchfunktion hat jeder Editor. Ich habe direkt in meinem FTP-Programm einen eingebauten Editor, in dem ich kleine Anpassungen zur Laufzeit vornehme oder ich arbeite zunächst auf dem Desktop und lade dann die CSS-Datei hoch in das Termplate-Verzeichnis.

Wenn Sie die CSS-Datei editieren, stehen in dieser natürlich die alten Werte. Sie haben ja bisher nichts wirklich verändert, sondern nur so getan als ob ;)

Es ist nur ein kleines Beispiel und auch nur eine kleine Einführung in den Firebug. Die anderen hier erwähnten Tools arbeiten alle sehr ähnlich.

  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0 Zeichen Beschränkung
Dein Text sollte mehr als 5 Zeichen lang sein

Das Letzte...

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Visitenkarte ohne Bild im Text

Eine Visitenkarte in Outlook zu erstellen und sie standarmäßig an die Signatur anzuhängen ist nicht weiter schwer und das Internet hält auch diverse Tutorials bereit, wo dieses erklärt wird....

Stefan Koch: JavaScript

[amazonadd=3898647315] Im Vorwort des Buches steht, dass die Erstauflage vor 14 Jahren erschienen ist. Vorliegend habe ich eine Auflage aus dem Jahre 2011. Also liegt die Erstauflage deutli...

Bernd Held: VBA mit Excel

[amazonadd=3836225794]Es gibt das ein oder andere Problem in Excel, welches ich nie wirklich lösen konnte in der Vergangenheit und oft genug irgendwelche „Eiertänze“ mit Zwischentabellen ode...

Matthias Geirhos: Visual Basic 2012

  [amazonadd=3836219557] „Das Paxisbuch“ steht direkt unter der Überschrift Manchmal ist es aber wichtig, dass man das wirklich Kleingedruckte liest, um zu erfahren, was in dem Buch ...

Google-Fonts einbinden

Google-Fonts in Joomla einbinden, ist wirklich sehr einfach. Dazu zunächst die index.php des benutzten Templates editieren, welches ihr unter /templates/NameDesBenutztenTemplates/ findet und...

SEBLOD: Speicherung der Feld- und Datentypen

Ein unlektoriertes Vorabkapitel aus meinem Buch zum CCK SEBLOD™ steht hier als PDF-Download zur Verfügung- Auf knapp 20 Seiten wird der gesamte Speicherbereich erklärt. Dazu noch, wie man ei...

Stephan Nelles: Excel 2010 im Controlling

[amazonadd=3836215314] Ich will ehrlich zu Ihnen sein: Ich bin absolut überzeugt von meiner kleinen aber feinen Firma, von meinem Marketing und sowieso viel besser als die Mitbewerber! Zu...

SEBLOD: Rund um Group und Group X

  Dieses Tutorial steht auch als PDF im Downloadcenter zur Verfügung     Nach dem ersten Tutorial (Einführung in Seblod) kam ein Kontakt zu Kiki (Screendesign Whykiki) und...

Helmut Schuster: Excel 2010 - Pivot-Tabellen

  [amazonadd=3866456786] Das vorliegende Buch trägt die Untertitel Das Praxisbuch - Ideen und Lösungen für die Datenanlyse mit PivotTables und PivotCharts. Ergo findest sich in d...

nach oben scrollen

Suchen Sie einen Webhoster? time4joomla empfiehlt: www.Joomlahosting.de
Joomla ist ein freies CMS - Webdesign, Programming and Content by time4mambo
PR nur für diese Seite: SEO Tools

www.time4joomla.de is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.