How To Steampunk Twitter

How to steampunk, err, customize Twitter (and Tweetdeck) in Chrome:

Bildschirmfoto 2014-10-15 um 11.53.09

The CSS below will change color to black and white/grayscale.

HowTo (beta):

* Install Stylebot extension
* Open Stylebot with the CSS icon next to the options icon at the top right corner of the browser window.
* Click the Options wheel (top right), choose Styles and create the style sheet for Twitter (simply insert „Twitter“ for Twitter as a whole or „secretsandtype“ in order to only address this account).
* Copy CSS below
* Paste CSS
* Save

You can do additional changes by working on the CSS here, but it’s more convenient to go back to the Stylebot panel, which allows to select the items you want to style by clicking and has live preview. .

To style an element
* Click the rectangle-and-arrow-button in the top-left corner of stylebot, then click the element.
* Style the element from Stylebot’s Basic Options panel or click the Advanced button and enter a specific style. The style will be added to the style sheet, which you can edit as a whole by clicking Edit CSS.
* Or copy the tag shown next to the button you just clicked and add it to the appropriate section of the CSS. If you are not sure where to put it, just try. You’ll see when you’ve found the matching tag.
* For some elements, you can use global changes, as I did for font-family, but it seems this won’t always work easily.

My CSS below changes
* font to Courier
* links and text to various shades of gray
* text and icons in buttons to white
* images and icons to grayscale

Instead, you could simply do this:
* {-webkit-filter: grayscale(100%);), but it seems this will make Chrome take much longer to render.

I may have missed out on some icons, backgrounds or text somewhere, sorry.
I didn’t care much about beautiful or effective code.

And I haven’t yet managed to style some items, such as text in java-script buttons on hover.

And I have not gone into Tweetdeck, which will have to be done.

Well …

Have fun!

@k_propaganda

CSS:

* {
font-family: courier;
}

a,
a.with-icn.unfavorite.js-tooltip b,
li.Footer-item.Footer-copyright.copyright,
span.ProfileNav-value, a.u-textUserColor,
strong.js-mini-profile-stat,
a.tweet-url.twitter-atreply.pretty-link s,
a.tweet-url.twitter-atreply.pretty-link b,
a.pretty-link.user-profile-link.js-user-profile-link b,
a.pretty-link.user-profile-link.js-user-profile-link s,
a.pretty-link.followers-you-follow b,
a.pretty-link.followers-you-follow s,
a.twitter-atreply.pretty-link b,
a.twitter-atreply.pretty-link s,
a.twitter-hashtag.pretty-link.js-nav b,
a.twitter-hashtag.pretty-link.js-nav s {
color: #888888;
}

a:hover,
strong.fullname.js-action-profile-name.show-popup-with-id {
color: #cccccc;
}

button.modal-btn.modal-close.js-close,
span.Icon.Icon–tweet.Icon–large,
button{
background-color: #888888;
}

div.AppContent,
div.tweet-context.with-icn.a:hover,
button.small-follow-btn.follow-btn.btn.small.follow-button.js-recommended-item {
background-color: #eeeeee;
}

div.modal-tweet-form-container {
background-color: #cccccc;
}

img,
img.avatar.js-action-profile-avatar,
span.Icon.Icon–small.Icon–retweeted,
span.Icon.Icon–promoted,
span.Icon.Icon–follow,
span.Icon.Icon–retweet,
span.Icon.Icon–favorite,
a.ProfileCard-bg.js-nav,
button.small-follow-btn.follow-btn.btn.small.follow-button.js-recommended-item,
h1.Icon.Icon–bird.bird-topbar-etched,
span.Icon.Icon–favorited,
span.Icon.Icon–follower,
span.Icon.Icon–retweeted,
div.ProfileCanopy-header.u-bgUserColor,
a.ProfileNav-stat.ProfileNav-stat–link,
div.profile-header-inner.flex-module.clearfix,
button.user-actions-follow-button.js-follow-btn.follow-button.btn,
img.avatar.js-action-profile-avatar,
span.simple-details-link {
-webkit-filter: grayscale(100%);
}

span.user-dropdown-icon.Icon.Icon–cog.Icon–small,
button.btn-link.js-refresh-suggestions,
button.btn-link.back-to-top.hidden,
span.user-dropdown-icon.Icon.Icon–cog.Icon–medium,
span.Icon.Icon–close.Icon–medium,
span.ProfileTweet-actionCountForPresentation,
input.file-input, span.text.geo-status,
span.Icon.Icon–geo {
color: white;
}

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s