Stylus (Addon) Forum Themes

[KillerBee]

I updated the vBulletin style with lots of changes to thread listings, and I made quotes look very much like vBulletin.

Ken is there a way to expand or squeeze down the initial forum page (https://forums.anandtech.com/)
so it shows entire latest subject line on right instead of the abbreviated version?

PS I've got $4.99 left over on a Gift Card (almost enough for a slice of pizza somewhere I'm sure )
and would be happy to donate if you got a link

 

[Ken g6]

Ken is there a way to expand or squeeze down the initial forum page (https://forums.anandtech.com/)
so it shows entire latest subject line on right instead of the abbreviated version?

Here's a quick-and-dirty CSS solution:

  .node.node .nodeText, .node.node .nodeLastPost {
  width: 47%;
  }
  .node.node .nodeControls {
  right: 50%;
  }

Not worth a gift card, for sure.

 

[KillerBee]

Here's a quick-and-dirty CSS solution:

  .node.node .nodeText, .node.node .nodeLastPost {
  width: 47%;
  }
  .node.node .nodeControls {
  right: 50%;
  }

Not worth a gift card, for sure.

You're amazing Thanks Ken g6!

 

[tommo123]

hi, thanks for all this guys (it looks almost normal again. so much better on my eyes).

i know it's been asked but haven't seen a proper answer. is there a way to get the old left hand side navbar back too?

 

[Jaskalas]

hi, thanks for all this guys (it looks almost normal again. so much better on my eyes).

i know it's been asked but haven't seen a proper answer. is there a way to get the old left hand side navbar back too?

Far as I'm aware that's a Grease Monkey task, and a semi complex one at that. Beyond the scope of CSS alone.

 

[Spacehead]

Current Themes:

Light​

• vBulletin Style
  
• Vanilla v(0.1)
  
• Tan v(0.2)

So, i'm using the Tan style. If i want to try making a few color tweaks i just copy the code into Notepad???, make changes & saves as .css file? Or do i need something other than Notepad?
Assuming you don't mind me trying some changes.

 

[lxskllr]

So, i'm using the Tan style. If i want to try making a few color tweaks i just copy the code into Notepad???, make changes & saves as .css file? Or do i need something other than Notepad?
Assuming you don't mind me trying some changes.

Give it a different name. That way you can have multiple versions installed, and easily revert changes. I like notepad++ on windows, but notepad works.

 

[Crono]

I made a few more tweaks to my grey-and-blue color style and decided to upload it, in the off chance someone wants to use it besides me. It's messy code (since I'm not a coder/programmer... and I'm lazy ) with some redundant and incorrect formatting, I'm sure, and the design is inconsistent, but it's good enough for temporary use (for me, anyway), until we get a proper dark theme. I just tweaked the color settings in CSS by trial and error without touching size, spacing, padding, etc of the fonts or elements, so it's still essentially the same XenForo layout but darkened while maintaining decent contrast for (most) text by using light blue.

There are a bunch of elements that could/should be fixed or further themed - it's about 90% of the way there - but I'm hoping the staff just adds a dark theme soon. If not, I'll probably learn how to make a proper theme *eventually* and slip the grand poobah (that's his/her title, right? I can't keep the titles straight) of the forums a fiver to add it.

And yes, it's heavy on the blue text. Here it is:

https://userstyles.org/styles/131699/crono-s-shades

Screenshots:

Note: It seems to work okay on desktop, but on mobile (Android) Firefox some of the formatting is a bit broken in portrait mode

EDIT: Fixed above issue

 

[Jaskalas]

So, i'm using the Tan style. If i want to try making a few color tweaks i just copy the code into Notepad???, make changes & saves as .css file? Or do i need something other than Notepad?
Assuming you don't mind me trying some changes.

You can edit the code directly in the Stylish addon.
Which is a far better choice than notepad as it has:

• Line Counts
• Syntax Highlighting
• Code Suggestions

Features that help everyone, but especially those unfamiliar with CSS.
Just click on Stylish, click "manage styles" and click "edit" for the one you want to change.
And yes, I recommend starting a new Style and just copying the content of the original. References back to an original are always useful to keep.

Assuming you don't mind me trying some changes?
Think of this as open source. You are free to edit everything / anything as you like. I posted this as a resource to help others.

 

[Spacehead]

Assuming you don't mind me trying some changes?
Think of this as open source. You are free to edit everything / anything as you like. I posted this as a resource to help others.

I figured as much but just thought i'd ask.
Just tried changing some background colors to get it a little darker but haven't found the right combo yet. Knowing nothing about CSS i needed something to start from. Hopefully they just import a darker theme so i don't have to use Stylish as sometimes i get a flicker before it loads.

 

[Crono]

Updated my theme with minor tweaks.Mostly just minimized appearance of borders and fixed random buttons and areas I forgot to change the color of. Almost zero text or areas with pure white now.

 

[KillerBee]

Updated my theme with minor tweaks.Mostly just minimized appearance of borders and fixed random buttons and areas I forgot to change the color of. Almost zero text or areas with pure white now.

Cool Dark Theme Crono
Is there any easy way to change the Blue text to Yellow and maybe shrink down the Logo?

I mean I like Dark Themes but guess I've gotten too old .. I can't see shit of the blue on black letters = lol

 

[Crono]

Cool Dark Theme Crono
Is there any easy way to change the Blue text to Yellow and maybe shrink down the Logo?

I mean I like Dark Themes but guess I've gotten too old .. I can't see shit of the blue on black letters = lol

It's doable, but I had to keep adjusting the colors to get it the way it is where it's somewhat balanced on an AMOLED mobile screen and desktop LCD (my own use cases). Blue text is not for everyone, I know, it's just my own preference. It's easier on the eyes for me while still contrasting well with a darker background. I was tempted to go grey for all the text, but it's too drab.

Someone else could probably do a better theme closer to what you want (like a take on the inverted theme). Or maybe eventually there will be more XenForo themes uploaded.

 

[lxskllr]

Cool Dark Theme Crono
Is there any easy way to change the Blue text to Yellow and maybe shrink down the Logo?

I mean I like Dark Themes but guess I've gotten too old .. I can't see shit of the blue on black letters = lol

You use gnu/linux, right? you could use sed to easily find/replace colors in the css. Play around with it, and see if you get something you like. I started doing that to make the text amber, but it's a pita on a phone, and by the time I got to a desktop, the blue grew on me :^D

 

[KillerBee]

You use gnu/linux, right? you could use sed to easily find/replace colors in the css. Play around with it, and see if you get something you like. I started doing that to make the text amber, but it's a pita on a phone, and by the time I got to a desktop, the blue grew on me :^D

I'm trying to search and replace - still haven't found the magic numbers make the letters brighter

 

[lxskllr]

I'm on my phone, so I can't easily pick colors, but you could try changing #156f9b to #e7b01c

 

[KillerBee]

I'm on my phone, so I can't easily pick colors, but you could try changing #156f9b to #e7b01c

Almost about half the stuff is readable now

 

[lxskllr]

You could use a color picker to grab the offending color, find it in the css, then change it to something you prefer. Doing it this way is a blunt instrument of course, and may have unintended effects. To narrow it down, you can read the sections you're changing, and only change some of them. The titles are somewhat descriptive, even for someone not familiar with web design, but it's a trial/error thing.

If you want to get into it more, firebug on firefox has a handy element picker. You can highlight a section of the web page, and make live, non permanent changes. As you figure it out, you can add the changes to a custom style sheet. Even if you never really "get it", you can have fun playing, and maybe learn a bit of how css works, and how sites are put together.

 

[flexy]

Holy crap you made this as an optional official style now? EXCELLENT!!

 

[flexy]

This just a very MINOR "annoyance" with the new, experimental VB theme which is excellent:

When you have alerts, then you get this small orange indicator to the right of the flag, with the number of alerts you have.
(The orange thing then increases the area/mouse-sensitive size of the flag icon)
When you mouse-over the flag to see the new alerts, the orange thing disappears, the mouse-sensitive area shrinks again, which means you might end up with your mouse hovering over the email icon instead....which in turn makes your alert popup disappear because you now hover over the emails).

A VERY MINOR thing but I just wanted to mention it.

 

[Spacehead]

I'm on my phone, so I can't easily pick colors, but you could try changing #156f9b to #e7b01c

Thanks, that's alot better for me.
Just some trial & error to figure which line to make the change. In case anyone else tries this, line 137 changes the text color in posts.

 

[Crono]

Gave up on light blue for body text, as it's harder to see on very low brightness or software-dimmed screens (e.g. using Twilight app). So I changed the body text in the style from light blue to light grey.

I might try switching usernames in threads to a shade of orange (like pumpkin), as well, to see how it looks.

EDIT: made the change

 

[zinfamous]

Gave up on light blue for body text, as it's harder to see on very low brightness or software-dimmed screens (e.g. using Twilight app). So I changed the body text in the style from light blue to light grey.

I might try switching usernames in threads to a shade of orange (like pumpkin), as well, to see how it looks.

EDIT: made the change

ooooo, that's MUCH better. Time to update again. THANKS!

 

[tommo123]

Far as I'm aware that's a Grease Monkey task, and a semi complex one at that. Beyond the scope of CSS alone.

thanks man. shame, was useful.

 

[Thebobo]

I have been called blind but I don't see the new post link per thread in the VB style. Also in the original the little dot could be a bit larger.