The OcUK NEW Stylish themes thread 2017

[wiiija]

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):

• Firefox
• Chromium
• Opera
• Safari

Then choose your theme:

• OcUK Xen Complete MOD by wiiija
• OcUK Xen Minimal White by wiiija
• OcUK Xen Minimal Curvy Neon by wiiija
• OcUK XEN Complete Dark by wiiija
• OcUK Xen-Minimal by wiiija
• OcUK Clutter be gone by Nexus 18
• Choose your own colors by Scottland
• Tweaked standard colors by Thesnipergecko
• A white and clean worksafe design by Russinating
• ocuk-forum-white-blue-xenforo by mortals

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

        @-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;
            }
        }

 

[wiiija]

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.

 

[wiiija]

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

.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.

 

[wiiija]

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!

 

[wiiija]

XEN installed - Thanks wiiija

You're welcome

 

[wiiija]

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

 

[wiiija]

They do indeed ED209!

 

[wiiija]

Nice, gone for the black one.

Glad you like it

 

[wiiija]

I'll add the online members fix if thats ok mortals

 

[wiiija]

Nice to see a few people saying thanks hasn't gone to your head.

edit: you were replying to someone actually named mortals. Silly me.

Manners cost nothing , off out now @Nexus18 but I'll look when I get back for you.

 

[wiiija]

Give me half hour it will be fixed, they messed up a few bits now fgs!

 

[wiiija]

Oh so it is! think I just about fixed it, they just removed padding everywhere but I put a little back.

 

[wiiija]

I have nobody in my ignore list but I'll try to fix it later guys

 

[wiiija]

hmm thats a weird one, not sure what could possibly cause that but I'll look into it asap.

 

[wiiija]

I fixed it was related to the quote box changes I made, I just removed the changes.

 

[wiiija]

Fixed the ignore bar issue too!

 

[wiiija]

haha, that's it now until something else breaks, promise

 

[wiiija]

I'll add it back if I can fix the issue but it's a tough one, it's related to that little arrow near the name in the quote box, if I leave it it goes to another line, if I remove it it also removes links from the post.

 

[wiiija]

This is the quote box code for what it's worth:

.bbCodeQuote .attribution {
    color: #fff;
    background-color: #23282b;
    border: none;
    border-bottom: 1px dotted #373f44 !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !imporant;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
}

 

[wiiija]

a[class="AttributionLink"] {
    display: none;
}

That fixes it, removes that arrow though but it's mostly pointless imo