The OcUK NEW Stylish themes thread 2017

wiiija · 18 Feb 2017 at 20:11

So I figured it was about time we had a dedicated thread for the current crop of themes for the new forum.

To use these themes you will need the Stylus browser extension for your chosen browser or forks of listed browsers (vivaldi, palemoon etc):

Then choose your theme:

The top 5 themes are now on Github, links updated, you can install straight from there by clicking "Install directly with Stylus" button on the github pages.

If I've missed any feel free to let me know, ask any questions in here and I'll do my best to help.

The following is for the new forum, use only with "Alternate style" its just a few changes to the look with a few other tweaks too, copy and paste into Stylish or Stylus

CSS:

        @-moz-document url-prefix("https://forums.overclockers.co.uk/") {
            .p-description {
                display: none;
            }
            .p-navgroup.p-discovery {
                margin-left: 0px;
            }
            .p-navgroup-link:first-of-type {
                border-left: 1px solid rgba(20, 20, 20, 0.15);
            }
            .node-description {
                display: none;
            }
            [data-template*="forum_list"] .p-body-pageContent {
                border-radius: 8px;
            }
            .p-nav .p-nav-inner {
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
            }
            .p-sectionLinks .p-sectionLinks-inner {
                background: #383c41;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }
            .p-navgroup {
                background: #383c41;
            }
            .p-sectionLinks-list {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }
            .p-nav-list .p-navEl.is-selected {
                background: #383c41;
            }
            .block-container:not(.block-container--noStripRadius) > :first-child,
            .block-topRadiusContent,
            .block-container:not(.block-container--noStripRadius) > .block-body:first-child > .blockLink:first-child {
                border-radius: 8px;
            }
            .node .node-extra--inner {
                border-radius: 8px;
            }
            .button,
            a.button {
                border-radius: 4px;
                transition: 0.8s;
            }
            .message--post .message-attribution {
                padding: 10px 10px;
                border-bottom: 1px solid #000;
            }
            .block--messages .message {
                border: none;
                border-radius: 8px;
            }
            .block--messages .message-inner:last-of-type .message-cell:first-child {
                border-bottom-left-radius: 8px;
            }
            .message--post .message-attribution {
                border-bottom: 1px solid #272a2e;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
            }
            .block--messages .message-cell.message-cell--user {
                border-right: 1px solid #272a2e;
            }
            .block-body .node--unread .node-body .node-icon i {
                filter: grayscale(1);
            }
            .block-body .node--unread .node-body .node-icon i {
                filter: sepia(100%) hue-rotate(180deg) saturate(400%);
            }
            .p-header-logo.p-header-logo--image img {
                vertical-align: bottom;
                max-width: 100%;
                filter: grayscale(1);
            }
            div.freeShipping {
                display: none;
            }
            .message-actionBar.actionBar .actionBar-action {
                border: 1px solid #4b5158;
                background: #272a2e;
                border-radius: 4px;
                transition: 1s;
            }
            .message-actionBar.actionBar .actionBar-action:hover {
                border: 1px solid #272a2e;
                background: #5096ff;
                border-radius: 4px;
                transition: 1s;
                color: #fff;
            }
            .p-pageWrapper .message-cell.message-cell--user .message-avatar-wrapper .message-avatar-online {
                border-color: #5096ff transparent transparent;
            }
            .button:not(.button--splitTrigger):hover,
            a.button:not(.button--splitTrigger):hover,
            .button.button--splitTrigger > .button-text:hover,
            a.button.button--splitTrigger > .button-text:hover,
            .button.button--splitTrigger > .button-menu:hover,
            a.button.button--splitTrigger > .button-menu:hover,
            .button:not(.button--splitTrigger):focus,
            a.button:not(.button--splitTrigger):focus,
            .button.button--splitTrigger > .button-text:focus,
            a.button.button--splitTrigger > .button-text:focus,
            .button.button--splitTrigger > .button-menu:focus,
            a.button.button--splitTrigger > .button-menu:focus,
            .button:not(.button--splitTrigger):active,
            a.button:not(.button--splitTrigger):active,
            .button.button--splitTrigger > .button-text:active,
            a.button.button--splitTrigger > .button-text:active,
            .button.button--splitTrigger > .button-menu:active,
            a.button.button--splitTrigger > .button-menu:active {
                background-color: #5096ff !important;
                border: 1px solid #64a2ff !important;
                transition: 0.8s;
            }
            .buttonGroup > .button:not(:first-child) {
                border-left: 1px solid transparent;
            }
            .buttonGroup > .buttonGroup-buttonWrapper:not(:first-child) > .button {
                border-left: 1px solid transparent;
            }
            .block-container:not(.block-container--noStripRadius) > :first-child,
            .block-topRadiusContent,
            .block-container:not(.block-container--noStripRadius) > .block-body:first-child > .blockLink:first-child {
                border-radius: 8px;
                padding: 8px;
                border-bottom: 1px solid #282d36;
            }
            .block-container {
                border-radius: 8px;
            }
            .pairs.pairs--rows > dt {
                color: #b3b3b3 !important;
            }
            .block:not(.block--messages) .block-container:not(.block-container--noStripRadius) > .block-body:last-child > .message:last-child .message-inner:last-of-type .message-cell:first-child,
            .block:not(.block--messages) .block-bottomRadiusContent.message .message-inner:last-of-type .message-cell:first-child,
            .block:not(.block--messages) .block-bottomRadiusContent > .message:last-child .message-inner:last-of-type .message-cell:first-child {
                display: none;
            }
            .fr-box.fr-basic .fr-toolbar.fr-top {
                border-radius: 8px;
            }
            .fr-box.fr-basic {
                border-radius: 8px;
                -moz-border-radius: 8px;
                -webkit-border-radius: 8px;
            }
            .structItemContainer-group.structItemContainer-group--sticky {
                border-bottom: none;
            }
            .filterBar {
                padding-right: 5px;
            }
            .block-header a,
            .message-name,
            .button,
            a.button {
                text-shadow: 2px 2px 2px #000000;
            }
            .message-userBanner.userBanner {
                border-radius: 5px;
            }
            .pairs > dt {
                color: #b3b3b3;
            }
            .p-navgroup-link.p-navgroup-link--user i:after {
                color: #5096ff;
            }
            .collapseTrigger:not(.button).collapseTrigger--block:before {
                color: #5096ff;
            }
            .p-body-pageContent > .tabs--standalone:first-child {
                border-radius: 8px;
            }
            .button.button--icon--bolt > .button-text:before,
            a.button.button--icon--bolt > .button-text:before {
                display: none;
            }
            .button.button--icon--write > .button-text:before,
            a.button.button--icon--write > .button-text:before,
            .button.button--icon--reply > .button-text:before,
            a.button.button--icon--reply > .button-text:before {
                display: none;
            }
            .button.button--scroll,
            a.button.button--scroll {
                border-radius: 50%;
            }
            .forum-list-wrapper .block {
                display: none;
            }
            .p-footer-row-opposite {
                display: none;
            }
            .p-navgroup-link.p-navgroup-link--conversations i:after {
                color: #BF616A;
            }
            .p-navgroup-link.p-navgroup-link--alerts i:after {
                color: #A3BE8C;
            }
            .fa-palette:before {
                color: #D08770;
            }
            .p-navgroup-link.p-navgroup-link--search i:after {
                color: #EBCB8B;
            }
            .fr-toolbar .fr-btn-grp.rte-tab--inactive,
            .fr-toolbar .fr-btn-grp.rte-tab--preview {
                border-bottom-width: 0px;
                border-left-width: 0px;
            }
            .message-newIndicator,
            a.message-newIndicator {
                background: #5096ff;
                text-shadow: 1px 1px 1px #000000;
            }
            img[src$="https://img.overclockers.co.uk/media/image/Banner-EN-noblechairs-DOOM-unbrand_502x97.jpg"] {
                display: none;
            }
        }

[FnG]magnolia · 18 Feb 2017 at 20:17

wiiija said:
OcUK XEN Complete Dark

I'm probably late to the party but this is definitely my jam

wiiija · 18 Feb 2017 at 20:21

Thank you I appreciate it, it had plenty of input from RoyMi6, Scottland, I'm fairly sure the answer is no and a few others to get it so complete.

davido_labido · 18 Feb 2017 at 20:30

to the style gurus... for someone who has no idea how to edit all this stuff, is it possible to move the last post names further to the left? on my monitor, the last posted name and the thread title are sometimes as far as 50cm apart from each other and I only have a 27" screen, (around 58cm edge to edge).

I am sure this wasn't like this on the old forums though as I wouldn't have gotten into the habit of checking who posted last all the time as I physically have to turn my head each time which I am far too lazy to do often

wiiija · 18 Feb 2017 at 20:33

You could use this and change the padding amount to your preference:

Code:

.discussionListItem .lastPostInfo {
    padding-right: 10px;
}

I think that should work, unless someone knows a better way.
You'll need to edit the theme and paste it in somewhere, then just change the 10 to whatever you want to get it looking right for you.

Fishbait · 18 Feb 2017 at 20:36

Stylish also works on Palemoon, a Firefox fork.

V_R · 18 Feb 2017 at 20:40

Nice one wiiija, a fresh thread is definitely a good plan.

Please don't let Nexus have his way and remove 90% of the forums!

tres · 18 Feb 2017 at 20:41

First time i've used a theme. Works a treat

wiiija · 18 Feb 2017 at 20:42

V_R said:
Nice one wiiija, a fresh thread is definitely a good plan.

Please don't let Nexus have his way and remove 90% of the forums!

lol, no chance I'll be removing everything he has!

Mynight · 18 Feb 2017 at 20:48

To be fair I dont think Nexus will be happy until it's only his own posts he can see

.

Good idea. Makes sense to have a fresh thread.

Josh · 18 Feb 2017 at 21:46

Mynight said:
To be fair I dont think Nexus will be happy until it's only his own posts he can see

Nexus won't be satisfied until he can only see in binary!

Xen looks great, back to black!

Nexus18 · 18 Feb 2017 at 22:27

Hellllllllloooooo, is anyone there? I can't see any thing apart from my name and a post box...

V_R said:
Please don't let Nexus have his way and remove 90% of the forums!

wiiija said:
lol, no chance I'll be removing everything he has!

Mynight said:
To be fair I dont think Nexus will be happy until it's only his own posts he can see

JOSH86 said:
Nexus won't be satisfied until he can only see in binary!

Lol

For those that wish to ascend to my level

, make a separate stylish script using the same domains as the theme and copy + paste this then save the script:

Code:

/* removes the background and white borders around the gangster title */

.userBanner {
    background-color: transparent !important;
}

/* the following few hides most of the pointless junk at the bottom of the forum on the forum home page */

#boardStats {
   display: none;
}

.profilePostList{
   display: none;
}

.membersOnline {
    display: none;
}

.threadList {
    display: none; 
}

.staffOnline {
display: none;
}

/* corrects the padding of the page links when there is more than 3 numbers, e.g. page 580 now fits in the box correctly */

.PageNav a {
    min-width: 14px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;                                 
}

.PageNavNext, .PageNavPrev {
 height: 15px !important;
    padding-top: 0 !important;
}

/* removes the replies and views and start date heading as it's not needed */

.sectionHeaders .stats, .sectionHeaders .postDate {
display: none !important;
}

.staffOnline li {
    display: inline !important;
    margin-right: 20px;
}

.staffOnline li + li {
 margin-left: 20px;
}

/* makes locked threads alert when in the thread more visible */

dd.lockedAlert {
 color: #ff0000 !important;
}

.footer, .footerLegal {
 display: none;
}

.forum_list h1 {
   display: none;
}

.forum_list .breadBoxTop, .breadBoxBottom {
        display: none;
}

.forumsTabLinks ul.blockLinksList li:nth-child(1) {
    display: none !important;
}

.forumsTabLinks ul.blockLinksList li:nth-child(2) {
    display: none !important;
}

.forumsTabLinks ul.blockLinksList li:nth-child(3) {
    display: none !important;
}

.forumsTabLinks ul.blockLinksList li:nth-child(5) {
    display: none !important;
}

/* hides the watch forum link */

.SelectionCountContainer a:nth-child(2) {
    display: none !important;
}

/* makes the reply button easier to spot and all buttons nicer */

.submitUnit .button, .buttonContainer .button {
    background: #fff;
    border: 0;
    font: inherit;
    padding-top: 0;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.PreviewContainer .messageText {
 padding-left: 10px !important;
 padding-right: 10px !important;
 padding-bottom: 10px !important;
}

.buttonContainer .button.primary, .submitUnit .button.primary {
    color: #fff !important;
 background: #0e9955 !important;
}

#QuickSearch .button {
 margin-top: 0;
}


#QuickSearch .primary.button {
 width: 100px !important;
}


#QuickSearch .moreOptions.button {
 width: 90px !important;
    position: relative;
    left: 10px;
 
}

#QuickSearch .moreOptions.button {
padding-top: 6px;
}

#QuickSearch .PopupControl.button {
position: relative;
    top: 4px;
        background-color: #373f44 !important;
 
}

.breadcrumb .jumpMenuTrigger {
        display: none;
}

Brizzles · 18 Feb 2017 at 22:34

XEN installed - Thanks wiiija

wiiija · 18 Feb 2017 at 22:36

Brizzles said:
XEN installed - Thanks wiiija

You're welcome

wiiija · 19 Feb 2017 at 07:17

You should upload it Nexus18, I'm sure there might be at least one other person who wants to remove everything lol

ED209 · 19 Feb 2017 at 08:09

Ignore my post, had ten mins to try so installed firefox and the XEN theme.

Changed the OCUK logo on home screen so can tell much easier now where new replies are.

thanks for the theme

esoteric · 19 Feb 2017 at 08:10

Nice, gone for the black one.

wiiija · 19 Feb 2017 at 08:12

They do indeed ED209!

ED209 · 19 Feb 2017 at 08:18

wiiija said:
They do indeed ED209!

Many thanks, this was one on my main issues with the new forums. i skim through it a lot and going white to white mad it hard for me to tell if there is any new posts.

new browse is now firefox and IE is out all mybcause of the OCUK forum lol.

is there away to mark all posts under a caataory as read? used to be able to double click the what is now the OCUK logo but doesnt do anything anymore

Regy53 · 19 Feb 2017 at 08:22

Wijjas theme is so much nicer on the eye. Bit weird seeing ocuk in grey but the new blues are very conflicting

thanks