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

[paul1149]

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.






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.



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:

Stylus: Stylus
Stylish: Stylish - Custom themes for any website​

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.

 

[Lulav]

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

 

[paul1149]

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.

 

[Lulav]

Ok, I installed the first one and found this under the style button

https://userstyles.org/styles/70487/christianforums-com-narrow-vbulletin-display

 

[Lulav]

It worked! I've got a gray background and a pinkish field where the posts are. The new posts are still a bright white but I can at least distinguish them for now!

Thanks again!

 

[paul1149]

That one won't work. I wrote that years ago when CF was using VBB software. You will have to use the one I pasted here.

 

[paul1149]

You can change that "linen" to anything you want. Go online and find an html color site and enter either the color's name or its code (eg #ccffcc).

 

[RuthD]

Thanks Paul.

 

[sunshineforJesus]

not sure I did it right

 

[paul1149]

YW, Ruth!

Sunshine - you would know..

 

[sunshineforJesus]

I would,How so?

 

[paul1149]

The results will be obvious. See the attached pic in the first post.

 

[visionary]

That is above my pay grade.. afraid to try.

 

[paul1149]

At worst you simply uninstall Stylish.

 

[paul1149]

I've updated the code to tweak the colors a bit.

 

[paul1149]

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.

 

[mnorian]

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? 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.

 

[paul1149]

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.

 

[mnorian]

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.

 

[paul1149]

[5/19]

• Added separate Firefox code (please post corrections)
• hide red number of new Media uploads in NavBar (can be turned off)