Stylus (Addon) Forum Themes

[KillerBee]

That worked perfect ! Thanks Ken

Well it almost worked perfect except for leaving youtube videos reversed

 

[Jaskalas]

Youtube links are Iframes, so...

.messageText iframe{ filter: invert(100%); }

 

[KillerBee]

Youtube links are Iframes, so...

.messageText iframe{ filter: invert(100%); }

Thanks Jaskalas!
I was just about to start going through the entire thing and try plugging in the inverse colors manually

 

[Jaskalas]

While prototyping the inverse themes I've noticed two primary issues.

1. Not every color contrast works in reverse.
   Proper Dark Themes with intended contrast achieve better results.
   Though I'll admit reverse vBulletin looks pretty good as is. Reverse Vanilla needs some work.
   
   
2. While images can be double filtered... this does not work for background-images.
   Without a global filter for those cases... we'll have to target individual elements and flip them back for their background while customizing the other colors in the element. This is most noticeable for user avatars in the profile section and the top link to get there.

Well.. probably minor issues for those looking to return to a dark theme quickly.

 

[KillerBee]

One more thing Ken
Is there any easy way to drop the "Members Online Now" and "Staff Online Now" side bars
but leave the "New Posts" side bar?

I added this line to remove "Members Online" sidebar:
.sidebar .membersOnline {display: none;}


Is there a way to extend the New Posts sidebar so it shows more than 5 ?

 

[Jaskalas]

Is there a way to extend the New Posts sidebar so it shows more than 5 ?

That piece of content is just 5 items. There are not more hidden off screen.
CSS alters the display of a website, it does not add content to it.

It'd be possible for Grease Monkey to make that change, by also loading content from another page and then throwing it in.

 

[KillerBee]

That piece of content is just 5 items. There are not more hidden off screen.
CSS alters the display of a website, it does not add content to it.

It'd be possible for Grease Monkey to make that change, by also loading content from another page and then throwing it in.

Well after googling how to use GreaseMonkey I can safely say it won't be happening today. Thanks for the info.

 

[Jaskalas]

Update on the avatar backgrounds....
This one line might have all the inverse code needed.

body, img, .img.m, .img.s, .messageText iframe, #userBar .navTabs {filter: invert(100%); }

I'm almost ready to release the first Reverse theme. Just need to tweak the search bar colors so you can see it.

 

[KillerBee]

Update on the avatar backgrounds....
This one line might have all the inverse code needed.

body, img, .img.m, .img.s, .messageText iframe, #userBar .navTabs {filter: invert(100%); }

I'm almost ready to release the first Reverse theme. Just need to tweak the search bar colors so you can see it.

Worked good for the profile avatar
There is also the top upper bar Avatar which is still reversed - if you want to get picky

 

[Jaskalas]

I'm not really happy with its contrast and color choices... but for anyone desperate for a Dark Theme,

Here is any early version of:
Reverse Vanilla

Known issues:​

• Images while editing a post are inverse colors! Opps. Will try to find the appropriate selector to fix this asap.
  
  Update: Editbox is inside an Iframe. I can inverse the entire frame, but elements within it are causing trouble. Not sure I can select / edit them at this time... Is this a fatal flaw of the inverse method?​
• Strange margins on the bottom and right side of the screen. Cause unknown when applying the inverse filter.
• Other strange behavior includes the fixed position top bar is missing, and popup boxes are in the wrong positions. All because we applied the filter? Sigh...

Spoiler: Screenshot

 

[Crono]

About 90% done with my own stylish style. My CSS knowledge is minimal, so it's super messy code. If someone else wants to make a better version by copying the color palette, here's how it looks:

 

[twinrider1]

An example of one I like from another forum.

 

[KillerBee]

Known issues:​

• Images while editing a post are inverse colors! Opps. Will try to find the appropriate selector to fix this asap.
  
  Update: Editbox is inside an Iframe. I can inverse the entire frame, but elements within it are causing trouble. Not sure I can select / edit them at this time... Is this a fatal flaw of the inverse method?​

I've been able to re-inverse all the other images outside of the reply box separately.
How did you reverse the entire Editbox Iframe?

 

[Jaskalas]

How did you reverse the entire Editbox Iframe?

With the following:

.redactor_box iframe {filter: invert(100%); }

 

[KillerBee]

With the following:

.redactor_box iframe {filter: invert(100%); }

Thanks - that fixed the reverse image problem
I can live with the reversed background color in the text box.

 

[BlitzPuppet]

Using the theme and sidebar remover and I still feel like it's way too wide. Still hurts my eyes compared to how the forum previously looked.

Maybe I'll try another color.

 

[Jaskalas]

I still feel like it's way too wide.

Is that when you toggle the maximum forum width via toggle width button, it's still too wide for you?

You can force the forum to be as small as you want.

html.is-fullWidth .pageWidth {
  max-width: 1000px;
}

 

[Ken g6]

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

 

[FeuerFrei]

Well it almost worked perfect except for leaving youtube videos reversed

Classy graphite/copper theme there. Very fetching. Funny that it actually reversed the video. The power of css these days .....
I might have to install Stylish ... sometime. Not sure.

 

[KillerBee]

Classy graphite/copper theme there. Very fetching. Funny that it actually reversed the video. The power of css these days .....
I might have to install Stylish ... sometime. Not sure.

Here's the changes made to KenG6 VBulletin Stylish theme to make it work:

/* Invert Colors for Dark Theme */
body, img, .img.m, .img.s, .messageText iframe, .redactor_box iframe {filter: invert(100%); }

 

[KillerBee]

Edit Note: above works with Firefox
For Chrome not so sure

 

[KillerBee]

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

Even awesomer now Ken g6

 

[Matt L]

Ken g6 --great work --- Thanks again!

 

[JujuFish]

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

This makes me feel all warm and fuzzy inside.

 

[Red Squirrel]

I was going to wait till they fix the theme but could no longer wait so decided to check this extension out.

I just put the tan theme for now. So much better, it's not as hard on the eyes anymore. I'll probably play with this further as needed.

Now I can let my face heal and no longer need sun block to look at the site.

Edit: I just tried the vB theme, even better! Thanks for this!