I love the choice, but I absolutely LOVE how tildes looks right now. I'm a HUGE lover of old reddit's design, so the way tildes looks right now speaks to me on such an internal level. I'm happy...
I love the choice, but I absolutely LOVE how tildes looks right now. I'm a HUGE lover of old reddit's design, so the way tildes looks right now speaks to me on such an internal level.
I'm happy people get the option, but really hope things don't change drastically.
Here's a screenshot It is a custom stylesheet (CSS file) that can be injected using a browser extension called Stylus. I made it to give stylus a more rounded and better look imo. I'm still...
Exemplary
Here's a screenshot
It is a custom stylesheet (CSS file) that can be injected using a browser extension called Stylus. I made it to give stylus a more rounded and better look imo. I'm still working on it, so don't worry if everything doesn't look right at the moment. It works on mobile too if you're on Firefox.
Installation instructions can be found on the Github page.
Hope you like it!
Edit: I'll keep upcoming changes and things I'm currently working on the Github page (as an "Issue"), you're welcomed to give suggestions :)
That's my fault. I ended up moving it to my website and then recently removed it from my website again because I was restructuring something, and I have yet to add them back again. I'll remove...
That's my fault. I ended up moving it to my website and then recently removed it from my website again because I was restructuring something, and I have yet to add them back again.
I'll remove them from the wiki and add them back again when the time comes. :D
Since Bauke already removed the linkrot, I'll just drop the userstyle if you want to try it out: https://paste.tuxcloud.net/?980f6c02ec0b5cc2#EYRMTyyCR1Y5aihdCwp2st37teTUeHDDYS6Dq1DcXf7q Import...
Import into Stylus and then change the site theme to Dracula. The userstyle actually works to change any of the baked-in Tildes theme, but it's designed to get Dracula to mimic Bauke's old "Baukula" userstyle.
Here’s how it looks as-is (20px), and here’s how it is with 15px (I think it should actually be closer to 14px). Here’s an article I found which explains what I’m talking about.
I'm going to go against the grain here and say that I really miss square corners. I love the density of Tildes and I really really missed squares. Good job for choices. I'm making my choice with...
I'm going to go against the grain here and say that I really miss square corners. I love the density of Tildes and I really really missed squares.
Good job for choices. I'm making my choice with the current :) maybe one day if Deimos moves away from this design I'll have to ask y'all to help me make a custom version of this design.
The content extending all the way to the sides kinda made it hard to read for me, so I made it narrower :) You can remove the following code from the styles to make it extend all the way: @media...
The content extending all the way to the sides kinda made it hard to read for me, so I made it narrower :)
You can remove the following code from the styles to make it extend all the way:
@media screen and (min-width: 800px) {
body {
max-width: 70%;
}
}
To edit the styles: Click on Stylus -> Click on the "pencil" icon on the left of "Rounded Tildes - Vignesh" -> remove the code I mentioned above -> Click "Save" on the left panel
Nice I figured it was a stylistic preference so I wasn't going to complain about it. Some people enjoy the new reddit style of browsing but one of the things I appreciate about Tildes is how much...
Nice I figured it was a stylistic preference so I wasn't going to complain about it. Some people enjoy the new reddit style of browsing but one of the things I appreciate about Tildes is how much it looks like the Old Reddit that I would use.
funnily enough I was just complaining in my head how the site's desktop look wasn't quite as responsive as I hoped. you generally want some room on a larger sceen's edges to breath when reading...
funnily enough I was just complaining in my head how the site's desktop look wasn't quite as responsive as I hoped. you generally want some room on a larger sceen's edges to breath when reading text.
I changed it to 90% but otherwise this is perfect and then some. Thank you!
I don't get my text extending all the way across the available space in original layout - the comment boxes go full R-L, minus the sidebar, but the text stops about 80% of the way there.
I don't get my text extending all the way across the available space in original layout - the comment boxes go full R-L, minus the sidebar, but the text stops about 80% of the way there.
Sounds good, I wouldn't prioritize it too much. Add-ons on Firefox Mobile are kind of a bitch since you need Firefox Nightly + Mozilla Add-on Account + create your own collection + enable...
Sounds good, I wouldn't prioritize it too much. Add-ons on Firefox Mobile are kind of a bitch since you need Firefox Nightly + Mozilla Add-on Account + create your own collection + enable developer mode in nightly + add weird UID and custom collection name to Firefox.
Not sure how many mobile users will actually do that.
Well, to play devil's advocate I think there's an argument that shorter line lengths are more comfortable to read. For design questions like that I tend to refer to Practical Typography which...
Well, to play devil's advocate I think there's an argument that shorter line lengths are more comfortable to read. For design questions like that I tend to refer to Practical Typography which seems to agree. Ultimately it's preference I suppose!
Web design is unique in that there is basically unlimited space available to play with. Why over-crowd your page when you can just have the user scroll down?
as I said in another response, I think it's largely dependent on the readers display. In my mind it makes more sense for an end-user with an ultrawide display to make display adjustments to...
as I said in another response, I think it's largely dependent on the readers display. In my mind it makes more sense for an end-user with an ultrawide display to make display adjustments to improve their reading experience than to make everyone else's experience worse.
Well I’m sure there’s a level of personal preference involved. I personally don’t find narrower columns a worse experience but if you do I can see why you’d not find this style sheet very appealing!
Well I’m sure there’s a level of personal preference involved. I personally don’t find narrower columns a worse experience but if you do I can see why you’d not find this style sheet very appealing!
Yeah it's great. It was one of the things that forced me to move away from table-based layouts when I first started as a web developer. Really helped motivate me to master CSS.
Yeah it's great. It was one of the things that forced me to move away from table-based layouts when I first started as a web developer. Really helped motivate me to master CSS.
I love Tildes' design already, but I think this looks gorgeous too! It's great for people who want to reduce the site's density a bit. It gives everything a little bit more breathing room. I can...
I love Tildes' design already, but I think this looks gorgeous too! It's great for people who want to reduce the site's density a bit. It gives everything a little bit more breathing room. I can see a lot of people enjoying this.
One thing I did notice is that when I installed it, it made it look like every comment has an exemplary label because the stripe color on the left is different. It might be because I'm using the Dracula theme? I snipped an example here of what it looks like with and without your styling.
Yeah, the default design looks very dense, that's the reason I decided to make this thing. You mean the line not attaching to the header of the comment? (I'm using the Atom One Dark theme btw) I...
Yeah, the default design looks very dense, that's the reason I decided to make this thing.
You mean the line not attaching to the header of the comment? (I'm using the Atom One Dark theme btw) I need to fix it, I'm still new to CSS and have some stuff to figure out, expect a lot of updates :)
No, specifically the color of the line. In the unstyled one, the left stripe is purple (which is the stripe color for my own comments). It changes to a bright blue for the exemplaried comment. In...
No, specifically the color of the line. In the unstyled one, the left stripe is purple (which is the stripe color for my own comments). It changes to a bright blue for the exemplaried comment.
In the styled one, both are bright blue.
This also holds true for regular comments that aren't mine, by the way. They also have a blue stripe that makes them look exemplary.
Does the style update automatically for users who have it installed when you push the update? Sorry if that's a stupid question but it's the first time I am using Stylus.
Does the style update automatically for users who have it installed when you push the update? Sorry if that's a stupid question but it's the first time I am using Stylus.
Very cool take on a more modern feel. Personally I enjoy the incredibly utilitarian default look. This also does not translate very well for mobile but that could easily be improved upon. Thanks...
Very cool take on a more modern feel. Personally I enjoy the incredibly utilitarian default look. This also does not translate very well for mobile but that could easily be improved upon. Thanks for sharing!
Very cool, definitely modernizes the design! Love the idea of people using Tildes as a design playground. For me personally, I love the old school default look (Tildes reminds me a lot of the old...
Very cool, definitely modernizes the design! Love the idea of people using Tildes as a design playground. For me personally, I love the old school default look (Tildes reminds me a lot of the old internet, so I appreciate it looking the part), but can definitely see others without that nostalgia wanting some modernization!
I like it! I probably wont install it just because Tildes is still in development and there are likely to be a decent amount of changes to the interface that custom styling won't play well with....
I like it! I probably wont install it just because Tildes is still in development and there are likely to be a decent amount of changes to the interface that custom styling won't play well with. But the rounding on buttons looks nice, and it does help to have a bit more differentiation between interactible elements of the site and non-interactible ones.
Really enjoy this, thank you. I had to remove the width as someone else mentioned, as it is a huge waste of space on an ultrawide monitor. I actually think the extra space around each comment...
Really enjoy this, thank you. I had to remove the width as someone else mentioned, as it is a huge waste of space on an ultrawide monitor.
I actually think the extra space around each comment header makes it look a bit less cluttered when it comes to reading comments, too.
I've not worked out how to add a tag yet, but I would definitely tag this post with 'stylesheet' too, if I knew how.
I love this, it's a great style! I look forward to it being updated for light theme - currently all the comments have a dark left border for me. The group names are all dark too.
I love this, it's a great style! I look forward to it being updated for light theme - currently all the comments have a dark left border for me. The group names are all dark too.
On Beta and Nightly, yes. The process is a little convoluted, but better than nothing. https://www.androidpolice.com/firefox-beta-107-android-install-any-browser-add-on/
On Beta and Nightly, yes. The process is a little convoluted, but better than nothing.
Thank you! There were a couple things that I had to add !important to, I bet stylus handles that automatically, but I like this a lot #^-^# In particular, narrowing the content on larger screens...
Thank you! There were a couple things that I had to add !important to, I bet stylus handles that automatically, but I like this a lot #^-^#
In particular, narrowing the content on larger screens really helps reading through the comments.
Ooh fancy, I like it, It does leave a lot of blank space though. Two problems I've noticed: the edit and preview texts are too tiny and the sort on the main page has a scrollbar showing for some...
Thanks for the feedback! I increased the text sice on the "edit" and "preview" buttons, and I removed the scrollbars as well. (Both of them were looking fine on my device, what browser are you...
Thanks for the feedback! I increased the text sice on the "edit" and "preview" buttons, and I removed the scrollbars as well. (Both of them were looking fine on my device, what browser are you using?)
And I also fixed the outlines on the "edit" and "preview" buttons
Oh cool! I've never used Vivaldi, it looked fine on Firefox even though the font was so small because of the minimum font size rule, didn't even realise it was so small lol
Oh cool! I've never used Vivaldi, it looked fine on Firefox even though the font was so small because of the minimum font size rule, didn't even realise it was so small lol
I love the choice, but I absolutely LOVE how tildes looks right now. I'm a HUGE lover of old reddit's design, so the way tildes looks right now speaks to me on such an internal level.
I'm happy people get the option, but really hope things don't change drastically.
No problem, it's just felt it looks too old (not in an insulting way) so I wanted to try a different style.
Here's a screenshot
It is a custom stylesheet (CSS file) that can be injected using a browser extension called Stylus. I made it to give stylus a more rounded and better look imo. I'm still working on it, so don't worry if everything doesn't look right at the moment. It works on mobile too if you're on Firefox.
Installation instructions can be found on the Github page.
Hope you like it!
Edit: I'll keep upcoming changes and things I'm currently working on the Github page (as an "Issue"), you're welcomed to give suggestions :)
Added your userstyle to the wiki: https://tildes.net/~tildes/wiki/customizing_tildes#css_themes
Thank you kind sir 😊
Hm the link to @bauke's is 404.
That's my fault. I ended up moving it to my website and then recently removed it from my website again because I was restructuring something, and I have yet to add them back again.
I'll remove them from the wiki and add them back again when the time comes. :D
Since Bauke already removed the linkrot, I'll just drop the userstyle if you want to try it out: https://paste.tuxcloud.net/?980f6c02ec0b5cc2#EYRMTyyCR1Y5aihdCwp2st37teTUeHDDYS6Dq1DcXf7q
Import into Stylus and then change the site theme to Dracula. The userstyle actually works to change any of the baked-in Tildes theme, but it's designed to get Dracula to mimic Bauke's old "Baukula" userstyle.
yeah... @synergy-unsterile can you fix it please?
Would you be able to post any pictures of what this looks like?
Oh yeah I forgot about it getting excited about my first post on tildes! I added a screenshot to the comment and to the Github page :)
Understandable, thanks for the screenshot!
I’d probably slightly decrease the radius on the vote button, it’s a little too round relative to the parent container.
It looks fine for me though... Can you give a screenshot?
Here’s how it looks as-is (20px), and here’s how it is with 15px (I think it should actually be closer to 14px).
Here’s an article I found which explains what I’m talking about.
Both the Imgur links are broken... But the article was super useful, I'll try adjusting it accordingly, thanks!
I'm going to go against the grain here and say that I really miss square corners. I love the density of Tildes and I really really missed squares.
Good job for choices. I'm making my choice with the current :) maybe one day if Deimos moves away from this design I'll have to ask y'all to help me make a custom version of this design.
Good choice, I'm also planning on making more designs like a slightly less dense version of the default without changing any colors/roundness etc.
Looks great, however I really like how "plain" it looks by default :)
It's fine, but I do love some flare in my pages as a web dev student myself :)
Nothing wrong with that :D I just like simple minimal designs in general.
I love the rounded design but much prefer how the current design extends all the way to the left instead of having a big empty margin.
The content extending all the way to the sides kinda made it hard to read for me, so I made it narrower :)
You can remove the following code from the styles to make it extend all the way:
To edit the styles: Click on Stylus -> Click on the "pencil" icon on the left of "Rounded Tildes - Vignesh" -> remove the code I mentioned above -> Click "Save" on the left panel
Nice I figured it was a stylistic preference so I wasn't going to complain about it. Some people enjoy the new reddit style of browsing but one of the things I appreciate about Tildes is how much it looks like the Old Reddit that I would use.
Yeah it's really just personal preference, I love how the class names well made so that it's easier to change CSS!
funnily enough I was just complaining in my head how the site's desktop look wasn't quite as responsive as I hoped. you generally want some room on a larger sceen's edges to breath when reading text.
I changed it to 90% but otherwise this is perfect and then some. Thank you!
I don't get my text extending all the way across the available space in original layout - the comment boxes go full R-L, minus the sidebar, but the text stops about 80% of the way there.
Great work, but personally I love the old forum feeling of Tildes. More rounded edges makes it feel more 'social media-y'.
Haha I get what you mean
It's nice-ish, but adds a lot of whitespace on mobile.
Example: https://ibb.co/y6nsDVz
Haha, better for touch I suppose?
Maybe,​ I haven't run into any real issues using Firefox Nightly solely for Tildes though.
The example image isn't loading
Try this? I don't know how to use imgur anymore xD
https://picallow.com/example-6/?usp_success=2&post_id=124348
Yeah, it does look like a bit too much. I'll try adjusting it after I use it a bit more on mobile :)
Sounds good, I wouldn't prioritize it too much. Add-ons on Firefox Mobile are kind of a bitch since you need Firefox Nightly + Mozilla Add-on Account + create your own collection + enable developer mode in nightly + add weird UID and custom collection name to Firefox.
Not sure how many mobile users will actually do that.
I mean, I do that, so :)
I do not understand the appeal of adding giant gutters to the sides to webpages, the space is there, why not use it?
Well, to play devil's advocate I think there's an argument that shorter line lengths are more comfortable to read. For design questions like that I tend to refer to Practical Typography which seems to agree. Ultimately it's preference I suppose!
Web design is unique in that there is basically unlimited space available to play with. Why over-crowd your page when you can just have the user scroll down?
Yep, this is what I mean when I said the narrower body makes it easier to read
as I said in another response, I think it's largely dependent on the readers display. In my mind it makes more sense for an end-user with an ultrawide display to make display adjustments to improve their reading experience than to make everyone else's experience worse.
Well I’m sure there’s a level of personal preference involved. I personally don’t find narrower columns a worse experience but if you do I can see why you’d not find this style sheet very appealing!
Reading is easier if it's narrower, less head/eye movement:)
Only if you're on a giant monitor, you're making the experience worse for everyone not on a curved-ultrawide.
I kinda like the look. The default look is brutal old school unix. This is a softer web2 feel - it's got cute going for it.
And I like cute. Thanks! (Because unix is mentioned here, I must mention that I use arch btw)
Tildes is the new css zen garden!
Oh wow that site is such a good idea, I love it!
Yeah it's great. It was one of the things that forced me to move away from table-based layouts when I first started as a web developer. Really helped motivate me to master CSS.
I hated CSS until yesterday, I love it now
I love Tildes' design already, but I think this looks gorgeous too! It's great for people who want to reduce the site's density a bit. It gives everything a little bit more breathing room. I can see a lot of people enjoying this.
One thing I did notice is that when I installed it, it made it look like every comment has an exemplary label because the stripe color on the left is different. It might be because I'm using the Dracula theme? I snipped an example here of what it looks like with and without your styling.
Yeah, the default design looks very dense, that's the reason I decided to make this thing.
You mean the line not attaching to the header of the comment? (I'm using the Atom One Dark theme btw) I need to fix it, I'm still new to CSS and have some stuff to figure out, expect a lot of updates :)
No, specifically the color of the line. In the unstyled one, the left stripe is purple (which is the stripe color for my own comments). It changes to a bright blue for the exemplaried comment.
In the styled one, both are bright blue.
This also holds true for regular comments that aren't mine, by the way. They also have a blue stripe that makes them look exemplary.
Ohh I get it now, I'll update it to make it a different color for own comments. Thanks for the feedback!
Does the style update automatically for users who have it installed when you push the update? Sorry if that's a stupid question but it's the first time I am using Stylus.
You can update, i don't know if it's automatic though. The update instructions are on the GitHub page
Very cool take on a more modern feel. Personally I enjoy the incredibly utilitarian default look. This also does not translate very well for mobile but that could easily be improved upon. Thanks for sharing!
You're welcome! I'm gonna try it look a bit nicer on mobile too. The default is kinda too dense for me
Very cool, definitely modernizes the design! Love the idea of people using Tildes as a design playground. For me personally, I love the old school default look (Tildes reminds me a lot of the old internet, so I appreciate it looking the part), but can definitely see others without that nostalgia wanting some modernization!
Any chance you'll make a light version of it?
It does work on light mode, but some things may look odd. I'll try to work on the light mode after I'm done with dark mode :)
Yeah, I took a glance at it and it was... a bit lacking, I guess?
I'm excited because it does look pretty great in general, though!
Thank you so much for the appreciation! This is making me more motivated to improve my CSS skills
I like it! I probably wont install it just because Tildes is still in development and there are likely to be a decent amount of changes to the interface that custom styling won't play well with. But the rounding on buttons looks nice, and it does help to have a bit more differentiation between interactible elements of the site and non-interactible ones.
Really enjoy this, thank you. I had to remove the width as someone else mentioned, as it is a huge waste of space on an ultrawide monitor.
I actually think the extra space around each comment header makes it look a bit less cluttered when it comes to reading comments, too.
I've not worked out how to add a tag yet, but I would definitely tag this post with 'stylesheet' too, if I knew how.
I love this, it's a great style! I look forward to it being updated for light theme - currently all the comments have a dark left border for me. The group names are all dark too.
Light mode coming soon :)
This is great, really liking this on Firefox (Android), thanks!
Can you install more extensions on Firefox mobile now?
On Beta and Nightly, yes. The process is a little convoluted, but better than nothing.
https://www.androidpolice.com/firefox-beta-107-android-install-any-browser-add-on/
thanks!! i got it working!
Well this is quite lovely, thank you!
Love this, makes it much more usable imo, thanks for providing this!
Could I get just the css file by any chance? I don’t use stylus, but I have a different method of injecting css
The CSS file is available on the style page (look at the Source Code section at the bottom)
Thank you! There were a couple things that I had to add !important to, I bet stylus handles that automatically, but I like this a lot #^-^#
In particular, narrowing the content on larger screens really helps reading through the comments.
Cool! You might have to change CSS manually if I make a change though
Ooh fancy, I like it, It does leave a lot of blank space though. Two problems I've noticed: the edit and preview texts are too tiny and the sort on the main page has a scrollbar showing for some reason. Other than that, nice job.
Thanks for the feedback! I increased the text sice on the "edit" and "preview" buttons, and I removed the scrollbars as well. (Both of them were looking fine on my device, what browser are you using?)
And I also fixed the outlines on the "edit" and "preview" buttons
Update it through Stylus and check it out!
Yup, looking fine now. I'm using Vivaldi.
Oh cool! I've never used Vivaldi, it looked fine on Firefox even though the font was so small because of the minimum font size rule, didn't even realise it was so small lol
Nice job! It looks great and I could see myself using it to change things up if I get bored.
Glad you like it!