Coder Social home page Coder Social logo

userstyles's Introduction

/userstyles

A collection of home-made UserStyle CSS files, to be used with Stylus or other mechanism. UserStyles are used to modify the appearance (what you see) of a select few websites which I frequently use and would rather have a different design.

Use with the Stylus browser addon (for Firefox, for Chrome). Be cautious of similar-named addons as they’re often used to collect data without your consent. For an intoduction on how to use and experiment with Stylus (no need to be a programmer) see “Redesign Your Favorite Websites — Stylus Extension for FireFox or Chrome”.

These UserStyles may update automatically to accomodate for improvements and breaking changes, but they are primarily intented for my personal use, hence I am reluctant to changes that do not serve my use cases. You may use the Issue page to report any unintented behaviour (bugs) or breaks (usually when the website implements a major change) that you come accross.

Index

Click on “Install this style” to preview the CSS code and install directy if you already have Stylus enabled. All styles support automatic updates.


Global styles

Global or single-purpose styles that apply to multiple domains.

Hide dickbars

Hides “dickbars”, i.e. annoying CTAs and floating bars in several websites. Currently: facebook.com; instragram.com; newyorker.com; nytimes.com (incl. wirecutter); wired.com; artforum.com; japantimes.co.jp. For more complete applications, there are elaborate solutions such as @yourduskquibbles/webannoyances.

📦 Install this style

Thin scrollbars

Applies thin scrollbars to all windows and elements. The colors are configurable. (Firefox only)

📦 Install this style

UserChrome.css

Styles to modify the User Interface of Mozilla Firefox through UserChrome.css. Their installation is not as easy, and this feature is disabled by default.

  1. On Windows, navigate to %APPDATA%\Mozilla\Firefox\Profiles (you can copy/paste this in the Explorer address bar) or open the Local Directory of the profile in use by visiting about:profiles from the browser address bar. The profile in use is the one you cannot delete.
  2. Create a folder named chrome then create inside it a file named userChrome.css where you will paste the relevant code.
  3. If userChrome.css doesn’t seem to work, open about:config and set toolkit.legacyUserProfileCustomizations.stylesheets=true if already set to false.

tabs_to_bottom.userchrome.css

Moves the tab and URL bar to the bottom of the window. It’s where browser tabs should be by default in Windows, if proximity to the taskbar matters.

💾 Inspect the code

tabs to bottom for Firefox

proton_theme_tweaks.userchrome.css

Tweaks for the Firefox Proton theme to remove border radius from several elements and make tabs bar more compact.

💾 Inspect the code

airtable.com

airtable.com dark theme

Dark theme for airtable.com. Alpha quality, beware of 🐛.

📦 Install this style

airtable.com neat kanban

Modifies the display of Airtable’s Kanban view to make better use of available space and simplify the cards UI. It also modifies a collaborator field with the configurable title “Action of”, if it exists.

📦 Install this style

airtable.com neat kanban

paper.dropbox.com

paper.dropbox.com focus theme

A set of styles that turns the sidebar and menus partialy transparent when the cursor is not over them. Includes some stylistic changes over the display of text, eg. — instead of bullet points, Input font (if exists on the system).

📦 Install this style


© 2020-2022 Heracles Papatheodorou a.k.a @heracles, MIT Licence

userstyles's People

Contributors

arty2 avatar lilly-lizard avatar se7uh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.