Board preferences - how are you viewing GRcade?

[Pedz]

I wrote a dark theme for GResponsive and put it online if anyone else wants to use it.

Just click "Install Style". It will say "Install with Stylish" and prompt you to install the Stylish extension if you don't have it.

GRcade Dark



It's kinda ugly, and I haven't finished it yet, but at least it saves my retinas.

Using GResponsive right now.

I'd personally like to see a dark theme, to be honest. I'm not much of a fan of light themes.

Let me know how this is for you.

Done, thanks. Only thing needing to be done for me is the logo, which sounds like it will be done.

[Dangerblade]

Why isn't Christmas a theme choice? I want to sign the guest book again

[That]

Why isn't Christmas a theme choice? I want to sign the guest book again

It's always Christmas in our hearts: http://grcade.co.uk/t:xmas-hype

[Earfolds]

Anyway one thing I can easily do to help is fix the alpha channel on the default logo.

I've already gone and made these from the high-res source files. I think phpBB supports HiDPI/Retina now so I made an HD version just in case you need it.

If you've already made some, then apologies!

[Green Gecko]

Do you mean the vector files? Cheers mate. For some reason the default one just has a white background. One of those things that never gets fixed, even though as a vector artist I could do it at any point.

(It may even already be there and just the wrong filename is being used, it's a mystery)

[Earfolds]

Do you mean the vector files? Cheers mate. For some reason the default one just has a white background. One of those things that never gets fixed, even though as a vector artist I could do it at any point.

(It may even already be there and just the wrong filename is being used, it's a mystery)

I made those two PNG files from the original EPS files, which are the plain vectors and don't have a white background.

The files I used were from this upload which I found in this old thread.

I converted it to SVG, if you prefer SVG (I do).

Can't say why it got saved with a white background, but at least now the original files are handy.

[Green Gecko]

Yeah that's fine, I use Illustrator. Only benefit you might get from AI is align to pixel grid, but now I'm moving into anal graphic design territory, lol. The original logo needs a little work, in fact it needs updating.

[Earfolds]

We've pretty much had the same logo since the reflection effect was removed from it. I'm sure it will be nice to see an update to the look, however minor!

[Green Gecko]

Yeeeah mostly the whole obvious copyright thing, I'll be crowdsourcing approval for our own unique pixel "A"-shaped alien and we might get away with pacman, I'm not sure! The only way of knowing honestly is if there's a dispute submitted to the IPO or some random lawyer picks up on it. At the moment it doesn't really matter at all because it's not even worth the cost of registering it.

Just insecure about Taito, they're pretty litigious, and it would be nice to be able to do more merch stuff.

At the moment we can't protect our own brand which isn't the best idea going. We have rights over the name though. So that part will never change and neither should the colour palette or the fonts we use, as that would gooseberry fool everybody right up (already did once), although I wasn't brain-dead enough to switch everything to PURPLE when we re-themed the forum. There were a couple of contrast issues that we addressed and I do think we could use an official dark theme. If your implementation is just CSS overrides maybe you could share those with me if it proves popular? Our theme is actually written in SASS so it'd be quite a lot of work to "back port" it into that but I'm happy to accommodate anyone, honestly I didn't really think about it very much for those of us still with an aversion to bright lights (myself I suffer from scotopic sensitivity but just turn the brightness on all my screens down to a light grey) or reading at night, which is a key thing.

For example I used the dark Tapatalk theme for years until they strawberry floated their app's design.

[Earfolds]

If your implementation is just CSS overrides maybe you could share those with me if it proves popular? Our theme is actually written in SASS so it'd be quite a lot of work to "back port" it into that but I'm happy to accommodate anyone.

Actually, your theme uses SCSS, which is a superset of CSS so it should be forwards compatible as-is, though I admit I don't have any experience with SASS or SCSS.

That said, it might actually be simpler to edit the SCSS directly, since it looks like you can just edit the color-palette section in _style_config.scss once (using _custom_config.scss), and it gets compiled automatically by SASS.

I'm just looking through the theme files, and I could probably package a dark theme for you, if you like?

[Green Gecko]

You're right, it is SCSS, which is a newer form of SASS that's forwards/backwards compatible depending on your approach. I generally write/wrote both SASS and LESS depending on the source code (for example GRcade is SASS but my framework I generally use is actually LESS) and the syntax is so similar I just figure out whatever pre-processor it is on the fly by looking at it (or file extensions obv) and seeing what my terminal chucks up when it passes through csslint (which is great because you can pre-validate your CSS before its even uploaded to the server). I appropriated this theme editing the SCSS/SASS directly.

It's the CSS that actually gets parsed on page-load: styles/simplicity_gray/theme/stylesheet.css

You can just paste in CSS anywhere where it will override other modules/includes in the cascade but I prefer to make those declarations in the shorter form and have CSS generated accordingly, otherwise you kind of nullify the point of extended CSS. You can see KP made some edits in stylesheet that incldues the main one here: styles/simplicity_gray/theme/gresponsive_1.1_tweaking_stylesheet.css?assets_version=61 that I never got around to putting into SCSS

Edit: That should really be an include not two stylesheets targeting the same elements in a single page..

I just have the SCSS files uploaded there for backup and availability reasons. So they need to be parsed and written out to css in my env before it'll work. But it was aaaaaages ago now, I'll have to re-familiarise.

By the way, in most web development terms, I'm kind of retired except for my own stuff, in case you noticed :p I was hoping that would make more time for GRcade but now I'm just doing a load of other stuff instead :/

If you don't know SCSS (it's not difficult) you could just put your work in some CSS file and I'll either put override the rules in a dark theme (or set up a child theme of sorts) or/eventually try to reduce those rules into SCSS making future edits easier.

For the most part it's just coying hex codes anyway, unless you were thinking of anything more dramatic?

That styles config/module you identified's an easy way to clone the theme and swap out most of the colour values leaving the rest largely intact.

[Earfolds]

If you don't know SCSS (it's not difficult) you could just put your work in some CSS file and I'll either put override the rules in a dark theme (or set up a child theme of sorts) or/eventually try to reduce those rules into SCSS making future edits easier.

For the most part it's just coying hex codes anyway, unless you were thinking of anything more dramatic?

Thank you. That's literally all i've done besides add a box-shadow to make the black usernames stand out more, and swap out Verdana for another font.

I'll just put the plain old CSS here for you. I'll be able to use this on mobile this way.

Code: Select all

.username-coloured {
    text-shadow: -1px -1px 0 #40444C,
    -1px 1px 0 #40444C,
    1px -1px 0 #40444C,
    1px 1px 0 #40444C;
}

html {
    background: #202730;
}

body {
    background: #202730;
    color: #727C86 !important;
    font-family: "SF Pro Text", "Noto Sans", Helvetica, Arial, sans-serif;
}

a {
    color: #9C9FA4;
}

a.topictitle {
    color: #848890 !important;
}

.row, .bg1, .bg2, .bg3 {
    background: #32353A !important;
    border-color: #282C30 !important;
}

.header, .nav-tabs {
    background: #40444C !important;
}

.headerbar {
    color: #727C86;
}

hr {
    border-color: #12171C;
}


.navbar, .selected {
    background: #32353A !important;
    border-color: #282C30 !important;
}

.pagination li a {
    background: #40444C !important;
    border-color: transparent !important;
    color: #848890;
}

label {
    color: #848890;
}

fieldset dl:hover dt label {
    color: #A6AFB9;
}

h1, p.sitename {
    color: #727C86;
}

.panel {
    background: #40444C !important;
    border-color: #40444C !important;
    color: #727C86;
}

.panel dd:hover span {
    color: #A6AFB9;
}

.panel h2, .content h2 {
    color: #A6AFB9;
    border-color: #727C86;
}

h3 {
    color: #A6AFB9 !important;
}

ul.topiclist li {
    color: #727C86;
}

.forabg ul.topiclist li.header, .forumbg ul.topiclist li.header {
    color: #727C86;
}

.header, .panel > .inner > h3:first-child, .panel > h3:first-child {
    background: #383C44 !important;
    border-color: #727C86 !important;
}

.content {
    color: #848890;
}

.postbody {
    color: #727C86;
}

.inputbox, textarea, select {
    background: #32353A !important;
    border-color: #32353A;
    color: #727C86
}

.inputbox:hover, select:hover {
    color: #848890 !important;
    border-color: #D03C3C !important;
    border-right: 1px solid #D03C3C;
}

.inputbox:focus, select:focus {
    color: #848890 !important;
    border-color: #727C86 !important;
    border-right: 1px solid #727C86;
}

.inputbox:hover::placeholder {
    color: #848890;
}

dd label {
    color: #727C86;
}

#message-box textarea {
    color: #848890;
}

.postprofile, .signature, .post {
    border-color: #24282F;
    color: #727C86;
}

.postprofile strong {
    color: #A6AFB9;
}

blockquote, .dropdown, .dropdown-contents, .codebox {
    background: #40444C !important;
    border-color: #848890;
    color: #A6AFB9
}

blockquote blockquote, blockquote blockquote blockquote blockquote {
    border-color: #24282F;
    background: #32353A !important;
}

blockquote blockquote blockquote, blockquote blockquote blockquote blockquote blockquote {
    background: #40444C !important;
    border-color: #848890;
}

cite {
    color: #727C86;
}

.codebox p {
    color: #727C86;
    border-color: #848890;
}

.codebox code {
    color: #00FF00;
}

.dropdown li {
    border-color: #848890;
}

.navbar .nav-tabs .tab:hover, .navbar .nav-tabs .tab.dropdown-visible {
    background: #24282F;
}

.notification_list li.dropdown-notification {
    background: #24282F;
    border-color: #32353A;
}

.notification_list li.dropdown-notification:hover {
    background: #40444C;
    border-color: #32353A;
}

.notification_list li.dropdown-notification strong {
    color: #727C86;
}

.dropdown-extended .header, .dropdown-extended .footer {
    border-color: #32353A;
}

table.table1, tbody, td, tr {
    border-color: #24282F !important;
    color: #727C86 !important;
}

tr.bg3 td {
    background: #40444C !important;
}

.post-buttons-seperator {
    color: #24282F !important;
}

#tabs .activetab > a, #tabs .activetab > a:hover {
    background: #40444C !important;
    border-color: #40444C;
    color: #A6AFB9;
}

#tabs .tab > a {
    background: #24282F;
    border-color: #24282F;
    color: #727C86;
}

#tabs .tab > a:hover {
    background: #40444C;
    border-color: #40444C;
}

.forum-statistics .value {
    color: #727C86;
}

#navigation a {
    background: #40444C;
}

#navigation a:hover {
    background: #32353A;
}

#navigation #active-subsection a {
    background: #24282F;
}

.cp-mini {
    background: #32353A;
}

#cp-main .pm {
    background: #40444C !important;
}

.panel-container .panel li.header dd, .panel-container .panel li.header dt {
    color: #727C86;
}

fieldset.polls dl {
    border-color: #727C86;
    color: #848890;
}

fieldset.polls dl.voted {
    color: #A6AFB9;
}

fieldset.polls dl.most-votes {
    color: #FFFFFF;
}

div.with-mark a.forumtitle {
    text-shadow: -1px -1px 0 #40444C,
    -1px 1px 0 #40444C,
    1px -1px 0 #40444C,
    1px 1px 0 #40444C;
}

.search-box .button, .search-box .post-buttons > #expand > a, .search-box .button:hover, .search-box .post-buttons > #expand > a:hover {
    background: #40444C !important;
    border-color: #40444C !important;
}

.search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus, .search-box .button:hover, .search-box .post-buttons > #expand > a:hover {
    border-color: #40444C;
}

.post:target .content {
    color: #727C86;
}

.phpbb_alert {
    background: #40444C;
    border-color: #40444C;
    color: #727C86;
}

dl.details dt {
    color: #727C86;
}

dl.details dd {
    color: #848890;
}


[Errkal]

How about make a logo design thread for yabber about it?

Got to be 2 years we have had "we need to redesign the logo to get rid of copy right blah blah"

Make a thread and people and submit ideas and thoughts and instead of another 2 years of yabber we might actually get somewhere.

[Oblomov Boblomov]

I just tested out the other two options strawberry floating hell.

[Moggy]

The colour scheme on GR almost exactly matches the colours used on our workflow system. Which makes it the perfect forum for me to get away with using at work.