topic Re: Compact design CSS for Plusnet Community in Community Site Feedback

Compact design CSS for Plusnet Community

jaread83 — Mon, 03 Jul 2017 10:38:50 GMT

Hello everyone,

I am a big fan of providing choice and catering for those who have different preferences to how they view the Community on their browsers. I have been working on a little side project to provide a bit of a different experience when using the forums and I would like to share with you my latest creation.

Compact design skin

Instead of waffling on about what has changed, here are some screenshots:

Board viewThread viewHomepage viewunread page

This will also affect a few other places like your private messages page.

You can grab the code and paste into your Stylish (Firefox) or Stylebot (Chrome) plugins here:

Stylish (Firefox): https://pastebin.com/pwYFG1a1

Stylebot (Chrome): https://pastebin.com/Ugze9qMk

Any feedback is welcome. This is the first version of this so there are bound to be some issues. Just let me know if there are any crazy bugs on the appearance.

Thanks,

Jack

Re: Compact design CSS for Plusnet Community

jaread83 — Mon, 09 Jan 2017 11:14:34 GMT

Firefox users

Visit https://addons.mozilla.org/en-gb/firefox/addon/stylish/ and add the Stylish extension to your browser

Look for the Stylish icon () in your browser and click it
Navigate to 'Write new style' > 'For community.plus.net' (this will open a new tab)
Visit this link for the CSS code: http://pastebin.com/T20D1wja
Copy and paste the code from this page directly into the Stylish addon tab we just opened.
Click save on Stylish.

The Community should now show the compact theme.

Re: Compact design CSS for Plusnet Community

jaread83 — Mon, 09 Jan 2017 11:14:58 GMT

Chrome users

Visit https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en and download and install the Chrome application for Stylebot.

Look for the Stylebot icon () in Chrome and click it
Navigate to 'options'. This will open a new tab.
Click 'Styles' on the left.
On the right side panel, click 'add new style'. This will open a modal box to edit.
add 'community.plus.net' to the URL input on this box then visit http://pastebin.com/jV0b9GPJ to get the code to paste into the big input box.
When finished, click 'add'.

The community will now be in a compact theme after refreshing the page.

Re: Compact design CSS for Plusnet Community

jaread83 — Thu, 22 Dec 2016 11:11:18 GMT

Please note that some things have been hidden so user stats, signatures and a few other bits have been completely hidden to make more room for the important stuff.

As a side note, you can combine this with my high contrast theme as another theme in your browser plugin.

Feel free to let me know if you would like to see anything else made more compact on this theme.

Re: Compact design CSS for Plusnet Community

HairyMcbiker — Thu, 22 Dec 2016 11:16:50 GMT

@jaread83 It looks OK, a bit garish going back to the white view again, but if you combine it with shutters one it is fine.

Just noticed the Cancel/Post at the bottom of this message is scrunched up. Purely your code as shutters doesn't do it.

Re: Compact design CSS for Plusnet Community

jaread83 — Thu, 22 Dec 2016 11:35:31 GMT

No problem, that's the quick reply buttons. I have updated the code.

Re: Compact design CSS for Plusnet Community

dvorak — Thu, 22 Dec 2016 11:50:38 GMT

I like it, thanks

Re: Compact design CSS for Plusnet Community

HairyMcbiker — Thu, 22 Dec 2016 12:09:31 GMT

Yep that's better. I normally use quick reply unless I am linking to something.

Re: Compact design CSS for Plusnet Community

Mav — Thu, 22 Dec 2016 16:10:12 GMT

@jaread83

First time of using styles and am liking so far (I think).

One thing I noticed when deciding to turn on the Quick Reply option was the way the Thanks option was being displayed:

Re: Compact design CSS for Plusnet Community

Chris — Thu, 22 Dec 2016 16:13:35 GMT

Good work Jack, really like this style!

Re: Compact design CSS for Plusnet Community

jaread83 — Thu, 22 Dec 2016 16:25:25 GMT

I have fixed the 'thanks' option under preferences. Pastebin links have been updated.

Re: Compact design CSS for Plusnet Community

Mav — Thu, 22 Dec 2016 16:29:35 GMT

Excellent, thanks @jaread83

Is it me or do pages with this new style seem to load quicker?

Re: Compact design CSS for Plusnet Community

jaread83 — Thu, 22 Dec 2016 16:32:30 GMT

If anything it would make the page load slower due to the extra code being added on top of the standard code.

Re: Compact design CSS for Plusnet Community

Oldjim — Fri, 23 Dec 2016 12:08:42 GMT

installed - thanks Jack

Re: Compact design CSS for Plusnet Community

Oldjim — Fri, 23 Dec 2016 12:16:57 GMT

One thing I have noticed is there a significant delay when using Unread Topic link to a thread that the thread opens but then hesitates until moving to the first unread post

Re: Compact design CSS for Plusnet Community

Anoush — Fri, 23 Dec 2016 21:31:55 GMT

This sort of reminds me of our old community forums.

I'm liking it, will install later.

Re: Compact design CSS for Plusnet Community

jab1 — Mon, 26 Dec 2016 11:25:30 GMT

@jaread83 - thanks for this Jack, will install/have a play when I get home in January - I'm on hols atm and don't spend long on PC.

Re: Compact design CSS for Plusnet Community

Mav — Sat, 07 Jan 2017 17:34:13 GMT

@jaread83

There seems to be an alignment issue when displaying fixed posts:

Re: Compact design CSS for Plusnet Community

jaread83 — Mon, 09 Jan 2017 11:15:22 GMT

Thanks for pointing that out, I have fixed this now.

Re: Compact design CSS for Plusnet Community

Oldjim — Mon, 09 Jan 2017 11:57:17 GMT

Does that require the code in Stylish etc, changing