AutoIt.de individualisieren - CSS anpassen mit Browseraddons

Da ich schon mehrfach mitbekommen habe, dass die Seite den kosmetischen Ansprüchen den Leuten nicht gerecht wird möchte ich hier euch was zeigen.

Zuerst sollte gesagt werden, dass man niemand das ganze recht machen kann, also nicht meckern und selber anpassen

Browser wie Google Chrome, Mozilla Firefox und was es sonst noch alles gibt bieten einen Store an in welchem ihr Addons runterladen könnt.

Da gibt es Plugins die euch das CSS der Seite anpassen lassen.

Für jeden der nicht weiß was CSS ist: CSS bedeutet Cascading Style Sheets und ist das Designrückrad von HTML. Damit kann man Seiten sehr schick aussehen lassen wie es z. B. bei uns der Fall ist.

Das ganze machen wir uns zu Nutze, in meinem Beispiel habe ich mir Stylebot (von Stylebot.me) heruntergeladen. Es funktioniert auch mit anderen Addons, ggf. ist das Einstellen bzw. das Regexing bisschen anders aber wie machen nach wie vor das gleiche.

Ausgangssituation ist die normale AutoIt.De Seite.

Was mir nicht passt werde ich kurzerhand einfach anpassen

Fangen wir also an, mich persönlich stört:

- die blanke Leiste unterhalb des AutoIt.De Logos

- die Kurzbeschreibung ".... das deutschsprachige Forum" etc.

- der Absenden Button der SB sowie das SB-Archiv ist nur sichtbar, wenn man mit der Maus drüber hovert

- der Absenden Button blockiert die Textzeile und man kann nicht sehen was man schreibt, wenn man die Maus drüber hat

- die Zeiten der SB-Einträge werden nur angezeigt wenn man drüber hovert.

Meine Ziele sind:

- Leiste mit Kurzbeschreibung verstecken

- Den Content der Seite nach oben schieben (da ansonsten viel Platz frei bleibt)

- Absenden/SB-Archiv Button anzeigen

- SB-Eingabe verkürzen, damit der Button nicht drüber hovert

Mit Stylebot kann ich nun einfach Elemente auf der Seite rechtsklicken und im Kontextmenu unter "Stylebot > Style Element" das Stylebot Menu öffnen.

Da kann ich nun allerhand Einstellungen setzen, da allerdings hier auf der Website vieles nicht so einfach zu machen ist schreibe ich mir das CSS selber.

Als Anfänger kann man aber gerne da rumklicken und sich das ganze so einrichten.

Ich gehe also in das Addon und erstelle ein neues Style welches greifen soll bei folgenden URLs: ^https://autoit.de/wcf/$.

Das ist ein RegEx-Pattern und bedeutet, dass alle Links die mit https://autoit.de/wcf/ anfangen und enden (und sonst nichts anderes da ist) mit diesem Style angepasst werden sollen.

Lassen wir das $ am Ende weg würden auch die Threads gestyled werden und das sieht dann sehr komisch aus.

Nach ein bisschen Fummelei schaut mein angepasstes Stylesheet so aus:

div.boxesContentBottom {
    margin-top: 30px;
}

div.content {
    margin-top: -30px;
}

div.contentHeaderTitle {
    display: none;
}

div.pageNavigation {
    display: none;
}

time.datetime {
    opacity: 100;
}

div.shoutboxHeadlineOptions {
    opacity: 100;
}

div.shoutboxExtend {
    opacity: 100;
}

#shoutboxMessage {
    width: 90%;
}

So, und was passiert nun? Ich gehe mal die Styles von oben nach unten durch:

div.boxesContentBottom mit dem 30px margin setzt den margin des Elements neu und rückt das ganze weiter nach oben.

div.content mit dem -30px margin schiebt das ganze auch weiter nach oben.

div.contentHeaderTitle versteckt die Kurzbeschreibung.

div.pageNavigation versteckt die Leiste unterhalb des Logos.

time.datetime zeigt die Zeiten in der SB an (Achtung, das Styling findet nur beim Laden der Website statt, tauchen neue Einträge auf ist die Zeit nicht sichtbar)

div.shoutboxHeadlineOptions zeigt das Icon zum SB-Archiv permanent an.

div.shoutboxExtend ist der Teil rechts der SB-Eingabeleiste, also der Smiley-Button und der Absenden-Button und sie werden nun direkt angezeigt ohne hovern zu müssen.

#shoutboxMessage setzt die Länge der Eingabeleiste auf 90% des verfügbaren Raumes.

Das Ergebnis schaut nun so aus! Wow, alles hat super geklappt und die Seite ist, für Leute die hier wohnen, annehmbarer geworden! x)

Dabei sollte ich noch sagen, dass viele der gesetzten Styles auch andere Elemente anpassen können, #shoutboxMessage modifiziert alle Elemente die das als Id gesetzt haben.

div.contentHeaderTitle modifiziert alle divs die den Class contentHeaderTitle haben, also schön aufpassen was ihr modifiziert!

Außerdem ist das ganze nicht skalierbar, verkleinere ich bspw. das Fenster ragt die Eingabeleiste wieder hinter den Absenden-Button aber da ich das ganze eh nur maximiert betreibe stört mich das nicht weiter.

Vermutlich kann man sogar die SB-Zeiten anzeigen lassen, auch wenn sie neu auftauchen, aber da ich hier oft aktualisiere (oder sogar vielleicht den Style rausschmeiße) ist mir das egal.

Man kann auch, wenn man das Know-How und die Zeit hat, alle Styles so definieren, dass sie mit der Fenstergröße entsprechend skalieren wenn es notwendig ist,

aber hoffentlich konnte ich euch zeigen, dass auch mit wenig Aufwand das ganze sehr einfach zu personalisieren ist denn die Administration kann es nicht jedem Recht machen.

Also wenn euch was nicht passt, Addon runterladen und eigene Styles schreiben!

Da die Shoutbox ausgetauscht wurde habe ich mein CSS angepasst, jetzt schaut das ganze so aus:

(Die Smileys glitchen komisch rum wenn man die Box öffnet aber, wers braucht passt das an)

Das RegEx ist immer noch dasselbe, die Styles in Stylebot schauen so aus:

div.boxesContentBottom {
    margin-top: 30px;
}

div.content {
    margin-top: -30px;
}

div.contentHeaderTitle {
    display: none;
}

div.pageNavigation {
    display: none;
}

time.datetime {
    opacity: 100;
}

.shoutboxContent {
    height: 307px;
}

.shoutboxEntry {
    padding: 0px;
}

.shoutbox {
    margin-top: -10px;
    background-color: #ECF1F7;
}

.containerContent, .htmlContent, .userMessage {
    margin: 0px;
}

.shoutboxContentFooter {
    margin: 0px;
}

.shoutboxContent, .fadeOut {
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
}

.shoutboxContentFooterActions, .before {
    width: 0px;
}