The OcUK NEW Stylish themes thread 2017

wiiija

wiiija

wiiija

Soldato
Joined
18 Oct 2002
Posts
2,957
Location
Northants
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;
            }
        }
 
Last edited:
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.
 
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 ;)

Screenshot_5.jpg
 
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.
 
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! :D
 
Hellllllllloooooo, is anyone there? I can't see any thing apart from my name and a post box... :p ;) :D

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

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

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

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

Lol :D :D :D

For those that wish to ascend to my level :p, 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;
}
 
Last edited:
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 :D
 
wiiija said:
They do indeed ED209!
Click to expand...

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
 
You must log in or register to reply here.
Back
Top Bottom