Stylish Theme for Logos Forums

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.

Find more posts tagged with

Comments

Paul

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

Wei Qiang

Thank for sharing.[Y]

James Chandler

I like it. Thanks for sharing.

Randy W. Sims

https://community.logos.com/discussion/comment/974316#Comment_974316

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:

James Taylor

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

Randy W. Sims

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? [:D]

Kevin A. Purcell

https://community.logos.com/discussion/comment/975427#Comment_975427

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.

Erwin Stull, Sr.

Nice. Thanks. [:)]

Beloved Amodeo

https://community.logos.com/discussion/comment/975491#Comment_975491

It's a peach! Thanks, Randy

Bruce Dunning

https://community.logos.com/discussion/comment/975494#Comment_975494

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. [:)]

Randy W. Sims

https://community.logos.com/discussion/comment/975480#Comment_975480

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:

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

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

Phil Tuften

https://community.logos.com/discussion/comment/975504#Comment_975504

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

Randy W. Sims

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

Lew Worthington

https://community.logos.com/discussion/comment/982473#Comment_982473

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

Glenn Crouch

https://community.logos.com/discussion/comment/982473#Comment_982473

Thanks, Randy - very nice [:D]

Luuk Dondorp

https://community.logos.com/discussion/comment/982517#Comment_982517

Perfect. Nice!

Thanks for sharing

Small Heath

https://community.logos.com/discussion/comment/982520#Comment_982520

Randy, I've been enjoying your enhancements for several days now. I really appreciate your work. Thanks very much, Dale.[:D][Y]

Michael S.

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

Thanks!

Randy W. Sims

https://community.logos.com/discussion/comment/984075#Comment_984075

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.

Rick Ausdahl

https://community.logos.com/discussion/comment/984080#Comment_984080

All very nice! Is there a plugin/extension for Edge?

Randy W. Sims

https://community.logos.com/discussion/comment/984081#Comment_984081

All very nice! Is there a plugin/extension for Edge?

Yes!. Thanks for asking as I haven't got around to trying in Edge. The instructions are a bit different because here are no style extensions available yet that I can see. Do this instead:

Install the Tampermonkey extension from the Microsoft Store.
When it installs you should get a confirmation dialog, select "Turn it on"
Go to the theme on UserStyles
Scroll down to the link "Install style as userscript" and click on it.
Then click the Install button on the page that opens.

The procedure for updating after it is already installed:

Click the Tampermonkey icon on the Edge toolbar on the right side
Select "Check for userscript updates"

Tampermonkey extension also works in Chrome, Microsoft Edge, Safari, Opera Next, and Firefox. And is a good alternative.

EDIT: Actually, Tampermonkey automatically updates scripts once a day by default. I had thought this defaulted to off. So you don't have to worry about the update procedure above. That makes Tampermonkey the preferable extension if you want automatic updates or if you are already using Tampermonkey anyway.

Rick Ausdahl

https://community.logos.com/discussion/comment/984087#Comment_984087

All very nice! Is there a plugin/extension for Edge?

Yes!. Thanks for asking as I haven't got around to trying in Edge. The instructions are a bit different because here are no style extensions available yet that I can see. Do this instead:

Install the Tampermonkey extension from the Microsoft Store.

When it installs you should get a confirmation dialog, select "Turn it on"

Go to the theme on UserStyles

Scroll down to the link "Install style as userscript" and click on it.

Then click the Install button on the page that opens.

The procedure for updating after it is already installed:

Click the Tampermonkey icon on the Edge toolbar on the right side

Select "Check for userscript updates"

Tampermonkey extension also works in Chrome, Microsoft Edge, Safari, Opera Next, and Firefox. And is a good alternative.

EDIT: Actually, Tampermonkey automatically updates scripts once a day by default. I had thought this defaulted to off. So you don't have to worry about the update procedure above. That makes Tampermonkey the preferable extension if you want automatic updates or if you are already using Tampermonkey anyway.

Wonderful! I know Edge has taken a lot heat since it replaced IE as Microsoft's default browser, so I was really expecting the answer to be "No". So a pleasant surprise. I'd never heard of Tampermonkey, but I'll install it, give the process a try, and report back.

Thanks, Randy.

Rick Ausdahl

https://community.logos.com/discussion/comment/984093#Comment_984093

Very, very nice, Randy!

You said you're not a "designer", but I think you must be. Maybe not by profession, but for sure at heart.

Thanks for this very appealing and easy-on-the-eyes makeover.

[Y][Y]

Randy W. Sims

EXPERIMENTAL ADD-ON:

While working on the theme, styling the searchbar, I thought I'd take a shot at a userscript to send all searches to google any time you use the search on the forums, in place of the forum search. I have it partly working: you can type your search in to the searchbar (including google syntax) and click the search button with the mouse and get google search results, limited by site:community.logos.com. You can Ctrl-Click to get google search results limited by (site:community.logos.com OR wiki.logos.com). Unfortunately, I haven't got the <Enter> key to search google. It still uses the often non-working forum search. And I'm not yet clear on whether Ctrl-Click equates to Cmd-Click on Mac or if that's a different key: haven't had a chance to look in to it yet.

This is completely independent of the theme. You can install one or the the other or both. For this script you need to install TamperMonkey for your browser.

A bit of WARNING: TamperMonkey is safe. The theme and this search add-on are safe. There are many great and useful scripts you can install in TamperMonkey to enhance websites greatly. But there are also a lot of malicious scripts out there too. Like anything else on the net, know what you're getting and make sure it's trustworthy.

You can install the Search Script from: https://greasyfork.org/en/scripts/369856-faithlife-community-forum-search2g

---

I wasn't gonna post more updates on the theme until I finished but since I'm posting I'll mention that I've updated the styling of the searchbar, completely updated the form used to post replies, quick replies (gradient, icons, state styling), updated the quote styling. I've done a huge amount of code restructuring and polishing of the theme as well as making things more consistent throughout, especially shadows, though I still have a lot to do--mostly in the smaller dialogs and modals. If you installed the theme through TamperMonkey, you already have the updates. Otherwise, update here.

Randy W. Sims

https://community.logos.com/discussion/comment/984930#Comment_984930

While working on the theme, styling the searchbar, I thought I'd take a shot at a userscript to send all searches to google any time you use the search on the forums, in place of the forum search. I have it partly working...

I now have this working. This script alters the searchbar in the forums:

Type your search in the search bar and press Enter or click the search button and you will be taken to Google search:
site:community.logos.com <YOUR SEARCH TERMS>
Type your search in the search bar and press Ctrl-Enter or hold Ctrl and click the search bar and you will be taken to Google search:
(site:community.logos.com OR site:wiki.logos.com) <YOUR SEARCH TERMS>
Type your search in the search bar and press Shift-Enter or hold Shift and click the search button and you will get the default forum search. With one little problem: Shift-Click opens in a new window and I haven't figured out yet how to prevent that.

The link to the search script is in the post above.

EDIT: Added Alt+S shortcut key to activate the search box.

Glenn Crouch

https://community.logos.com/discussion/comment/985186#Comment_985186

Thanks for this, Randy - your work is appreciated!!! [Y]

Myke Harbuck

Randy, this is sooooooo cool brother. Thank you for using your talents to be a blessing to all of us. We owe you a debt of gratitude sir

Liam

https://community.logos.com/discussion/comment/985229#Comment_985229

Posting to add this to my feed.

Paul

https://community.logos.com/discussion/comment/984087#Comment_984087

Stylish appears to have been pulled by Chrome, Firefox and Opera due to privacy intrusions. See article: https://nakedsecurity.sophos.com/2018/07/06/chrome-and-firefox-pull-history-stealing-browser-extension/

Matt Hamrick

This is great, thanks! [Y]

Randy W. Sims

https://community.logos.com/discussion/comment/986145#Comment_986145

Stylish appears to have been pulled by Chrome, Firefox and Opera due to privacy intrusions. See article: https://nakedsecurity.sophos.com/2018/07/06/chrome-and-firefox-pull-history-stealing-browser-extension/

Thanks for reporting on this. I should have done better diligence keeping an eye out. Someone always wants to take something nice and turn it upside down. In this case, someone bought the rights to the Stylish extension and added analytics profile its users browsing habits. Before it was bought it was a top notch plugin with great reviews and a long history. I didn't think twice in making the recommendation.

I strongly recommend removing the Stylish plugin from your browser.

Chrome users:

Click the kebab menu in the top right and select 'More tools' -> 'Extesions'
Scroll to the Stylish plugin and click 'Remove'

Firefox users:

Click the hamburger menu in the top right and select 'Add-ons'
Scroll to the Stylish plugin and click 'Remove'

I apologize for this inconvenience and hope people will continue to use the theme. At this time, I recommend switching over to TamperMonkey. It has a good and long history and isn't likely to be taken over maliciously. It's supported on a larger number of browsers. It has the ability to receive automatic updates. And you'll be able to use my search extension mentioned in previous post.

Install TamperMonkey
Go to the theme on UserStyles
Scroll down to the link "Install style as userscript" and click on it.
Then click the Install button on the page that opens.

Pushing out soon, updated badges & browse members pages:

Suggestions on scriptures for this page welcome...

James Taylor

https://community.logos.com/discussion/comment/986151#Comment_986151

Go to the theme on UserStyles

This link takes us back to Stylish, is that intended? I can't tell how to find the Userstyle for TamperMonkey

James Taylor

https://community.logos.com/discussion/comment/986158#Comment_986158

Nevermind, I found it...

Randy W. Sims

A belated note to those still following this thread: All future updates will be posted in the thread:

https://community.logos.com/forums/t/171393.aspx

Thanks for everyone who's tried it out and for the kind comments. I pray it continues to be useful.