The OcUK NEW Stylish themes thread 2017

Feek · 1 Dec 2021 at 15:00

Bouton Aide said:
styles/default/xenforo/vbSmilies/used/xmaspudHeaderTransparent.jpeg

It definitely hasn't been this for at least three years.

Armageus said:
styles/default/xenforo/vbSmilies/xmas/xmaspudHeaderTransparent.jpeg

It's definitely this.

Deleted member 77746 · 1 Dec 2021 at 15:40

ah! well my findings with the CSS themes is that it's base64 conversions for the logos. but I have no idea why the old url is been used.

Base64 is used because it's faster to render the image over standard URL.

However in this case it's also the base64 that's causing it to break.

I think I've solved it, just need to push the updates later after more testing.

EDIT: Crimbo logo updates are pushed to github for all themes by Wiiija.

wiiija · 1 Dec 2021 at 22:38

@Bouton Aide , most of the themes work fine as they are mate! xen complete and mod, white theme all work without any changes

Deleted member 77746 · 2 Dec 2021 at 10:13

wiiija said:
@Bouton Aide , most of the themes work fine as they are mate! xen complete and mod, white theme all work without any changes

That’s strange when I tested the themes the logos where off after the change to the Christmas pudding. I tested it in FF, Chrome, Edge and Brave.

That’s alright no worries! I’ll have to do some more testing.

james.miller · 14 Jan 2022 at 09:11

I'm working on my own theme. I don't know what it'll be called, or when i'll be done. But it's coming, it's written from scratch (I havent used anything from any existing themes), it's pretty thorough (2000+ lines), it's split in to mostly logical sections of code and it makes use of variables so it's very easy to create variants using different colours. When i've got it up to an acceptable standard i'll make it available here and you lot can have at it.

Ideas for a name anyone?

unwashed potato! · 14 Jan 2022 at 09:46

james.miller said:
Ideas for a name anyone?

Kinda Blue and grey

james.miller · 14 Jan 2022 at 10:16

Apex said:
Kinda Blue and grey

Perfect

Armageus · 14 Jan 2022 at 10:18

james.miller said:
Ideas for a name anyone?

Letterbox edition

wiiija · 15 Jan 2022 at 03:24

Awesome, when its done let me have the link and I'll add it to the first post

wiiija · 24 Jan 2022 at 20:58

Some screens of mine:

Minimal white(my fav)

Xen Complete(most popular)

Xen Complete MOD

Curvy neon

I'm currently doing a mod of the white theme using the lovely Nord dark color palette. Nord (nordtheme.com)

unwashed potato! · 24 Jan 2022 at 22:53

#sexy

wiiija · 25 Jan 2022 at 02:48

Apex said:
#sexy

Yeh! big improvement to the default themes imo.

Malevolence · 5 Mar 2022 at 23:43

Deleted. Had a brain fart, but have sorted it out now.

Deleted member 77746 · 10 Mar 2022 at 18:56

wiiija said:
I'm currently doing a mod of the white theme using the lovely Nord dark color palette. Nord (nordtheme.com)

How far you getting on? any screenshots? if you finish it lets get it on github

Feek · 29 Apr 2022 at 08:30

I don't use these themes but I thought this was worth a bump to see if they are being updated for the new forum layout.

unwashed potato! · 29 Apr 2022 at 08:32

There will be updates etc but perhaps worth waiting until any final changes are done by the mods

wiiija · 29 Apr 2022 at 11:52

I'm struggling to find the time I have a lot of stuff going on at the moment, they basically needing starting again, I just dont have the time or inclination if I'm honest, happy for someone else to take the reigns on github

wiiija · 4 May 2022 at 03:35

You must use this with the Alternate Style, not many changes just some main page adjustments and some changes to the message boxes, I will be adding more changes as and when I have the time.

Code:

        @-moz-document url-prefix("https://forums.overclockers.co.uk/") {
            html {
                background-color: #2e3539 !important;
                background: radial-gradient(black 15%, transparent 16%) 0 0,
                radial-gradient(black 15%, transparent 16%) 8px 8px,
                radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px,
                radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
                background-size: 16px 16px;
            }
            /*[adjust width below to preferred size]*/
            body {
                max-width: 1400px;
                margin-left: auto!important;
                margin-right: auto!important;
                -webkit-box-shadow: 0px 0px 26px -5px rgba(0, 0, 0, 0.75);
                -moz-box-shadow: 0px 0px 26px -5px rgba(0, 0, 0, 0.75);
                box-shadow: 0px 0px 26px -5px rgba(0, 0, 0, 0.75);
                border-left: 10px solid #383c41 !important;
                border-right: 10px solid #383c41 !important;
            }
            .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;
            }
        }

Deleted member 77746 · 4 May 2022 at 10:52

If people are going to update them you are going to have to let me know if there's working changes so I can test and update the github code.

Apex said:
There will be updates etc but perhaps worth waiting until any final changes are done by the mods

It's worth waiting until the forum matures. There may be other changes that effect the themes so good call.

Does anyone want to be an editor on github?

wiiija · 4 May 2022 at 10:58

They cant really be updated the code is completely different, best starting again.