Alternative skin for the RyanVM forum

Forum for anything else which doesn't fit in the above forums. Site feedback, random talk, whatever, are welcome.
Post Reply
tomasz86
Posts: 491
Joined: Tue Aug 09, 2011 12:12 pm
Location: https://twilczynski.com/windows
Contact:

Alternative skin for the RyanVM forum

Post by tomasz86 » Thu Aug 08, 2013 8:44 am

I always found the default forum layout difficult for my eyes to read due to small font sizes and low contrast between font and background colours. Recently I've created this custom CSS style just for my own use but I'm sharing it in case there's anyone else interested.

This is how it looks like:

Image


How to install:
  1. Install Stylish for Firefox, Chrome or Opera.
  2. Add this style.
  3. Refresh the browser tab.
This is just the first version. I'm later going to tweak the style to make the forum usable on smaller screens as at the moment browsing it on a phone is extremely difficult. The Stylish addon is supported in Firefox Mobile for Android so you can use this style there too.

I'll be thankful for any comments or suggestions :)

User avatar
=[FEAR]=JIGSAW
Posts: 392
Joined: Mon Feb 18, 2008 11:54 am
Location: Cape Town, South Africa

Post by =[FEAR]=JIGSAW » Mon Aug 12, 2013 9:17 am

This really does look better ....

Thanks

tomasz86
Posts: 491
Joined: Tue Aug 09, 2011 12:12 pm
Location: https://twilczynski.com/windows
Contact:

Post by tomasz86 » Mon Aug 12, 2013 9:46 am

Thanks for the kind words :)

At the moment there are a few bugs causing the screen to be wider than 100% in certain cirumstances which results in horizontal scroll bar appear. I'm going to fix them soon. I've also started to work on optimisation for smaller screens but it's difficult. I'm determined to do it though because I want to be able to (comfortably) view the forum on my phone :P

User avatar
RyanVM
Site Admin
Posts: 5187
Joined: Tue Nov 23, 2004 6:03 pm
Location: Pennsylvania
Contact:

Post by RyanVM » Tue Aug 13, 2013 4:51 pm

Neato. Does phpBB3 make it easier to use custom skins?

/me really should get around to doing that at some point...
Get up to $200 off on hosting from the same people who host this website!
http://www.ryanvm.net/forum/viewtopic.php?t=2357

tomasz86
Posts: 491
Joined: Tue Aug 09, 2011 12:12 pm
Location: https://twilczynski.com/windows
Contact:

Post by tomasz86 » Tue Aug 13, 2013 5:55 pm

RyanVM wrote:Neato. Does phpBB3 make it easier to use custom skins?

/me really should get around to doing that at some point...
I don't know about phpBB3 but please don't make any changes just for the sake of making changes ;) The current form of the forum may not offer all the fancy stuff you can find on other ones like MSFN, WinCert, reboot.pro, etc. but its huge advantage is that it's very light and blazing fast compared to them. I can open the site using a poor 3G connection and it still loads instantly which can't be said about those other boards.

Styling the current version is actually very easy. Just check the CSS I prepared. I'd say that thanks to the fact that the forum is so simple it's also very easy to style since there aren't that many elements to change :)

The only "real" problem is that it doesn't support smaller resolutions / screen sizes but this also can be fixed with CSS without changing the HTML.

User avatar
RyanVM
Site Admin
Posts: 5187
Joined: Tue Nov 23, 2004 6:03 pm
Location: Pennsylvania
Contact:

Post by RyanVM » Wed Aug 14, 2013 7:48 am

Hey, I *could* make the Red Wings theme the default again :mrgreen:
Get up to $200 off on hosting from the same people who host this website!
http://www.ryanvm.net/forum/viewtopic.php?t=2357

User avatar
bphlpt
Posts: 1372
Joined: Sat Apr 19, 2008 1:11 am

Post by bphlpt » Thu Aug 15, 2013 3:25 am

LOL I don't think tomasz86 was a member here back when you implemented that one.

Cheers and Regards

tomasz86
Posts: 491
Joined: Tue Aug 09, 2011 12:12 pm
Location: https://twilczynski.com/windows
Contact:

Post by tomasz86 » Thu Aug 15, 2013 4:08 am

bphlpt wrote:LOL I don't think tomasz86 was a member here back when you implemented that one.
That's true. I don't remember any other default layout than the current one. I know there are two others to choose in the settings but they are buggy :P

Anyway, I've updated the style a little bit:
1.0.1 (20130815)
- code field width fixed
- font and width sizes use %s instead of pixels
- links have different colour on hover
- other minor fixes

User avatar
=[FEAR]=JIGSAW
Posts: 392
Joined: Mon Feb 18, 2008 11:54 am
Location: Cape Town, South Africa

Post by =[FEAR]=JIGSAW » Fri Aug 23, 2013 7:57 am

Thx ;)

User avatar
=[FEAR]=JIGSAW
Posts: 392
Joined: Mon Feb 18, 2008 11:54 am
Location: Cape Town, South Africa

Post by =[FEAR]=JIGSAW » Mon Sep 02, 2013 1:53 pm

@ tomasz86

Any possibility of a second version that displays fullscreen on a widescreen monitor like the original theme/scheme OR alternatively what part of the script should be modified for a 16:9 resolution ?

tomasz86
Posts: 491
Joined: Tue Aug 09, 2011 12:12 pm
Location: https://twilczynski.com/windows
Contact:

Post by tomasz86 » Tue Sep 03, 2013 6:46 am

The reason for limiting width is that one line of text should contain 50-75 characters to be easy to read.

If you absolutely want to remove the limit you'd have to change this line:

Code: Select all

body {
  max-width: 71.250em !important;
}
or overwrite it with

Code: Select all

body {
  max-width: 100% !important;
}

User avatar
dumpydooby
Posts: 530
Joined: Sun Jan 15, 2006 6:09 am

Post by dumpydooby » Sat Sep 07, 2013 2:57 am

tomasz86 wrote:The reason for limiting width is that one line of text should contain 50-75 characters to be easy to read.
A rule of thumb is to write out the alphabet twice, both caps and lowercase, and the numbers 0-9.


abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789


I wish I could cite my source on where I got this idea, but I can't remember for the life of me. I'm a huge fan of iA, so it might have been those guys, but I just did a quick search on their site and I couldn't find it there. But it might have been a site that they link to.

Post Reply