User script

arp242 · Jan 28, 2014

Here's a user CSS and script I made (and use) for these forums. IMHO it greatly increases readability. The default phpBB theme is just horrible.
It also adds one feature: you can also double-click on the icon to mark a forum read (like in vBulletin).

Here are a few screenshots: Forum overview, Viewing a thread

Download (2014-02-24)

Opera (12) instructions

Right right, 'Edit site preferences'.
Set 'Display -> My style sheet' to the CSS.
Set 'Scripting -> User JS folder' to the directory containing the JavaScript (this can also be set system-wide)

Note: The script won't work over HTTPS by default! See: http://www.opera.com/docs/userjs/using/#securepages.

Also see: http://www.opera.com/docs/usercss/.

Firefox
You need to install the extensions:

Tools -> Greasemoney -> New user script (Fill in name and namespace, you can set it to whatever).
Copy the JavaScript file, replace the contents that's already there.

User styles -> Create new -> For this domain.
Replace `/* Write your CSS here */ with the contents of the CSS file. Make sure you leave '@-moz-document domain('forums.freebsd.org') {' as it is.

wblock@ · Jan 28, 2014

That's pretty neat. I've wondered before about overriding CSS locally, but never investigated. How is this used with Firefox?

arp242 · Jan 29, 2014

I made some improvements & added basic Firefox instructions. See original message.

wblock@ · Jan 30, 2014

Okay, I've got those extensions installed. The User Styles thing looks like it could be handy for any number of sites that do stupid things in CSS.

I changed the CSS to be 90% width rather than 90em, a strip down the middle of my monitor. The pink background of the user profile spills into the main window, but otherwise looks very nice.

Haven't tried the Javascript yet, the "Includes, one per line" did not make sense to me. Is that for filenames?

arp242 · Jan 30, 2014

The pink background of the user profile spills into the main window,

Yes, this happens when posts are `too short'. It' a pain to fix, and didn't think it was important enough at this point

the "Includes, one per line" did not make sense to me. Is that for filenames?

I think that's the sites where you want the script to get executed. It doesn't matter what you fill in here, since the script itself already fills in it for you.

wblock@ · Jan 30, 2014

I'll have to mess with it some more. The background spillover is not serious in itself, it's the pink color that is distracting to me (this may depend on monitor type). I "fixed" it by just using a plain white #ffffff background in .post.bg1, .post.bg2.

The other problem I found is that the user style is applied to other sites, even though I chose "For this URL" when creating it. For example, that happens when I look at http://www.hackaday.com.

arp242 · Jan 30, 2014

Are you sure you copied it correctly? It needs to look like:

Code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain('forums.freebsd.org') {
/* 1. Remove `last post by ...' in topic overview */
[...etc...]
}

(I hate it how you can't just drop it in a directory and have to muck about with these shitty UI's).

jb_fvwm2 · Jan 30, 2014

Supppose there is a website that has most of the text you do not want to read again this way (italics) ...
...
...
Can this file be adapted with an additional line to remove the italic text, change it to some (light green?) skippable color, etc? That would be most useful. I've spent several hours so far searching the web for some solution to that... and yes, this set of files is working quite well for this site, very recommendable.

wblock@ · Jan 30, 2014

Carpetsmoker said:
Are you sure you copied it correctly? It needs to look like:

Code:

@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain('forums.freebsd.org') { /* 1. Remove `last post by ...' in topic overview */ [...etc...] }

Whoops, that's right. It would be nice if the styles editor could just read a file instead of involving cut and paste.

wblock@ · Feb 25, 2014

I've been using my slightly-modified version of this CSS style for some time, and it really does make these forums much more usable. One problem is that when there is a PM waiting, the extra browser window that shows it appears to be empty. The only other thing is cosmetic, the vertical line between the profile box on the left and the post on the right is only as tall as the content instead of going all the way from top to bottom.

If these can be fixed, maybe we can apply this as a selectable theme. I know phpBB has that ability, and am willing to try to get that implemented.

arp242 · Feb 26, 2014

If you send me a PM, I can test that & fix it.

Most of my adjustment are really crude hacks, limited by the crappy 1995-style HTML that phpBB offers.
Honestly, I'd much rather see these forums move in a move StackOverlow-ish direction (which is far superior for a number of reasons), rather than the old "internet forum" direction (which is really just a mailing-list over HTTP) ... I've been intending to make a more comprehensive write-up/proposal on that, but haven't gotten around to it ...

The only other thing is cosmetic, the vertical line between the profile box on the left and the post on the right is only as tall as the content instead of going all the way from top to bottom.

This problem also exists in the original phpBB style (except there, the line is only as tall as your profile). I actually looked at that, but there was no obvious way to fix it, so I was like, fuck that.

jb_fvwm2 said:
Supppose there is a website that has most of the text you do not want to read again this way (italics) ...

Can this file be adapted with an additional line to remove the italic text, change it to some (light green?) skippable color, etc?

Yes, probably something like:

Code:

i, em {
    font-style: normal !important;
    color: #0f0 !important;
}

Like this, it may cause unwanted side-effects ... You *probably* want to limit the selector to something like: .post_body em { ... }, but this depends on the site, of course.

_martin · Feb 27, 2014

Wow, that style does look good! (oh, the memories of good old bulletin style).

I've a strange problem on Firefox with Style Editor. When I select to create new style for this domain, dialogue that opens does have three buttons that don't work (preview save exit), I see no way of importing your CSS. Mhm .. :/

arp242 · Feb 27, 2014

wblock@ said:
I've been using my slightly-modified version of this CSS style for some time, and it really does make these forums much more usable. One problem is that when there is a PM waiting, the extra browser window that shows it appears to be empty. The only other thing is cosmetic, the vertical line between the profile box on the left and the post on the right is only as tall as the content instead of going all the way from top to bottom.

If these can be fixed, maybe we can apply this as a selectable theme. I know phpBB has that ability, and am willing to try to get that implemented.

I fixed both bugs, as well as another I recently encountered (errors after trying to post weren't visible).

http://tmp.arp242.net/fbsd-style-20140224.tar.gz

arp242 · Feb 28, 2014

matoatlantis said:
I've a strange problem on Firefox with Style Editor. When I select to create new style for this domain, dialogue that opens does have three buttons that don't work (preview save exit), I see no way of importing your CSS. Mhm .. :/

Hm

. Not sure what to do about this, I never use Firefox myself, and only found this extension through a quick internet search... wblock also mentioned he had some problems, so perhaps is a thing with this extension, newer Firefox version, or something?

_martin · Feb 28, 2014

I never used custom CSS before so I too don't know which add-on can be used. But I did google around a bit and found the Stylish add-on to be working with a small adjustment.

After Stylish is installed I've created new style from Add-ons manager. I've simple drag-and-dropped the .css file to the editor. Once the contents of the CSS file was loaded, I've added following lines on the top of it:

Code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
 domain("forums.freebsd.org")
{
--<your CSS code>--
}

And it is working perfectly (see the attachment).
Personally I like the typical console font in code block. So I did add the section:

Code:

dl.codebox code
{
    font-family: "Courier New";
}

I'm not much into the html/css coding, but it seems to be working

(done after the screenshots were shot).

EDIT: I realized that screen shots are actually not needed so I removed them. Btw. I've noticed that with your style online status is not shown. Is that on purpose ?

wblock@ · Feb 28, 2014

I made some adjustments to the CSS. One remaining problem is that some phpBB features are still hidden. The [ Moderator Control Panel ] line that appears right under the User Control Panel line is hidden. I'm not sure if the popup window for new PMs has any content.

Other than those minor problems, it looks very nice!

obsigna · Mar 1, 2014

I had been working on a FreeBSD forums beautifier extension for Safari on Mac OS X, and I testet your CSS with it, and it simply worked.

However, when I started working on my own CSS my goal was, to replace the fonts by the more legible Open Source Web Fonts from Adobe, Source Sans Pro and Source Code Pro, and at the same time to enhance the contrast as much as possible. For me it was not that annoying, to have the authors at the right, and I left it that way.

If anybody is interested, the Safari Extension and a screenshot, how a forum post appears with it is available here.

This is my CSS, and I guess, that it should work with Firefox too. The Adobe fonts are included in the Safari Extension, but need to be installed separately for other web browsers. The fonts can be downloaded from SourceForge here Source Sans Pro and here Source Code Pro.

Code:

/*
   The author Obsigna.net claims no Copyright on these CSS definitions.
   You may freely use it for any purpose on your own risk.
*/

/* Source Sans Pro - Normal */
@font-face {
   font-family: SourceSansPro;
   font-style: normal;
   font-weight: 300;
   src: local('Source Sans Pro Light'),local('SourceSansPro-Light'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-Light.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceSansPro;
   font-style: normal;
   font-weight: 400;
   src: local('Source Sans Pro'),local('SourceSansPro-Regular'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-Regular.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceSansPro;
   font-style: normal;
   font-weight: 600;
   src: local('Source Sans Pro Semibold'),local('SourceSansPro-Semibold'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-Semibold.ttf.woff") format("woff");
}

/* Source Sans Pro Bold is too bold,use Semibold instead */
@font-face {
   font-family: SourceSansPro;
   font-style: normal;
   font-weight: 700;
   src: local('Source Sans Pro Semibold'),local('SourceSansPro-Semibold'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-Semibold.ttf.woff") format("woff");
}


/* Source Sans Pro - Italic */
@font-face {
   font-family: SourceSansPro;
   font-style: italic;
   font-weight: 300;
   src: local('Source Sans Pro Light Italic'),local('SourceSansPro-LightIt'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-LightIt.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceSansPro;
   font-style: italic;
   font-weight: 400;
   src: local('Source Sans Pro Italic'),local('SourceSansPro-It'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-It.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceSansPro;
   font-style: italic;
   font-weight: 600;
   src: local('Source Sans Pro Semibold Italic'),local('SourceSansPro-SemiboldIt'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-SemiboldIt.ttf.woff") format("woff");
}

/* Source Sans Pro Bold Italic is too bold,use Semibold Italic instead */
@font-face {
   font-family: SourceSansPro;
   font-style: italic;
   font-weight: 700;
   src: local('Source Sans Pro Semibold Italic'),local('SourceSansPro-SemiboldIt'),
        url("SourceSansPro/WOFF/TTF/SourceSansPro-SemiboldIt.ttf.woff") format("woff");
}


/* Source Code Pro */
@font-face {
   font-family: SourceCodePro;
   font-style: normal;
   font-weight: 300;
   src: local('Source Code Pro Light'),local('SourceCodePro-Light'),
        url("SourceCodePro/WOFF/TTF/SourceCodePro-Light.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceCodePro;
   font-style: normal;
   font-weight: 400;
   src: local('Source Code Pro'),local('SourceCodePro-Regular'),
        url("SourceCodePro/WOFF/TTF/SourceCodePro-Regular.ttf.woff") format("woff");
}

@font-face {
   font-family: SourceCodePro;
   font-style: normal;
   font-weight: 600;
   src: local('Source Code Pro Semibold'),local('SourceCodePro-Semibold'),
        url("SourceCodePro/WOFF/TTF/SourceCodePro-Semibold.ttf.woff") format("woff");
}

/* Source Code Pro Bold is too bold,use Semibold instead */
@font-face {
   font-family: SourceCodePro;
   font-style: normal;
   font-weight: 700;
   src: local('Source Code Pro Semibold'),local('SourceCodePro-Semibold'),
        url("SourceCodePro/WOFF/TTF/SourceCodePro-Semibold.ttf.woff") format("woff");
}

body {
   font-family: SourceSansPro,sans-serif !important;
   font-weight: 300 !important;
   font-size: 11px !important;
}

h1,h2,h3,h4,a.forumtitle,a.topictitle,li.header dt,li.header dd,.postbody h3,
.content,.content p,dl.faq,p.author,.notice,.attachbox dt,dl.file,dl.file dt,dl.thumbnail dd,
fieldset.polls,fieldset.polls dd div,fieldset,input,select,textarea,#message-box textarea,
a.button1,input.button1,input.button3,a.button2,input.button2 {
   font-family: SourceSansPro,sans-serif !important;
}

.postbody .content {
   margin-bottom: -6px !important;
   min-height: 100px !important;
   padding: 18px !important;
   color: #000 !important;
   background-color: #fff !important;
}

.bg1,.bg2 {
   background-color: #fff !important;
}

.bg3 {
   background-color: #f3f3f3 !important;
}

.post.bg1,.post.bg2 {
   background-color: #f3f3f3 !important;
}

li.row,li.row:hover {
   background-color: #fff !important;
}

li.row:hover dd {
   border-left-color: transparent !important;
}

.rtl li.row:hover dd {
   border-right-color: transparent !important;
   border-left-color: transparent !important;
}

code,dl.codebox code {
   font-family: SourceCodePro,monospace !important;
   font-weight: 300 !important;
   font-size: 11px !important;
   color: #000 !important;
   background-color: #f7f7ff !important;
   max-height: 640px !important;
   overflow: auto !important;
   white-space: nowrap !important;
   word-wrap: normal !important;
   -webkit-hyphens: none !important;
   -moz-hyphens: none !important;
   hyphens: none !important;
}

tt,kbd,em {
   font-family: SourceCodePro,monospace !important;
   font-weight: 400 !important;
   font-size: 13px !important;
}

kbd {
   background-color: #f3f3f3 !important;
   padding: 3px 3px 0px 3px !important;
}

blockquote {
   color: #000 !important;
   background-color: #FFFFF1 !important;
}

User script

Profile disabled