Wer am Amazon-Partnerprogramm teilnimmt (so wie ich), kennt die SiteStripe-Leiste am oberen Rand der Amazon-Webseite. Sie ist praktisch, kann beim normalen Einkaufen aber auch ziemlich stören.
Über die SiteStripe lassen sich unter anderem direkt Affiliate-Links zu Amazon-Produkten erzeugen. Das ist im Arbeitsalltag hilfreich. Wer Amazon aber gleichzeitig auch ganz normal als Kunde nutzt und häufig auf der Webseite unterwegs ist, hat die Leiste dauerhaft im Blick.
Ich wollte die SiteStripe deshalb nicht komplett deaktivieren, sondern möglichst stark verkleinern. Mein Ziel: Nur der Button „Link abrufen“ soll übrig bleiben und unauffällig unten links im Browserfenster sitzen.
Amazon SiteStripe mit Stylus verkleinern
Dafür eignet sich beispielsweise die Chrome-Erweiterung Stylus. Mit ihr lassen sich eigene CSS-Regeln für bestimmte Webseiten hinterlegen, ohne die eigentliche Webseite dauerhaft zu verändern.
Nach der Installation von Stylus legt man für Amazon einen neuen Style an und hinterlegt dort folgendes CSS:
/* =========================================================
Amazon SiteStripe – nur "Link abrufen"
========================================================= */
#nav-AssociateStripe {
position: fixed !important;
top: auto !important;
bottom: 16px !important;
left: 16px !important;
right: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
z-index: 2147483647 !important;
}
/* Hauptwrapper auf den tatsächlich benötigten Inhalt reduzieren */
#nav-AssociateStripe #amzn-ss-wrap {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Nicht benötigte Bereiche ausblenden */
#nav-AssociateStripe .amzn-ss-brand,
#nav-AssociateStripe #amzn-ss-dynamic-content,
#nav-AssociateStripe .amzn-ss-settings,
#nav-AssociateStripe #amzn-ss-promo-slot-nsa,
#nav-AssociateStripe .amzn-ss-vertical-divider {
display: none !important;
}
/* Container des Link-Buttons */
#nav-AssociateStripe #amzn-ss-get-link-container {
display: block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Amazon-Wrapper um den Button */
#nav-AssociateStripe #amzn-ss-text-link {
display: block !important;
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Eigentlicher "Link abrufen"-Button */
#nav-AssociateStripe #amzn-ss-get-link-button {
display: block !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 10px 16px !important;
border-radius: 10px !important;
white-space: nowrap !important;
}Danach verschwindet die große SiteStripe-Leiste weitgehend. Übrig bleibt nur noch der gelbe Button „Link abrufen“, der unten links über der Amazon-Seite schwebt.
Die eigentliche Affiliate-Funktion bleibt damit erhalten. Wenn ich einen Link zu einem Produkt benötige, ist der Button weiterhin direkt erreichbar. Beim normalen Stöbern oder Einkaufen nimmt die SiteStripe dagegen praktisch keinen Platz mehr ein.
Änderung wirkt nur im eigenen Browser
Wichtig dabei: Stylus verändert Amazon natürlich nicht serverseitig. Die CSS-Regeln werden ausschließlich lokal im eigenen Browser angewendet.
Das Ganze lässt sich deshalb jederzeit wieder deaktivieren oder anpassen. Sollte Amazon die Struktur der SiteStripe künftig verändern, kann es außerdem notwendig sein, einzelne CSS-Selektoren anzupassen.
Für mich ist die Lösung deutlich angenehmer als die komplette SiteStripe auszuschalten. Die wichtigste Funktion bleibt griffbereit, während die große Leiste beim normalen Amazon-Besuch nicht mehr stört.
StopTheMadness installieren. Damit kannste auch JS hinzufügen und vieles mehr entfernen, was Bullshit ist.
Okay, aber ich verstehe nicht ganz was das mit diesem Beitrag zu tun hat? Du meinst, anstelle von Stylus? Welche Erweiterung man nutzt, um CSS Code zu platzieren, ist am Ende nachrangig.