Stylish Theme for Logos Forums

Page 1 of 2 (35 items) 1 2 Next >
This post has 34 Replies | 4 Followers

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Posted: Wed, Apr 11 2018 4:08 PM

I'm not a designer!!! This is just something I've wanted to toy with for a while. It's a less white theme that's hopefully easier on my eyes. The colors aren't quite right[1] and it could obviously be improved by a pro, but maybe others will find it helpful. I've just finished tinkering with it and haven't spent a great deal of time using it yet so changes/fixes are likely to come. Feedback / Suggestions welcome.

Install the Stylish plugin for your browser (Chrome, Firefox, Safari), then go to the following link and install the theme: https://userstyles.org/styles/158383/logos-community-forums 

1. The colors I've changed are all variations (darkened, lightened, desaturated variations) on three colors: a) the color of the header on logos.com which is a reddish tinted grey; b) logos blue; c) the compliment of logos blue - orange.

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Posts 69
Paul | Forum Activity | Replied: Thu, Apr 12 2018 5:53 AM

I'll give it a shot.  Thanks for sharing.

Posts 144
David Owh | Forum Activity | Replied: Thu, Apr 12 2018 5:57 AM

Thank for sharing.Yes

Posts 366
James Chandler | Forum Activity | Replied: Thu, Apr 12 2018 6:40 AM

I like it. Thanks for sharing.

Running on ASUS Windows 10 I7 24 gig of ram, 1 Terabyte drive.

Philippians 2:3 Do nothing from selfish ambition or conceit, but in humility count others more significant than yourselves.

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Replied: Fri, Apr 13 2018 7:37 AM

Thanks for giving it a try.

A few improvements since I posted:

  • When you hover over a person's avatar, it pops out a 2x popout. See pic below. The animation isn't quite right. If you approach the avatar to hover from the left side it dances around a bit. And the drop shadow effect causes a little oddness for avatar pics that are smaller than the 2x size.
  • Animated the Post, More, Compose, etc butttons.
  • Restyled the More drop down menu.
  • A bit of restyling in the compose window.
  • Flipped back to the more conservative shades of blue on the topic/thread lists. I'm still torn between that and shades of orange.
  • Experimented with Font stacks and settled on the Wordpress font stack. Experimented with sizes a little, but found the forum defaults to be about right in most places.

To update to the latest version: Click the Stylish icon on your browser toolbar, then the kabob menu at the upper right of the popup menu, and select 'Manage All Styles'. From there, click on 'Check for Update'. If there is an update it will change to a button labeled 'Update Now'. If there isn't an update it will show a message that 'Style is up to date'. Update often.

TODO:

  • Restyle the profile and search results pages. And the Insert media dialog, etc.
  • Tons of pixel nudging, resizing, and hover color fixes, etc.
  • Cleanup and organize the CSS which clearly got away from me. (It would be awesome if SASS were supported.)
  • Decide on blockquote style.

Avatar Popout:

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Posts 1392
James Taylor | Forum Activity | Replied: Fri, Apr 13 2018 8:20 AM

I like it, Randy, thanks a lot! For a page that I stare at so often, it's nice to see some TLC.

Logos 8  | Dell Inspiron 7373 | Windows 10 Pro 64, i7, 16GB, SSD | iPhone X | iMac 27" i7, 16GB, SSD | OS 10.13

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Replied: Thu, Apr 19 2018 9:06 AM

I think it is finished. I've adjusted the theme on all forum pages: home, thread view, post view, reply, quick reply, insert media, html view, profile view, edit profile, etc. Tons of tweaks all over to improve consistency. And the source files have been SASSified for easier modification and posted on github. Please let me know if I've missed anything or you have any other feedback.

If you are already using the theme just update. If you are not, why not? Big Smile

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Posts 2597
Kevin A. Purcell | Forum Activity | Replied: Thu, Apr 19 2018 12:40 PM

I tried to install. You said it worked with Safari but when I go to the 2nd link and click Install with Stylish it takes me to a Chrome Web App page, which of course doesn't work with Safari.

Posts 2696
Erwin Stull, Sr. | Forum Activity | Replied: Thu, Apr 19 2018 1:08 PM

Nice. Thanks. Smile

Posts 2031
Beloved | Forum Activity | Replied: Thu, Apr 19 2018 1:22 PM

It's a peach! Thanks, Randy

Meanwhile, Jesus kept on growing wiser and more mature, and in favor with God and his fellow man.

International Standard Version. (2011). (Lk 2:52). Yorba Linda, CA: ISV Foundation.

Posts 8368
Forum MVP
Bruce Dunning | Forum Activity | Replied: Thu, Apr 19 2018 2:11 PM

Randy, I just installed it on Firefox and it works like a dream. Thanks so much!

Now I just have to get used to the new look. Smile

Using adventure and community to challenge young people to continually say "yes" to God

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Replied: Thu, Apr 19 2018 2:17 PM

Kevin A. Purcell:

I tried to install. You said it worked with Safari but when I go to the 2nd link and click Install with Stylish it takes me to a Chrome Web App page, which of course doesn't work with Safari.

Unfortunately, I don't have a Mac to test Safari. It sounds like you did get the extension installed? If the extension UI is the same:

  1. On the UserStyles  page, below the install button is a button, "Show CSS code". Select and copy the code.
  2. In Safari, open the extension, click the kebab menu in the upper right, and select Create New Style.
  3. Ignore the right side. On the left, enter a Name for the style, and below that click on Import and paste in the code.
  4. Finally, click the Save button.

Sorry, I don't have a mac to test on, but that should be close to the correct instructions.

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Posts 63
Phil Tuften | Forum Activity | Replied: Thu, Apr 19 2018 11:56 PM

I have just aded the two with a Mac, worked well

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Replied: Thu, Jun 14 2018 8:01 PM

Minor Update since last post:

  • Updated header: rebranded, styled navigation links, added icons from Google's 'Material Icons' font.
  • Switched from remote loading SVG icons on Profile page to using the 'Material Icons' font.
  • Fixed ugly blank box on Favorites page.
  • Added shadows and animations in a few more places.

There is still a good bit that I haven't been able to change the way I'd like because I can't find selectors to differentiate and target individual elements in some cases. IE. Changing a certain element causes changes throughout all the forum pages containing that element which looks a bit odd in some cases but still acceptable, I think. This is still a learning experience for me; first real use of CSS.

Update your theme at: https://userstyles.org/styles/158383/white-off-for-logos-community-forums 

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Posts 698
Lew Worthington | Forum Activity | Replied: Fri, Jun 15 2018 5:08 AM

I appreciate your effort on this! I originally brushed it off as something I wouldn't even notice, but it's a great enhancement to my experience reading the forums. Thank you!

Lew

Posts 508
Glenn Crouch | Forum Activity | Replied: Fri, Jun 15 2018 6:50 AM

Thanks, Randy - very nice :)Big Smile

Pastor Glenn Crouch
St Paul's Lutheran Church
Kalgoorlie-Boulder, Western Australia

Posts 288
Luuk Dondorp | Forum Activity | Replied: Fri, Jun 15 2018 7:33 AM

Perfect. Nice!

Thanks for sharing

Luuk

 

Posts 541
Dale E Heath | Forum Activity | Replied: Tue, Jun 19 2018 10:54 AM

Randy, I've been enjoying your enhancements for several days now. I really appreciate your work. Thanks very much, Dale.Big SmileYes

Posts 540
Michael S. | Forum Activity | Replied: Wed, Jun 20 2018 3:07 AM

If I wanted to install this- do I use the first link that started this post, or the most recent one?

Thanks!

Posts 1897
Forum MVP
Randy W. Sims | Forum Activity | Replied: Wed, Jun 20 2018 6:38 AM

Michael S.:
If I wanted to install this- do I use the first link that started this post, or the most recent one?

The links in the top post point to the always current version. I do continue to make periodic updates as I notice styling problems, work to unify the design or learn new techniques, and you can always revisit that link to update to the most current. 

BTW, For those interested in similarly themeing your browser:

  • Dark Horizon is a great one for Chrome I recently stumbled on.
  • Firefox has a nice Dark theme already built in (under Addons | Theme), but I also like Firefox Carbon.

These are native browser themes, not UserStyles. I like these because the greys look classy while keeping your attention on the content rather than the UI. I think they work well with the themeing of forums.

Forum ThemeEnhanced Forum Search

Custom PC: Core i7; 32GB RAM; GeForce GTX 970; Win 10 Pro
Google Pixel XL | Apple iPad pro 9.7

Page 1 of 2 (35 items) 1 2 Next > | RSS