You are not logged in.

#1 2015-10-02 16:32:49

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Web browser user styles

This thread is a repost from CrunchBang forums. It is for discussion, setups and tips about CSS user styles for web pages and tweaking UI in web browsers. We can share handy styles we find from http://userstyles.org/, home brewed styles or userChrome and userContent setups.

With user styles you can theme webpages (individual sites or globally) or change user interface of a browser. Styles can be managed with browser addons:

Interface can also be changed by userChrome.css and site looks by userContent.css.

Related threads in Bunsenlabs forums:


Related threads in CrunchBang forums:

Last edited by nore (2015-10-29 10:42:23)

Offline

#2 2015-10-02 16:33:42

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Re: Web browser user styles

Twoion served us with beautiful forum theme and improvements on userstyles.org. Some like the light ones, others prefer the dark side. I need to have a bit more contrast though, if I'm going to read the posts longer than a minute, especially on a small screen. (With small I mean anything below 20 inch.) That's why I made myself a style for just darkening the texts and lightening the backgrounds.

Screenshot_02_10_2015_18_56_52.jpg

Offline

#3 2015-10-03 04:12:07

johnraff
nullglob
From: Nagoya, Japan
Registered: 2015-09-09
Posts: 5,721
Website

Re: Web browser user styles

Nore, this is great work, and a good example to any others who'd like to help keep the content on the #! forums accessible by useful linking from posts here at BL.  cool

Cheers!

Last edited by johnraff (2015-10-03 04:12:40)


John
--------------------
( a boring Japan blog , Japan Links, idle twitterings  and GitStuff )
In case you forget, the rules.

Offline

#4 2015-10-03 18:09:38

gako
Member
Registered: 2015-10-02
Posts: 241

Re: Web browser user styles

Nuclear option for my userContent.css usually.
Global changes do break stuff like buttons and such but dangit I don't care
because it matches the rest of my theme smile.

pretty simple for me

* {
    font-family:verdana !important;
    background-color: #c5b994 !important;
    color:#403a30 !important;
    font-size:13px !important;
    border-collapse:collapse !important;
  }

  div, td {
    color:#403a30 !important;
    border-color: #403a30 !important;
  }

  select {
    color: #c5b994 !important;
    background: #c5b994 !important;
  }

  input {
    font-size:12px !important;
    color:#403a30 !important;
  }

  input[type=radio] {
    width:auto !important;
    color: #403a30 !important;
  }

  input[type=submit] {
    text-align:center !important;
    background:#c5b994 !important;
  }

  input[name=q] {
    background:#c5b994 !important;
    padding:2px 5px !important;
  }

  label {
    color:#403a30 !important;
    font-size:12px !important;
  }

  a:link {
    color:#202020 !important;
    text-decoration:none !important;
  }
  a:visited  {
    color:#403a30 !important;
    text-decoration:none !important;
  }

  a:hover {
    color:#403a30 !important;

  }

Offline

#5 2015-10-03 18:19:53

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Re: Web browser user styles

Nice colorscheme. Some elements look interesting: do you see a white background beside #C5B994 in codebox in these forums? Sorry, two styles were interferring. smile Now I see, what you see.
Screenshot_03_10_2015_21_25_35.jpg

Last edited by nore (2015-10-03 18:27:03)

Offline

#6 2015-10-03 19:23:55

Dobbie03
Resident Metalhead
From: New Zealand
Registered: 2015-09-29
Posts: 2,287
Website

Re: Web browser user styles

nore wrote:

Nice colorscheme. Some elements look interesting: do you see a white background beside #C5B994 in codebox in these forums? Sorry, two styles were interferring. smile Now I see, what you see.
http://s11.postimg.org/jjc2cmlxb/Screenshot_03_10_2015_21_25_35.jpg

That looks incredible....except for that nasty Firefox blue download arrow (which I know isn't your fault).


I like my Metal like my coffee.......Black!
Resident Metalhead Poser

Offline

#7 2015-10-04 04:47:41

gako
Member
Registered: 2015-10-02
Posts: 241

Re: Web browser user styles

Dobbie03:
That looks incredible....except for that nasty Firefox blue download arrow (which I know isn't your fault).

Thx, yeah that has to do with the iceweasel theme.
I use an addon that blocks the navigation bar and use vimperator instead.

Offline

#8 2015-10-04 06:20:04

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Re: Web browser user styles

Yep, it's my fault. Just wanted to try your theme on. Should've linked your consistent dwm screenshot instead.

Offline

#9 2015-10-04 07:30:07

gako
Member
Registered: 2015-10-02
Posts: 241

Re: Web browser user styles

I like having night and day modes with themes
same general config but an inverse of the last color scheme
Nice flat grey background kinda crunchbangin. tongue

* {
    font-family:verdana !important;
    background-color: #403a30 !important;
    color:#c5b994 !important;
    font-size:13px !important;
    border-collapse:collapse !important;
  }

  div, td {
    color:#c5b994 !important;
    border-color: #c5b294 !important;
  }

  select {
    color: #403a30 !important;
    background: #403a30 !important;
  }

  input {
    font-size:12px !important;
    color:#c5b994 !important;
  }

  input[type=radio] {
    width:auto !important;
    color: #c5b994 !important;
  }

  input[type=submit] {
    text-align:center !important;
    background:#403a30 !important;
  }

  input[name=q] {
    background:#403a30 !important;
    padding:2px 5px !important;
  }

  label {
    color:#c5b994 !important;
    font-size:12px !important;
  }

  a:link {
    color:#c5b994 !important;
    text-decoration:none !important;
  }
  a:visited  {
    color:#776a54 !important;
    text-decoration:none !important;
  }

  a:hover {
    color:#776a54 !important;
  }

Offline

#10 2015-10-04 08:52:21

Snap
Member
Registered: 2015-10-02
Posts: 465

Re: Web browser user styles

Thanks for sharing, gako. I'll give your stuff a go for sure. Cool theming. You should call the whole thing café latte or something... LOL

Offline

#11 2015-10-29 06:23:02

gako
Member
Registered: 2015-10-02
Posts: 241

Re: Web browser user styles

ahh cafe latte smile I like it.

Started adding this to the bottom of my global userContent.css
For youtube it will allow you to color the progress/time bar and volume slider.
Very handy as my theme always breaks this. I need to find a way to unscrew soundclloud now, then I'll be sitting pretty as far as my own needs go.

.html5-play-progress, .ytp-play-progress {
   background: #36352e !important; 
}
.html5-scrubber-button:hover, .ytp-scrubber-button:hover, .ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
   background: #36352e !important;
}
.ytp-volume-slider-track {
   background: #36352e !important;
}
.ytp-settings-button.ytp-hd-quality-badge::after, .ytp-settings-button.ytp-4k-quality-badge::after, .ytp-settings-button.ytp-5k-quality-badge::after, .ytp-settings-button.ytp-8k-quality-badge::after, .ytp-settings-button.ytp-3d-badge::after {
   background-color: #36352e !important;
}
.ytp-swatch-color {
   color: #36352e !important;
}
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
   background: #36352e !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
   fill: #36352e !important;
}

Last edited by gako (2015-10-29 06:30:08)

Offline

#12 2015-10-29 10:20:53

shot-in-the-head
Member
Registered: 2015-10-28
Posts: 61

Re: Web browser user styles

@nore
the getting-started-in-userchromecss  link is dead, at least for me

Offline

#13 2015-10-29 10:42:37

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Re: Web browser user styles

^removed

Offline

#14 2019-03-25 16:00:59

nore
>2⁹
From: squirrels' nest
Registered: 2015-09-29
Posts: 444

Re: Web browser user styles

No more CSS trickery in Firefox trying to avoid low contrast in input boxes. Googling thousandth and first time for "firefox dark themes" I ran first into an FF extension and then read this:

DmitriK wrote:

If you use a theme that does not have a light variant (e.g, Arc Dark; the light version, Arc, is a separate theme), then create a new string entry in

about:config

called

widget.content.gtk-theme-override

and set it to a light theme, e.g. Arc or Adwaita:light.

Extension was much too complicated to be handy but that tip works like a charm.

Bunsen-Dark-He GTK theme outside, Victory-17.04 inside:
FF_2019-03-25_17-53-46.th.png
I'm happy squirrel now.

Offline

#15 2019-03-26 20:05:26

ohnonot
...again
Registered: 2015-09-29
Posts: 3,909
Website

Re: Web browser user styles

^ oh please please make this work on seamonkey!
(trying it now, need to restart though)

Offline

#16 2019-03-26 23:01:08

misko_2083
Member
Registered: 2016-05-24
Posts: 218

Re: Web browser user styles

gako wrote:

ahh cafe latte smile I like it.

Started adding this to the bottom of my global userContent.css
For youtube it will allow you to color the progress/time bar and volume slider.
Very handy as my theme always breaks this. I need to find a way to unscrew soundclloud now, then I'll be sitting pretty as far as my own needs go.

.html5-play-progress, .ytp-play-progress {
   background: #36352e !important; 
}
.html5-scrubber-button:hover, .ytp-scrubber-button:hover, .ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
   background: #36352e !important;
}
.ytp-volume-slider-track {
   background: #36352e !important;
}
.ytp-settings-button.ytp-hd-quality-badge::after, .ytp-settings-button.ytp-4k-quality-badge::after, .ytp-settings-button.ytp-5k-quality-badge::after, .ytp-settings-button.ytp-8k-quality-badge::after, .ytp-settings-button.ytp-3d-badge::after {
   background-color: #36352e !important;
}
.ytp-swatch-color {
   color: #36352e !important;
}
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
   background: #36352e !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
   fill: #36352e !important;
}

This tip is useful for Dark Reader extension for FF.
Opening Dev Tools and changing css is easier this way.

https://i.imgur.com/58kSUdd.png
I like the site in dark mode.
https://i.imgur.com/gYC5JwK.png

Offline

#17 2019-03-28 06:43:05

ohnonot
...again
Registered: 2015-09-29
Posts: 3,909
Website

Re: Web browser user styles

nore wrote:
widget.content.gtk-theme-override

and set it to a light theme, e.g. Arc or Adwaita:light.

works on firefox, does not work on seamonkey :-(

Offline

Board footer

Powered by FluxBB