Tweetdeck-Icon farblich passend zum Ambience-Theme

Weißer Rand von Tweetdeck in der notification area

Twitter unter Linux ist schon ein Graus. Gwibber funktioniert nicht wirklich, Hotot ist noch in der Entwicklung, Choqok passt zu KDE aber nicht zu Gnome und Tweetdeck benötigt Adobe Air und setzt ein absolut hässliches Icon in die notification area unter Ubuntu/Ambience. Wenigstens für letzteres Problem habe ich eine Lösung gefunden: Ein farblich passendes Tweetdeck-Icon für das Ambience-Theme.

Weißer Rand von Tweetdeck in der notification area
Weißer Rand von Tweetdeck in der notification area

#1 Gelbes Tweetdeck-Icon mit Ambience Hintergrund

Gelbes Tweetdeck-Icon mit passendem Hintergrund
Gelbes Tweetdeck-Icon mit passendem Hintergrund

#2 An Ambience angepasstes Tweetdeck Symbol mit Hintergrund

Icon an die Ambience-Farben angeglichen
Icon an die Ambience-Farben angeglichen

Download & Installation

Installation

Die neuen Icons müssen mit Root-Rechten die Standardicons überschreiben.

  1. Tweetdeck beenden
  2. Tastenkombination ALT + F2
  3. Dort Nautilus mit Root-Privilegien öffnen: gksu nautilus
  4. Zu den Standardicons navigieren: /opt/TweetDeck/share/icons
  5. Diese in deinen Backup-Ordner kopieren, denn ein Backup schadet nie
  6. Die gerade heruntergeladenen Icons entpacken und nach /opt/TweetDeck/share/icons kopieren
  7. Tweetdeck starten
  8. Sich freuen, diese Seite bookmarken und bei Twitter, Facebook oder so weiterverbreiten ;-)
opt > TweetDeck > share > icons

Elegant Gnome: Farbdarstellung bei OpenOffice.org korrigieren

Korrekte Openoffice.org-Farbeinstellungen für Elegant Gnome

Das Elegant Gnome Pack ist ein dunkles Theme. Für Ubuntu gibt es ein PPA und Elegant Gnome bringt ein kleines Konfigurationstool mit. Es ist ein sehr vollständiges Theme mit vielen Icons etc. Und es konfiguriert auch andere Programme in den passenden Farben. Doch bei Openoffice ist dies nicht gerade gut gelungen: Wer möchte einen längeren Text auf einem fast schwarzen Hintergrund mit weißer Schrift schreiben? Ich jedenfalls nicht …

Farbeinstellungen korrigieren

Korrekte Openoffice.org-Farbeinstellungen für Elegant Gnome
Korrekte Openoffice.org-Farbeinstellungen für Elegant Gnome

Damit Openoffice wie auf dem obigen Bild wieder besser benutzbar wird, muss man ein paar kurze Einstellungen vornehmen:

  1. Man starte Openoffice.org
  2. und öffne über Extras > Optionen die Openoffice-Optionen
  3. In der linken Seitenleiste wählt man nun OpenOffice.org und dann den Unterpunkt Darstellung aus.
  4. Nun macht man im rechten Fenster diese Änderungen:
    • Dokumentenhintergrund auf Weiß
    • Textbegrenzungen auf Grau 80%
    • Hintergrund der Anwendung auf Grau 10%
    • Schriftfarbe auf Schwarz
  5. und das Fenster mit OK schließen.

Gefunden habe ich diesen Tipp bei ubuntu-art.org.

Elegant Gnome installieren

Die Installation von Elegant Gnome unter Ubuntu beschreibt übrigens WebUpd8 sehr übersichtlich.

CSS Sprites – Die ultimative Anleitung für den Wochenend-Webdesigner!

Infobox mit CSS Sprites
Infobox mit CSS Sprites

Die Geschwindigkeit von Webseiten ist in aller Munde. Nicht erst seit Google verkündet hat, dass eine schnelle Webseite höher in den Suchergebnissen gerankt wird. Spätestens jetzt überschlagen sich alle Blogs mit Tipps zur Verbesserung der Ladezeit. In diesem Artikel gibt es nun eine Anleitung, für die man keine Vorkenntnisse benötigt.

Warum denn CSS-Sprites?

Hinter CSS-Sprites steht folgender Gedanke: Die Größe einer Datei ist bei den meisten Internetverbindungen nicht mehr wirklich wichtig. Vielmehr ist die Anzahl an Anfragen entscheidender. Denn die Anzahl an möglichen Verbindungen zu bzw. von einem Internetserver ist begrenzt. Die Größe eines Elementes aber ist mittlerweile relativ egal.

CSS Sprites sind nämlich …

Viele kleine Grafiken in einer großen Grafik. Mit Cascading Style Sheets (CSS) ist nun möglich, nur Ausschnitte aus dieser großen Grafik anzuzeigen. Es muss also nur einmal eine größere Datei heruntergeladen werden. Diese wird dann mehrfach verwendet.

Beispiel: Amazon und Google

Viele große Seiten nutzen CSS Sprites. Hier einmal Google (Original) und Amazon (Original):

Sprite Grafik von Amazon (links) und Google (rechts)
Sprite Grafik von Amazon (links) und Google (rechts)

Man erkennt auf dem Bild mehrere Dutzend Elemente, die auf den jeweiligen Webseiten natürlich alleine angezeigt werden. Die Webdesigner von Google und Amazon sind natürlich Profis, doch für den kleinen Webdesigner ein persönlicher Tipp: Nur horizontal oder vertikal die Elemente ausrichten und nicht mischen! Das erleichtert einfach den Überblick.

Mein CSS Sprite zur Anschauung

Sprite-Grafik (gesamt)
Sprite-Grafik (gesamt)

Unterhalb der Beiträge zeige ich nun eine kleine Infobox mit einem Bild, ein paar mehr oder weniger informativen Sätzen und weiterführenden Links an. Dabei werden das Bild und die jeweiligen Icons aus einer einzigen Grafikdatei geladen.

Das Bild – CSS Sprite ohne Link

Im HTML-Quellcode wird hier nur ein <div> eingebunden und mit einer Klasse bzw. ID gekennzeichnet:
[code lang=”html”]<div id="pic">&nbsp;</div>[/code]

Und dieses CSS wird benutzt:
[code lang=”css”]#pic {
background: url(‘https://www.webanhalter.de/static/socialsprite.jpg’);
background-position: 0px -303px;
width: 101px;
height: 99px;
float:left;
margin:0 20px 0 0;
padding:0;
}[/code]

Mit der ersten Eigenschaft background: url('...'); wird das Bild eingebunden. Wer Tools wie die Webdevelopertoolbar, Firebug o.ä. benutzt, sollte übrigens immer die absolute URL zum Testen benutzen.

Nun folgt die wichtige Eigenschaft background-position mit der das Bild positioniert wird. Die erste px-Angabe bezieht sich auf die horizontale, die zweite auf die vertikale Ausrichtung. Bezugspunkt ist immer die linke obere Ecke der Grafik. Zwar gibt es neben Pixel-Werten auch noch weitere Möglichkeiten, aber hier ist schon genaues Arbeiten wichtig. Und da fährt man eindeutig besser mit den Pixeln.
Die Werte bekommt man über Ausrechnen oder Ausprobieren heraus. Aber ein guter Sprite-Generator (siehe unten) bringt die Werte gleich mit.

Mit width und height wird die Größe des Blockelements festgelegt. Das ist durchaus wichtig, weil das jeweilige HTML-Element natürlich nicht größer als das Grafik-Element sein darf. Ist es größer, dann werden vielleicht weitere Grafiken aus dem Sprite angezeigt. Und das ist natürlich nicht gewollt.

float, margin, padding seien hier nur der Vollständigkeit halber aufgezählt. Sie dienen nur zur Positionierung des Div innerhalb des Seitenlayouts.

Die Icons – CSS Sprite mit Links

Nach der Pflicht nun die Kür: Die Sprite-Grafik soll einzelne Icons liefern und mehrere Links sollen mit diesen gestaltet werden. Aber der Text der Links soll nicht sichtbar sein, jedenfalls nicht für die Besucher. Suchmaschinen sollen den Linktext ebenso wie Benutzer von Screenreadern verwerten können.

Der HTML-Code:
[code lang=”html”]
<div id="socialicons">
<a id="rss" href="https://www.webanhalter.de/feed" title="RSS Feed abonnieren">
<span>RSS-Feed</span>
</a>

</div>[/code]

Das umschließende <div> erleichtert die Ansprache aller Links, da ich mehrere Icons resp. Links einbinde.
Jeder einzelne Link erhält bei mir eine einzigartige id (hier rss), um ihn gezielt ansprechen zu können. Und mit dem title gibt es zusätzliche Informationen, wenn die Maus das Icon überfährt.

Das <span>-Element spielt nun eine besondere Rolle. Der Inhalt, nämlich der Linktext, wird nachher über CSS ausgeblendet. So sollten sowohl Suchmaschinen als auch Screenreader diesen wahrnehmen. In einer von mir leider vergessenen Quelle wird das jedenfalls für Suchmaschinen so erläutert. Ob dies auch vernünftig in Screenreadern funktioniert, weiß ich allerdings nicht. Zudem dürften wohl Besucher mit deaktivierter Bildanzeige nichts zu sehen bekommen. Sollen also für wesentliche Navigationselemente einer Seite CSS Sprites angewandt werden, empfiehlt sich diese Technik nicht. Dort könnte man stattdessen den Text angezeigt lassen und nur eine Hintergrundgrafik auswechseln. Oder eine Grafik über <img> einbinden und diese jeweils verschieben.
Mir ist es allerdings in dieser Anwendungsform recht egal, da keine wesentlichen Inhalte oder Navigationselemente verloren gehen.

Das CSS komplett:
[code lang=”css”]
#socialicons { height:32px; margin:0px; float:right;}
#socialicons span {display:none;}
#socialicons a {background: url(‘https://www.webanhalter.de/static/socialsprite.jpg’); width: 32px; height: 32px; display:block; float:left; margin-right:5px; text-decoration:none;}
#socialicons a#rss {background-position: 0px -402px;}
#socialicons a#rss:hover {background-position: 0px -436px;}
[/code]

Wie man sieht, führe ich hier nur das CSS für das RSS-Icon auf. Mit denselben Angaben (bis auf background-position) werden auch die anderen Icons abgefertigt.

#socialicons ist zur Darstellung der gesamten Leiste mit allen Icons. Hier wird diese positioniert.
#socialicons span dient mit der Anweisung display:none; zum simplen Ausblenden des Textes. Mit text-indent sind sicherlich ähnliche Ergebnisse möglich.

Infobox mit CSS Sprites
Infobox mit CSS Sprites

#socialicons a wirkt nun auf alle Icons in der Leiste. Es sind ja nun mehrere, sodass ich durch diese allgemeine Anweisung Wiederholungen erspare. Das erspart einerseits einige Tipparbeit, vor allem verhindert es Flüchtigkeitsfehler in Form vergessener Attribute o.ä.

#socialicons a#rss spricht nun das jeweilige Icon resp. den jeweiligen Link an. Hier wird nun nur noch die Position des Hintergrundbildes festgelegt, eingebunden wurde es bereits in der obigen, allgemeinen Anweisung.
#socialicons a#rss:hover ermöglicht nun die Anzeige eines anderen Icons, wenn die Maus darüber fährt. Hier wird, wie bei den anderen Icons, einfach die Hintergrundgrafik verschoben und so ein anderes, hier ein farbiges, Icon sichtbar.

Also …

CSS-Sprites sind also eine einzige große Grafik, die mehrere kleinere Grafiken enthält. Mithilfe von CSS werden sie eingebunden und ihr sichtbarer Bereich begrenzt. Sodass wieder der Eindruck von mehreren kleinen Grafiken entsteht.

Mein Beispiel vollständig

Unkommentiert zum besseren Verständnis hier der gesamte HTML- und CSS-Code für die kleine Infobox:

HTML

[code lang=”html”]<div id="authorinfo">
<div id="pic">&nbsp;</div>
<p>Als Webanhalter schreibt <strong>Marc Pentermann</strong> über Linux, WordPress und dieses ganze innovative Internet, das Fragen &amp; Antworten-Portal COSMiQ, die Blogsoftware WordPress und veröffentlicht eigene Fotos.</p>
<div id="socialicons">
<a id="rss" href="https://www.webanhalter.de/feed" title="RSS Feed abonnieren"><span>RSS-Feed</span></a>
<a id="iconcontact" href="https://www.webanhalter.de/about-webanhalter/kontakt" title="Kontaktformular"><span>Kontaktformular</span></a>
<a id="xing" href="http://www.xing.com/profile/Marc_Pentermann2" title="XING"><span>XING</span></a>
<a id="google" href="http://www.google.com/profiles/marc.pentermann" title="Google"><span>Google</span></a>
<a id="facebook" href="http://de-de.facebook.com/pentermann" title="Facebook"><span>Facebook</span></a>
<a id="twitter" href="http://twitter.com/webanhalter" title="Twitter"><span>Twitter</span></a>
</div> <!– Ende #socialicons –>
</div> <!– Ende #authorinfo –>[/code]

CSS

[code lang=”css”]#authorinfo {border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; padding:20px 20px 50px 20px; margin-top:50px; clear:both;}
#pic {background: url(‘https://www.webanhalter.de/static/socialsprite.jpg’); background-position: 0px -303px; width: 101px; height: 99px; float:left; margin:0 20px 0 0; padding:0;}
#socialicons { height:32px; margin:0px; float:right;}
#socialicons span {display:none;}
#socialicons a {background: url(‘https://www.webanhalter.de/static/socialsprite.jpg’); width: 32px; height: 32px; display:block; float:left; margin-right:5px; text-decoration:none;}
#socialicons a#rss {background-position: 0px -402px;}
#socialicons a#rss:hover {background-position: 0px -436px;}
#socialicons a#iconcontact {background-position: 0px -34px;}
#socialicons a#iconcontact:hover {background-position: 0px 0px;}
#socialicons a#facebook {background-position: 0px -68px;}
#socialicons a#facebook:hover {background-position: 0px -102px;}
#socialicons a#google {background-position: 0px -136px;}
#socialicons a#google:hover {background-position: 0px -170px;}
#socialicons a#xing {background-position: 0px -714px;}
#socialicons a#xing:hover {background-position: 0px -748px;}
#socialicons a#twitter {background-position: 0px -646px;}
#socialicons a#twitter:hover {background-position: 0px -680px;}[/code]

Tipp: CSS Sprites erstellen lassen

csssprites.com
csssprites.com

Es gibt mittlerweile unzählige CSS-Sprite-Generatoren im Netz. Meiner Erfahrung nach ist csssprites.com der Beste. Einerseits weil er funktioniert, was leider nicht mehr bei allen der Fall ist. Andererseits gibt er sehr übersichtlich die Grafik und auch die CSS-Anweisungen (also background-position) aus. Zudem ermöglicht er über die “options” die Sprite-Grafik mit einem durchsichtigen oder weißen Hintergrund auszustatten. Neben anderen Optionen ist dies ein wichtiger Punkt für die Ladezeit der Grafik: Ein weißer Hintergrund ermöglicht einfach schnelleres Laden, weil die Grafik kleiner ist als wenn sie einen durchsichtigen Hintergrund hätte. Da ich hier auch einen weißen Hintergrund benutze, ist dies für mich also ideal. Für anderen Webseiten wird vielleicht eine andere Hintergrundfarbe benötigt: Hier lässt man die Grafik mit einem durchsichtigen Background erstellen und färbt sie danach einfach selber ein.

Tipp 2: Grafik optimieren mit YAHOO! Smush.it

YAHOO! Smush.it
YAHOO! Smush.it

YAHOO ist um die Ladezeiten im Internet ebenso besorgt wie Google. Stellt aber auch zwei sehr empfehlenswerte Tools zur Verfügung: Mit der Firebug-Erweiterung yslow kann der Webdesigner/Webmaster sich über die Performance seiner Seite informieren. Und mit dem hervorragenden Smush.it lassen sich Grafiken optimieren. Dabei soll sich nicht die Qualität, sondern nur die Dateigröße verringern. Und nach meinen Erfahrungen macht sie dies auch.

Liebe Wochenend-Webdesigner!

Nun hatten sich die Profis, hier die Webkrauts, schon vor einiger Zeit über CSS-Sprites ausgelassen. Mit der Ankunft dieser Thematik auch auf meiner Seite sollen allen Eines klar geworden sein: CSS-Sprites sind eine notwendige Technik. Und sie sind durchaus simple.

Windicators für Ubuntu?!

Idee von Windicators?
Idee von Windicators?
Idee von Windicators?

Mark Shuttleworth, der Name hinter Ubuntu und Canonical, eröffnet mit einer innovativen und durchaus umstrittenen Designänderung die Diskussion: Window indicators oder kurz windicators heißt die neue Idee.

Nach der Umstellung der Schaltflächen in Lucid Lynx auf die linke Seite des oberen Fensterrahmens, ist auf der rechten Seite viel Platz frei geworden. Dieser soll nun durch anwendungseigene Elemente gefüllt werden. Vorrangig durch Elemente, die bislang in der unteren Statuszeile ihren Platz hatten.

Mockup: Windicators
Mockup: Windicators

Dadurch könnte Platz gespart werden, was gerade bei Netbooks wichtig ist. Die Statuszeile müsste nur bei Bedarf eingeblendet werden, wie man es schon von Google Chrome kennt.

I’m on a “less is more” kick with our design efforts, and one of the things I want to banish is wasted vertical space. For netbooks, that’s particularly important. And a lot of applications have status bars at the bottom, for no good reason other than it was that way in Windows 3.1.
Mark Shuttlewoth: Window Indicators

Das kommende Ubunturelease Maverick Meerkat soll die mit Lucid Lynx begonnen Designänderungen weiterführen. Ob auch die Windicators dort schon eingeführt werden, ist noch nicht klar. Schließlich steht die Entwicklung von Ubuntu 10.10 noch am Anfang, nachdem gerade vor einigen Tagen (Ende April) die Version 10.04 veröffentlicht wurde.

Windicators sind praktisch!

Mir sind direkt einige Vorteile von Windicators aufgefallen:

  • Windicators schaffen Platz auf dem Bildschirm
  • Steuerungen sind einheitlich alle in der Titelleiste bzw. mit den Menüs im oberen Teil eines Fensters zu finden
  • Konsistenteres Verhalten zwischen Anwendungen & Fenstermanager: Im oberen Panel sind bei Ubuntu schon jetzt fast alle Steuerungselemente enthalten (z.B. die Menüs Anwendungen, Orte, System, die Applets wie das neue MeMenu usw.)

Windicators sind unlogisch!

Doch bislang habe ich vor allem negative Einschätzungen gelesen. Der aktuelle Artikel Die Welt der Fensterdekorationen (freiesMagazin 05/2010), eine Diskussion bei ubuntuusers.de und gerade auch der Blogartikel Why you should not use client-side window decorations… machen auf Probleme aufmerksam. Und bei genauerem Hinsehen werden weitere deutlich:

  • Anwendungen greifen in den Aufgabenbereich der Fenstermanager ein:
    • dafür müssen sie alle mit entsprechenden Patches versehen werden, was Mehrarbeit bedeutet
    • die Programme werden dadurch unnötig größer
    • und es entstehen durch Windicator-Implementierungen neue Fehlerquellen
    • gerade wenn der Benutzer nicht das Standardtheme verwendet, kommt es wahrscheinlich zu einem uneinheitlichen Aussehen
    • Hilfstechnologien zur Barrierefreiheit (wie vergrößertere Fensterrahmen, Icons etc.) könnten nicht, schlechter oder nur teilweise implementiert werden
  • Ein einheitliches Erscheinungsbild wird schwieriger: Schon jetzt fehlen für viele Programme einheitliche Icons im Indicator-Applet. Das stelle man sich nun für die tausende Firefox-Addons vor, die auch alle bearbeitet werden müssten.
  • Gequetscht statt übersichtlich? Bietet ein Programm viele Informationen in der Statuszeile an, könnte der Platz nicht ausreichen. Schließlich sind der Fenstertitel und die Schaltflächen zum Schließen, Minimieren und Maximieren des Fensters auch im oberen Fensterrahmen

Alles in allem bin ich gespannt auf die weitere Diskussion. Auf weitere Entwicklungen und Argumente für oder gegen Windicators. Der Vorschlag von Shuttleworth zeigt aber deutlich, dass Ubuntu mit dem Image des hässlichen Linux kräftig aufräumen möchte. Und dabei auch bereit ist, innovative Wege zu beschreiten.
Ich hoffe allerdings, dass die Entscheidung pro oder contra Windicators nicht alleine durch Canonical sondern durch eine Diskussion in der Ubuntu-Nutzerschaft getroffen wird.

Zum Abschluss noch ein kleiner Exkurs, warum wir die Schaltflächen bislang auf rechten Seite kennen:

Fail often, fail early – meine aktuelle Designspielereien (Update)

Neuer Header mit thematischer Navigation
Neuer Header mit thematischer Navigation
Neuer Header mit thematischer Navigation

Diese Seite ist mein kleiner Spielplatz. Und mal wieder habe ich am Aussehen der Seite herumgeschraubt. Während ich bislang immer auf vorgefertigte WordPress-Themes zurückgriff, habe ich darauf nun verzichtet. Professionelle Designer mögen die Hände über dem Kopf zusammenschlagen, wenn sie mein Layout sehen. Aber das ist mir relativ egal, es ist meins!
Viel weiß, viel Fläche sind der Grundgedanke dieses Layouts. Gepaart mit einer thematischen Navigation für die vorherrschenden Themen dieser Seite. Möglichst wenig zusätzliche Informationen sollen von dem eigentlichen Beitrag ablenken, weshalb ich mich für ein einspaltiges Design entschied. Zusätzliche Informationen sind unterhalb der Artikel zu finden.

Sidebar
Sidebar

Footer
Footer

Ähnliche Beiträge mit Bildern

YARPP - Ähnliche Beiträge
YARPP - Ähnliche Beiträge

Unterhalb der Beiträge werden, wie schon seit einiger Zeit, thematisch ähnliche Beiträge angezeigt. Die technische Basis hat sich allerdings geändert. Nun benutze ich das Plugin YARPP zusammen mit einem speziellenTemplate. Diese Vorlage gibt nicht nur die Beiträge aus, sondern sucht für diese Beiträge auch jeweils Bilder heraus, sodass die Liste aufgepeppt wird. Eine ausführliche Anleitung samt Template-Vorlage gibt es im aloha Weblog: HowTo: Related Posts mit Thumbnails.

YARPP hat aber leider den Nachteil, recht aufwendig und damit unperformant zu sein. Deshalb bin ich noch nicht sicher, ob die aktuelle Lösung nun länger implementiert bleibt. Denn auch eine hübsche Liste nützt nicht, wenn man erstmal auf das komplette Laden der Seite warten muss.

Fail often, fail early

Hundertprozentig zufrieden bin ich natürlich nicht. Der Kommentarbereich, das Kommentarformular und auch Suchfeld (insb. die Buttons) benötigen eigentlich noch ein ansprechenderes Styling.
Und auch eine ungewöhnlichere Beiträge, wie mein Versuch einer Kurzgeschichte, verschwinden bei der jetzigen Navigation mehr oder weniger im Nirgendwo.

Versuch macht kluch …

Jedem modernen Startup im Internet wird geraten, lieber oft viele Fehler zu machen, als starr dazustehen und auf Innovationen und Ideen zu verzichten. Nun ist diese Seite bei weitem kein Startup o.ä., trotzdem will ich den Webanhalter natürlich weiterentwickeln und Neues austesten.

Nun ist Eure Meinung gefragt! Was haltet ihr von dem neuen Anstrich?

Update: 03.02.2010

Fail often: der nächste Versuch
Fail often: der nächste Versuch

Ich konnte nicht widerstehen und es sieht wieder anders aus …

Lycos iQ: Aktuellen Teaser (“Information an alle Nutzer”) und Spreadshirt-Werbung entfernen

COSMiQ (vormals LYCOS iQ) wurde zum 03. April 2018 eingestellt. Die Informationen auf dieser Seite werden nicht mehr aktualisiert, die Links funktionieren größtenteils nicht mehr und diese Seite wird nur aus melancholischen Gründen nicht gelöscht!
Lycos iQ mit Teaser & Spreadshirt
Lycos iQ mit Teaser & Spreadshirt

Lycos iQ hat die aktuellen Informationen zu geplanten Wartungsarbeiten nicht nur im Lycos iQ-Blog veröffentlicht, sondern auch für alle Benutzer einen recht deutlichen Hinweis oben auf alle Seiten gepackt.
Ähnlich wie die Spreadshirt-Werbung ist es nach dem ersten Lesen doch recht störend.

Hier eine Anleitung, um den aktuellen Teaser und die Spreadshirt-Werbung bei Lycos iQ auszublenden.

Lycos iQ: Button zum Abwählen der Vorschläge unten einrichten

COSMiQ (vormals LYCOS iQ) wurde zum 03. April 2018 eingestellt. Die Informationen auf dieser Seite werden nicht mehr aktualisiert, die Links funktionieren größtenteils nicht mehr und diese Seite wird nur aus melancholischen Gründen nicht gelöscht!

Vorschlagsseite mit Abwählen-Button unten

Da geht man seine Vorschläge bei Lycos iQ durch, hat die Anzahl der vorgeschlagenen Fragen vielleicht auf 50 Fragen eingestellt, scrollt weiter und weiter … Und dann? Dann muss man wieder ganz nach oben, denn Lycos iQ hat den Button zum Abwählen der Vorschläge oberhalb der Liste positioniert.
Etwas unpraktisch … Hier ist die Lösung: