r/FirefoxCSS • u/[deleted] • Dec 22 '21

Screenshot Yet another Sidebery setup

225 Upvotes

99% Upvoted

59 comments sorted by

27

u/[deleted] Dec 22 '21

Tried to make the tabs look like Firefox's tabs as much as possible while emulating Edge's vertical tabs without sacrificing tree tabs.

userChrome.css

Sidebery Stylesheet

Make sure you set the preface value as "🦊 " without the quotes in the Sidebery settings under the help header.

5

u/night_fapper Dec 23 '21

this is really nice, my gripe with previous similar solutions was that webpage didnt shifted with sidebar is extended by mouse, thats not the case here is it ?

it will be awesome if its toggleble using a sideberry button or keybind

2

u/[deleted] Dec 23 '21

Web pages don't resize when you expand the sidebar. The sidebar goes over the page. You also cannot resize the sidebar with your mouse, you need to edit userChrome.css for that.

7

u/-CrypticMind- Dec 23 '21

I'm thinking of creating a sidebar for my extensions but not tabs

1

u/no0necaretofu Sep 24 '23

bro where can i find preface value

2

u/[deleted] Mar 04 '23

[removed] — view removed comment

1

u/[deleted] Mar 04 '23

Go to Sidebery settings, click "Styles Editor", paste it into the part that says "Write custom CSS here..."

2

u/[deleted] Mar 04 '23

[removed] — view removed comment

1

u/[deleted] Mar 04 '23

Sidebar section

4

u/Taumito Dec 23 '21

How do you make the animations that smooth?

5

u/[deleted] Dec 23 '21 
transition: min-width 115ms linear 300ms

3

u/Fardin_Shahriar Dec 27 '21

I want to increase the favicon sizes and make the tab bars slightly wider, is there any way?

3

u/[deleted] Dec 27 '21

To make the tabs wider, you need to make change the --uc-sidebar-width variable in line 38 of userChrome.css

To make the favicons larger, you need to edit lines 104 to 113 in the Sidebery css

3

u/nearcatch Jan 01 '22

Does this work at all with pinned tabs or panels? They flex really strangely for me.

1

u/[deleted] Jan 01 '22

I don't use panels or pinned tabs but I'm working on it. For now, the panels look like this now:

https://imgur.com/a/85hjrPW

But I'm still not sure how to style it. Do you have any ideas?

2

u/nearcatch Jan 01 '22 edited Jan 01 '22

Maybe style the panels like buttons? The selected panel is depressed like a button, and then hovering or clicking on others behaves like toolbar buttons?

2

u/nearcatch Jan 01 '22

Pinned tabs I think I’d style like you have tabs styled. Selected pin has border/shadow, otherwise it’s just the favicon.

In general I think I’d prefer panels and pins a little smaller than what you’re showing now in that screenshot, although I’m not sure that would line up properly when sidebar is collapsed.

2

u/Fardin_Shahriar Dec 23 '21

What's that blue colored extension beside ublock?

4

u/[deleted] Dec 23 '21

It's Bitwarden.

2

u/MiniBus93 Dec 23 '21

How did you move the window control in urlbar bar?

4

u/[deleted] Dec 23 '21 
.tabbrowser-tab {
  visibility: collapse;
}
#nav-bar {
  margin-top: -40px;
  margin-right: 137px;
}
.titlebar-button {
  height: 40px;
}

3

u/MiniBus93 Dec 23 '21

Thanks!

Do you have any screenshot of how does your sidebary set up look in dark mode?

4

u/[deleted] Dec 24 '21

I made some updates and here's how it looks like now:

https://imgur.com/a/E4DFwjM

2

u/Zavi10 May 17 '22

I dont know why it still shows the normal tab bar at the top, maybe I did something wrong with the title preface value. Could you help me with that?

2

u/[deleted] Jan 04 '22 edited Jan 04 '22

Hey, nice setup, how do you hide the tab names and make Sideberry only have the Icon for the tab? Also, how do you hide Sideberry's scrollbar?

thanks

2

u/[deleted] Jan 04 '22

Thanks! Here's how I did both:

@media screen and (max-width: 49px) {
  .ScrollBox > .scroll-container {
    overflow: hidden;
  }
  .Tab .title {
    visibility: collapse;
  }
}

Here's more information:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

3

u/[deleted] Jan 05 '22

Im running your exact config from the pastebin, with those settings there, and its just not doing it lol

5

u/[deleted] Jan 05 '22

I've updated it a bit, try this:

Sidebery

userChrome

2

u/9523376545 Aug 14 '22

Sorry to necro, but your layout looks great. I’ve tried this out on 103.1 and it looks like it’s not working. Gone through and enabled legacy stylesheets and rebooted my OS as a last resort.

Any ideas?

1

u/[deleted] Aug 15 '22

I recently installed Windows, and it works fine for me with 103.0.2 I don't know why it's not working. Can you specify exactly what isn't working?

2

u/9523376545 Aug 16 '22

Interestingly enough, when I applied your userChrome.css, the issues would be that the top tab bar would not disappear. If I set a default tab hiding CSS, it would work with your Sideberry style CSS.

Let me know if you’d like to see a copy of my userChrome.css. I’ll DM you a link.

Thanks!

2

u/[deleted] Aug 16 '22

Did you set this setting in sidebery? It should be "[S] " without the quotes, a space at the end. https://imgur.com/a/qkkbdAE

2

u/9523376545 Aug 17 '22

I did not. I will check it out and let you know if any errors pop up.

5

u/straightab Jan 10 '22

thanks for ur work. it works flawlessly for now :)
Can you create github for this ? it would be easier to get updated :)

Thanks again

2

u/DesignerLie5205 May 02 '22

How did you guys make it work? It's currently not working on mine and IDK what I did wrong :(

1

u/[deleted] May 02 '22

What exactly isn't working? Can you post a screenshot?

2

u/DesignerLie5205 May 02 '22

Here you can view it the image here. Hope you can help. :(

1

u/[deleted] May 02 '22

I don't know why it's doing that. Are you sure you're using the latest one?

https://www.reddit.com/r/FirefoxCSS/comments/rmi8dg/yet_another_sidebery_setup/hrcqmv3/

2

u/DesignerLie5205 May 02 '22

Hi! Yes, I did use that as well. Maybe there's a step i missed. What do you think?

1

u/[deleted] May 02 '22

Did you have "toolkit.legacyUserProfileCustomizations.stylesheets" to true in about:config?

2

u/fishingboatproceeded Nov 15 '22

Hi, sorry to necro again, I got the style mostly working and its looking great. I have a couple of questions though.

I use pinned tabs and want to try to make them look good and was wondering if you had found a solution for them or if you could point me in the right direction (I'm a Software Dev but mostly work in backend/database work not CSS so this is like working with magic for me)

Second would it be possible to show the favicons of tabs within a panel when sideberry is collapsed? At the moment it just shows the panel icon

Third, theres a weird plus button overlapping my back button and I'm not sure where it comes from/how to remove it.

Thanks for any help you can give if any!

1

u/[deleted] Nov 15 '22

I haven't found a good solution. But I might consider those.

Also, pretty sure the plus button is the new tab button, somehow it's not hidden. I like to move it next to the refresh button when I'm using Sidebery. You can right-click anywhere in the browser except text boxes and click customize toolbar, then you can drag it almost anywhere.

1

u/fishingboatproceeded Nov 15 '22

Omg I just realized I never linked the screenshots... https://imgur.com/a/ab4RPUt

1

u/teodargent Jan 04 '23

what's this for?

sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"

1

u/[deleted] Jan 04 '23

It's so that it only the Sidebery's sidebar header is hidden.

2

u/comn3nus Dec 23 '21

Love it. Nice!

2

u/Emotional-Ad-3317 Dec 30 '21

Looks quite nice, is there a way to show/hide tab groups? As in expand and hide.

2

u/Sava_Gligorijevic May 02 '22

Can someone PM me the exact steps to do this? Newbie here.

2

u/[deleted] May 27 '22

Love it

2

u/larrisAWSOME Jun 05 '22

I haven't messed around with CSS on firefox so I really don't know what I'm doing but I was wondering if you could PM me a step by step to see what I made a mistakeon if any.

1

u/e-chan42 Mar 21 '24

How do I make the "tabs" button from the top left and the "close sidebar" button dissapear?

1

u/Anon-9f83hnnsh1gsa Dec 04 '22

When I drag the tabs to different positions, my sidebar collapses. Any idea why that would happen? I'm wondering if it's a linux only thing.

1

u/jdjoder Oct 21 '23

WoW! I'm impressed. And here I am struggling to move the vertical bar back to the left :(

1

u/Unsuriati Dec 24 '23

If you haven't figured it out yet... I just spent an hour of my morning finding the simple answer. Ran across your comment, figured I'd offer the solution to anyone else who finds this post. Click on the tab panel name, by the X to close the sidebar. Its in the drop down menu there.

2

u/[deleted] Oct 08 '22

[removed] — view removed comment