Custom, easy-reading themes for CF (New Color - GRAY!)

Status
Not open for further replies.

paul1149

that your faith might rest in the power of God
Supporter
Mar 22, 2011
8,460
5,268
NY
✟674,364.00
Country
United States
Faith
Christian
Marital Status
Private
Politics
US-Others
2/20/2019: New color, Gray.

Get the style sheet here: https://userstyles.org/styles/169188/christianforums-xenforo-easy-read-gray

Instructions are the same as below.


gray -Thread_1.jpg gray -new threads1.jpg




June 12, 2017: I finally have a style sheet that goes with the latest site theme (Spring, 2017).
I'm going to start this post over since there was so much out of date.

I have created a style sheet that changes the way CF looks, to make it more readable. It does this by using certain fonts, light pastel background colors, shortening line lengths, etc.

forum.jpg thread.jpg

It's very easy to install the style sheet if you use a Chrome- or Firefox-based browser. First, install either the Stylish or Stylus browser extension. I recommend Stylus because there is no tracking.

In Chrome:
In Firefox
Stylish: go here and click Install.
Not sure if there's a Stylus yet for FF.

Once you've got the extension installed, go to the style sheet page and install it:
Christian Forums (Xenforo), Easy Read, Blue latest | Userstyles.org.

To see older themes for CF, and easy-read themes for other sites as well, visit my styles home page here.
 

Attachments

  • gray -Thread_1.jpg
    gray -Thread_1.jpg
    159.1 KB · Views: 47
Last edited:

Lulav

Y'shua is His Name
Aug 24, 2007
34,141
7,243
✟494,938.00
Country
United States
Faith
Unorthodox
Marital Status
Married
View attachment 134648


A new theme choice is coming for CF we are told, but some have found the current theme to be hard on the eyes. I am going to outline a way to change the appearance of CF threads to make reading easier.

As it stands, this method




    • enlarges the default text,
    • gets rid of a lot of the stark white,
    • and narrows the thread pane for shorter line lengths.
All these changes can be tweaked or deleted.

It involves creating a local style sheet, and it's very easy to do.

If you have Chromium or Firefox for your browser, go to Settings/Extensions or Manage Addons and select ~Get more extensions~. Find and install the Stylish extension.

Now open CF in a tab. Click on the Stylish icon in the toolbar, and select "Create a style sheet forwww.CF.com".

In the body of the style sheet paste the following code:

div.xbBoxed { background-color:gray }

div.pageWidth { width: 800px }

div.messageUserBlock { background-color:gray !important }

div.messageContent, div.messageInfo.primaryContent, blockquote.messageText { background-color:linen !important; font-size:14px !important; font-family:verdana }

Give the style a name. At the bottom, in the "Applies to" fields, enter:

URLs matching the regexp .*christianforums.com/threads.*

That will enable the .css to be applied only to threads, and not to the forum thread lists, where it doesn't look good. Save the style and see if it works before closing the tab.

Thanks to DaisyDay for the idea of using linen as the thread body color, which works very nicely.

Note: If you use IE I think you can still do this. IE supports only one user style sheet, or at least used to. You would save the code with a css file extension and then point IE to it under Internet Options.
Thanks for taking the time to explain this, the brightness of these pages is killing my eyes.

I have Firefox and at my add on manager I've found four Stylish addons so which one do I install?

Stylish 2.0.2
Stylish Custom 0.7.7
Stylish Tolls 0.6
Staylish Sync 0.1.7
 
Upvote 0

paul1149

that your faith might rest in the power of God
Supporter
Mar 22, 2011
8,460
5,268
NY
✟674,364.00
Country
United States
Faith
Christian
Marital Status
Private
Politics
US-Others
YW. I'm not certain (I use a Chromium derivative, Slimjet), but I would think just plain Stylish is the one you want. The others seem like custom forks of the original.
 
Upvote 0
This site stays free and accessible to all because of donations from people like you.
Consider making a one-time or monthly donation. We appreciate your support!
- Dan Doughty and Team Christian Forums
This site stays free and accessible to all because of donations from people like you.
Consider making a one-time or monthly donation. We appreciate your support!
- Dan Doughty and Team Christian Forums

paul1149

that your faith might rest in the power of God
Supporter
Mar 22, 2011
8,460
5,268
NY
✟674,364.00
Country
United States
Faith
Christian
Marital Status
Private
Politics
US-Others
5/17/15
  • better (I think) colors,
  • now the style works on the forum (thread list) pages as well as on the individual thread pages.
  • a different background color for sticky threads to make them more easily distinguishable.
 
Upvote 0

mnorian

Oldbie--Eternal Optimist
In Memory Of
Mar 9, 2013
36,781
10,563
✟980,332.00
Faith
Christian
Marital Status
Married
quote>paul1149 said:
Note: If you use IE I think you can still do this. IE supports only one user style sheet, or at least used to. You would save the code into a text file with a css file extension (eg "user.css") and then point IE to it under Internet Options.<unquote

Paul; when you point IE at the css file extension do you point the front of the screen with IE on it at the file cabinet or a note paid in front with user.css printed on it?:question::D Seriously now. Looking in internet options with IE11 I could find nothing pertaining to css files. only thing might be is a box for html editor using notepad. Any ideas? Thanks.
 
Upvote 0

paul1149

that your faith might rest in the power of God
Supporter
Mar 22, 2011
8,460
5,268
NY
✟674,364.00
Country
United States
Faith
Christian
Marital Status
Private
Politics
US-Others
Hi mnorian,

According to http://en.wikibooks.org/wiki/Internet_Explorer/Adding_User_Styles, this is how you do it. Looking at it, I foresee potential problems because this style sheet will affect all sites that have matching elements. I don't know if there's a way to relegate it only to certain domains. And to turn it on/off you have to go into settings and then restart the browser:

Install the Style Sheet[edit]
When the style sheet has been named it can be added to the styles cascade. The style sheet needs to be enabled with a tick box for it to take effect, so it can be installed and left in place with the box unchecked. Proceed as follows:
  • Open the Tools > Internet Options dialog.
  • On the General tab select Accessibility.
  • On the User style sheet section, select the box marked Format documents using my style sheet.
  • Press Browse and locate your style sheet.
  • Left click your file then press Open to install it.
  • If you do not intend to use the style sheet now, then deselect the box marked Format documents using my style sheet.
If de-selected, the style sheet address remains in place for use when it is needed.
  • Before viewing the effect of a newly installed style sheet, or changes to an existing one, the browser must be restarted.
 
Upvote 0

mnorian

Oldbie--Eternal Optimist
In Memory Of
Mar 9, 2013
36,781
10,563
✟980,332.00
Faith
Christian
Marital Status
Married
Hi mnorian,

According to http://en.wikibooks.org/wiki/Internet_Explorer/Adding_User_Styles, this is how you do it. Looking at it, I foresee potential problems because this style sheet will affect all sites that have matching elements. I don't know if there's a way to relegate it only to certain domains. And to turn it on/off you have to go into settings and then restart the browser:

Install the Style Sheet[edit]
When the style sheet has been named it can be added to the styles cascade. The style sheet needs to be enabled with a tick box for it to take effect, so it can be installed and left in place with the box unchecked. Proceed as follows:
  • Open the Tools > Internet Options dialog.
  • On the General tab select Accessibility.
  • On the User style sheet section, select the box marked Format documents using my style sheet.
  • Press Browse and locate your style sheet.
  • Left click your file then press Open to install it.
  • If you do not intend to use the style sheet now, then deselect the box marked Format documents using my style sheet.
If de-selected, the style sheet address remains in place for use when it is needed.
  • Before viewing the effect of a newly installed style sheet, or changes to an existing one, the browser must be restarted.
Thanks Paul.
 
Upvote 0
This site stays free and accessible to all because of donations from people like you.
Consider making a one-time or monthly donation. We appreciate your support!
- Dan Doughty and Team Christian Forums
Status
Not open for further replies.