So beheben Sie kleine Ärgernisse im Web mit stilvollem [Firefox & Chrome]

So beheben Sie kleine Ärgernisse im Web mit stilvollem [Firefox & Chrome]

Webdesigner haben einen fast unmöglichen Job. Sie müssen ein Design entwickeln, das allen gefällt. Wenn man über einen Dienst wie Gmail spricht, der von unzähligen Millionen Menschen auf der ganzen Welt genutzt wird, kann man das „fast“ wirklich weglassen – es ist einfach unmöglich. Auch wenn ein Redesign bei den meisten gut ankommt, wird es immer Nutzer geben, denen der neue Look nicht wirklich gefällt.





Manchmal gibt es genug dieser Benutzer, um ein Unternehmen zum Zurückverfolgen zu zwingen, wie es Google kürzlich mit den Gmail-Symbolschaltflächen getan hat. Aber was ist, wenn du etwas hast? Ja wirklich Hass, und das Unternehmen ändert es nicht zurück? Bleibst du für immer dabei? Dank Benutzerstilen können Sie solche Probleme selbst beheben.



Wir stellen vor: Stilvoll

Stylish ist ein kostenloses Add-on, das sowohl für Feuerfuchs und Chrom , und Sie können etwas ziemlich Magisches tun - wenden Sie Ihre eigenen Stile auf Webseitenelemente an. Auch wenn Sie kein Webentwickler sind und noch nie in Ihrem Leben ein bisschen CSS geschrieben haben, ist dies viel einfacher, als es klingt. Mit Stylish können Sie Websites komplett umwandeln (wie ich Ihnen im nächsten Abschnitt zeigen werde), aber noch wichtiger, Sie können mit Stylish in wenigen Minuten kleine Ärgernisse beheben.





Ich hatte beispielsweise ein Problem mit der Standardschriftgröße in Gmail. Die Oberfläche war in Ordnung – ich wollte nicht mit meinem Browser hineinzoomen (Strg +), weil das alle Oberflächenelemente vergrößern würde und wirklich hässlich wäre. Ich wollte nur eine Möglichkeit haben, die Nachrichtenschrift etwas größer zu machen.

Mit Stylish war es wirklich einfach, und ich zeige dir, wie. Bevor wir uns jedoch mit der Erstellung eigener Benutzerstile befassen, sprechen wir über die Nutzung der Arbeit anderer.



UserStyles.org

Wenn Ihnen etwas auf die Nerven geht, ist es durchaus möglich, dass Sie nicht allein sind. UserStyles.org ist eine Website, auf der Benutzer von ihnen erstellte Stile teilen können. Oben sehen Sie einen Stil ( Beschriftungen zu Symbolleistensymbolen hinzufügen ) empfohlen von MakeUseOf-Kommentator RandyN als Antwort auf unsere Geschichte über die Gmail-Symbolschaltflächen. Mit diesem Stil können Sie die Symbole beibehalten, aber Textbeschriftungen hinzufügen – etwas, das Google nicht zulässt.

UserStyles.org ist großartig, aber nicht perfekt. Einige der Designs versuchen zu viel zu tun (das Aussehen einer Website vollständig zu ändern), und einige sind für alte Versionen von Websites gedacht und sind jetzt kaputt. Wenn Sie versuchen, etwas Kleines zu reparieren und es auf UserStyles.org nicht finden können, ist es vielleicht am besten, es selbst zu tun.



Erstellen Sie Ihren eigenen einfachen Benutzerstil

Um Ihren eigenen Benutzerstil zu erstellen, müssen Sie zunächst wissen, welches Element der Seite Sie ändern möchten, und dann, welche Änderung Sie vornehmen möchten. Um zu beginnen, klicken Sie mit der rechten Maustaste auf das, was Sie ändern möchten, und wählen Sie Element prüfen . Sie sollten so etwas sehen:

Firefox verdunkelt den Rest der Seite und zeichnet einen sehr klaren Rahmen um das ausgewählte Element. Über diesem Element steht der Text div#2d6.ii.gt.adP.adO , ist eine Reihe von CSS-Klassen zusammen mit einer ID (der Teil, der mit # beginnt). Dies ist der Selektor, der das Styling für dieses Element beeinflusst. Am unteren Rand des Bildschirms befindet sich eine Navigationsleiste, mit der Sie ' durchquere den DOM-Baum “, oder einfacher gesagt, gehen Sie in der Hierarchie der Elemente auf und ab, die zu dem ausgewählten Element führen.



Der Name des Spiels hier besteht darin, das Element auszuwählen, das Sie gestalten möchten, und die Auswahl nicht so eng zu gestalten, dass sie nicht alles beeinflusst, was Sie beeinflussen möchten, noch so breit, dass sie andere Dinge durcheinander bringt.

Ich habe ein Element höher geklickt, div.gs , nur weil ich seinen Namen mag (scheint etwas zu sein, das sich nicht so schnell ändern wird, aber das ist eine völlige Vermutung meinerseits). Es betrifft den gesamten Nachrichtenbereich. Sobald der Bereich, den Sie stylen möchten, ausgewählt ist, klicken Sie auf das Stil Schaltfläche in der unteren rechten Ecke, um die Regeln Brot:

Ich weiß, es ist am Anfang beängstigend. Aber hier sehen Sie die verschiedenen CSS-Regeln, die sich auf das ausgewählte Element auswirken, und hier können Sie Ihre eigenen temporären Änderungen vornehmen und ihre Auswirkungen auf die Seite in Echtzeit sehen, ohne sie neu zu laden. Aber was sollten Sie ändern? Drücke den Eigenschaften klicken und deaktivieren Nur Benutzerstile :

Hier sehen Sie eine vollständige Liste der alle CSS-Regeln. Sie können in der Liste nach unten scrollen, bis Sie eine Regel finden, die für Ihre Anforderungen sinnvoll ist (in unserem Fall die Schriftgröße), und sogar auf das Fragezeichen daneben klicken, um eine Erklärungsseite zu öffnen. Jetzt wissen wir also, dass wir die font-size-Eigenschaft für alle div-Elemente optimieren möchten, die eine Klasse von ' gs “ (in Kürze geschrieben als div.gs ).

Bleibt nur die Frage, welchen Wert wir haben wollen. Dafür gehen wir zurück zum Regelbereich und fangen an herumzuspielen:

40 Pixel mögen ein bisschen verrückt sein, aber Sie bekommen die allgemeine Idee. Spielen Sie damit herum und fügen Sie gerne weitere Eigenschaften hinzu, bis Sie das gewünschte Aussehen erhalten. Achten Sie darauf, die Seite nicht zu schließen, denn Ihre Änderungen sind nicht überall gespeichert.

Speichern Sie Ihren neuen Stil

Sobald dieser Teil der Website so aussieht, wie Sie es möchten, ist es an der Zeit, ihn zu speichern. Drücke den Stilvoll Symbol in der Add-on-Leiste und wählen Sie Schreibe neuen Stil . Stilvoll möchte dann wissen, auf welchen Seiten es den neuen Stil anwenden soll – in unserem Fall wählen Sie die zweite Option, mail.google.com . Als nächstes sehen Sie diesen Dialog:

Ich habe es schon ausgefüllt. Offensichtlich habe ich einen Namen und einige Tags für den Stil ausgewählt. Aber die eigentlichen Dinge passieren innerhalb des Codes: Zeile 3 war bereits da – Stilvoll setzen Sie sie ein, damit sie weiß, auf welchen Seiten der Stil zutrifft. Aber die Zeilen 5-7 gehören mir. Analysieren wir sie:

Zeile 5: div.gs { – diesen Teil sollten Sie erkennen. Dies ist das Element, für das wir uns entschieden haben. Die öffnende Klammer bedeutet, dass wir jetzt einige CSS-Regeln schreiben werden.Zeile 6: Schriftgröße: 20px !wichtig; – das ist die Regel, die wir ändern möchten (font-size), gefolgt von ihrer neuen Definition (20 Pixel) und dann von einer !important-Deklaration, was bedeutet, dass Firefox diese Regel befolgen würde, selbst wenn ein Element näher am Text versucht zu setzen die Schriftgröße etwas anders. Zeile 7: } – Schließen der Stildefinition.

Klicken Sie anschließend auf Vorschau und bestaunen Sie Ihre Arbeit:

Und schließlich, wenn Sie sehen, dass es funktioniert, klicken Sie auf Speichern.

Dies ist kein vollständiger Leitfaden

Ich bin mir bewusst, dass ich eine Reihe von Sprüngen machen musste, um dieses kurze Tutorial im Rahmen eines einzigen Beitrags zu halten. Wenn Sie unterwegs verwirrt waren, akzeptieren Sie bitte meine Entschuldigung. CSS ist anfangs knifflig, aber nicht so kompliziert, wenn man den Dreh raus hat – und die lokale Anpassung von Websites bleibt eine der besten Möglichkeiten, um zu lernen.

Wenn Sie etwas verwirrt hat, fragen Sie mich bitte unten und ich werde mein Bestes tun, um Ihnen zu helfen.

Warum verbraucht Google so viel Speicher?
Teilen Teilen Tweet Email 5 Tipps zum Aufladen Ihrer VirtualBox-Linux-Maschinen

Haben Sie genug von der schlechten Leistung virtueller Maschinen? Hier ist, was Sie tun sollten, um Ihre VirtualBox-Leistung zu steigern.

Weiter lesen Verwandte Themen
  • Browser
  • Web Entwicklung
  • Webmaster werkzeuge
  • Mozilla Firefox
  • Google Chrome
  • Web-Design
Über den Autor Erez Zukerman(288 veröffentlichte Artikel) Mehr von Erez Zukerman

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um sich zu abonnieren