New OCUK Dark theme out now, get it while it's hot!

Status
Not open for further replies.
Code:
html {
    background-color: #181c1e !important;
}
/*[Adjust width below to preferred size]*/

body {
    color: #fff;
    /*max-width: 1400px !important;*/
    min-height: 100% !important;
    background-color: #181c1e !important;
    margin-top: 0!important;
    margin-bottom: 0!important;
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 0px!important;
    border-left: 2px;
    border-right: 2px;
    border-bottom: 0px;
    border-top: 0px;
    border-style: solid;
    border-color: #282e31;
}
body .muted, body a.muted, body .muted a {
    color: #aaa;
}
#DiscussionListOptionsHandle a {
    background-color: rgb(35, 41, 45);
    border: none;
}
#Offer .freeShipping {
    margin-top: -6px;
}
.blockLinksList a:hover, .blockLinksList a:focus, .blockLinksList li.kbSelect a, .blockLinksList label:hover, .blockLinksList label:focus, .blockLinksList li.kbSelect label {
    text-decoration: none;
    background-color: #181c1e;
}
.formPopup .controlsWrapper {
    background: #2e3539;
}
.PageNav a:hover, .PageNav a:focus, .PageNav a.currentPage {
    background-color: #181c1e !important;
    border-color: transparent;
    color: rgb(255, 255, 255) !important;
}
.Popup .PopupControl:hover, .Popup.PopupContainerControl:hover {
    background-color: #181c1e !important;
}
.navigationSideBar a:hover {
    background: #2e3539 !important;
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.redactor_box .redactor_smilies .secondaryContent {
    border-top: 2px solid rgb(78, 84, 90);
}
.discussionList .sectionHeaders a span:hover {
    background-color: #373f44 !important;
}
.Menu .sectionFooter {
    background-color: #373f44;
}
.heading, .xenForm .formHeader {
    background-color: #181c1e;
    border-bottom: 1px solid #2e3539;
}
.tabs {
    background: #2e3539;
}
.subHeading {
    background-color: #2e3539;
    border-top: 1px solid #2e3539;
    border-bottom: 1px solid #aaa;
}
.xenForm {
    border: 1px solid #434d53 !important;
}
.xenForm fieldset, .xenForm .formGroup {
    border-top: 1px solid #434d53;
}
.quickReply.message .messageUserInfo {
    box-shadow: none;
    background-color: #2e3539;
}
.hasJs .bbCodeSpoilerText {
    background-color: #2e3539;
    border: none;
}
.sharePage {
    display: none;
}
.tagList .tag {
    background: #2e3539 !important;
    border: none;
}
.tagList .tag .arrow, .tagList .tag::after {
    display: none !important;
}
.Menu {
    font-size: 11px;
    border: 1px solid rgb(255, 255, 255);
    border-top: 1px solid #fff;
    box-shadow: 0px 5px 5px rgba(0,0,0, 0.5);
}
.Menu .primaryContent {
    background-color: #373f44;
}
.Menu .secondaryContent {
    background-color: #2e3539;
}
i.fa.fa-facebook-square {
    display: none;
}
#Offer img {
    display: none !important;
}
.messageUserBlock .extraUserInfo {
    background-color: #181c1e;
}
.userBanner {
    font-size: 11px;
    background-color: #181c1e !important;
}
.bbCodeBlock pre, .bbCodeBlock .code {
    background-color: #2e3539;
}
.bbCodeBlock .type {
    background-color: #2e3539;
    border-bottom: 1px solid #373f44;
}
.publicControls a {
    background-color: #2e3539;
    border: none;
    border-bottom: 1px solid #373f44;
}
.privateControls a {
    background-color: #181c1e;
    border: none;
    border-bottom: 1px solid #373f44;
}
.bbCodeQuote .quoteContainer {
    background-color: #2e3539;
    border: none;
}
.bbCodeQuote .attribution {
    color: rgb(255, 255, 255);
    background-color: #2e3539;
    border: none;
    border-bottom: 0px solid rgb(255, 255, 255);
}
.bbCodeBlock {
    border: 1px solid #373f44;
}
img[src$="styles/default/xenforo/vbSmilies/used/header.jpeg"] {
    background: url(http://i.imgur.com/lQJ3h9d.png) no-repeat !important;
    opacity: 0.7 !important;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 90px 250px 20px 100px;
    margin-top: 10px;
    margin-left: 30px;
    float: left;
}
.primaryContent {
    background-color: #373f44;
    border-bottom: 1px solid #434d53;
}
.messageList .message {
    background-color: #181c1e;
    border: 1px solid #434d53;
}
.navTabs .navTab.PopupClosed:hover, .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
    background: #2e3539
}
.postDate {
    background-color: #23282b;
}
.PageNav a {
    background-color: #23282b;
    border: 1px solid #23282b;
}
.nodeList .categoryStrip {
    background-color: #23282b;
    border-top: none;
    border-bottom: none;
}
.node .nodeDescription {
    font-size: 10px;
    font-family: verdana;
}
.node .nodeLastPost {
    background-color: #2e3539;
    border: none;
}
.discussionListItem .posterAvatar, .discussionListItem .stats {
    background-color: #23282b;
}
.secondaryContent {
    background-color: #2e3539;
    border-bottom: none;
}
.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
    border-bottom: none !important;
}
.threadListItem {
    border-top: 1px solid #373f44 !important;
}
.profilePostListItem {
    border-top: 1px solid #373f44;
}
.footer .pageContent {
    background-color: #373f44;
}
.navTabs {
    font-size: 11px;
    background-color: #23282b;
    border: none;
    border-bottom: none;
}
.navTabs .navTab.selected .tabLinks, .navTabs .navTab.selected .navLink {
    background: #181c1e;
    border: none !important;
    margin-top: 0px !important;
}
.navTabs .navTab.selected .tabLinks a {
    text-shadow: none;
}
.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: none;
    text-shadow: none;
}
.discussionListItem {
    background-color: #2e3539;
    border-bottom: 1px solid #373f44;
    border-top: 1px solid #373f44 !important;
}
.redactor_toolbar {
    font-size: 0;
    background-color: #2e3539 !important;
    border-bottom: none;
}
.quickReply {
    padding-top: 10px;
    padding-bottom: 30px;
    border-top: 1px solid #aaa;
}
.discussionListItem .stats dl {
    border-left: none;
    border-right: none;
}
a.callToAction span {
    color: rgb(255, 255, 255);
    background: #181c1e;
}
a.callToAction span:hover {
    color: rgb(255, 255, 255);
    background: #181c1e;
    opacity: 0.7 !important;
}
a.callToAction {
    background: #181c1e;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: none;
}
.message .newIndicator {
    display: none !important;
}
.messageUserInfo {
    border: none !important;
    box-shadow: none !important;
}
.messageInfo.primaryContent {
    border-top: 1px solid #434d53;
    border-right: 1px solid #434d53;
    border-left: 1px solid #434d53;
    border-bottom: 1px solid #434d53 !important;
}
a.callToAction:hover {
    background: #181c1e;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: none;
    opacity: 0.7 !important;
}
body .itemPageNav a:hover {
    background-color: #2e3539 !important;
    border-color: transparent;
    color: rgb(255, 255, 255) !important;
}
body .itemPageNav a {
    background: #23282b;
    border: 1px solid #23282b;
}
.sectionFooter {
    background-color: #2e3539;
    border-bottom: none;
}
.textHeading, .xenForm .sectionHeader {
    border-top: 1px solid #aaa;
}
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    background-color: #2e3539;
    border-bottom: 1px solid #373f44;
}
.sectionMain {
    background-color: #2e3539;
    border: none;
}
.tabs li a, .tabs.noLinks li {
    color: rgb(255, 255, 255);
    text-decoration: none;
    background: #2e3539;
    border: 1px solid transparent;
    border-bottom: 1px solid #fff;
}
.tabs li.active a, .tabs.noLinks li.active {
    color: rgb(255, 255, 255);
    background-color: #23282b;
}
.messageList .newMessagesNotice {
    border: 1px solid #434d53;
    background: #23282b;
    font-size: 11px;
}
#QuickSearch, .formPopup {
    background-color: #373f44;
}
.discussionList .sectionHeaders {
    color: rgb(255, 255, 255);
    background-color: #23282b;
    border-top: none;
    border-bottom: none;
}
.breadcrumb .crust:hover .arrow span {
    border: 12px solid transparent;
    border-right: 1px none black;
    border-left-color: #2e3539;
    -moz-border-right-colors: #2e3539;
}
.breadcrumb .crust .arrow span {
    border: 12px solid transparent;
    border-right: 1px none black;
    border-left-color: #23282b;
    -moz-border-right-colors: #23282b;
}
.breadcrumb .crust a.crumb {
    background-color: #23282b;
}
.breadcrumb .crust:hover a.crumb {
    background-color: #2e3539;
}
.breadcrumb {
    font-size: 11px;
    background-color: #23282b;
    border: none;
}
#content .pageContent {
    background-color: #181c1e;
}

/*Remove underlines on titles */
.title a, .title, .username, .nodeTitle{
    text-decoration: none !important;
}

/*fix colours for tooltips on hover in top level of forum*/
.xenTooltip{
    background-color: #23282b !important;
}

.nodeDescriptionTip .arrow{
    border-right-color: #23282b !important;
}


/* Clean up the tooltips on hover in subforum*/
.xenPreviewTooltip{
    border: 0px !important;
}

.previewTooltip .posterDate {
    border-top-color: #23282b !important
}

.xenPreviewTooltip .arrow span {
    border-top-color: #373f44 !important;
}

.primaryContent {
    border-bottom: 0px;
}



Hmm, I've changed all of those RGB numbers to white, but links are still orange.

This is good
 
Oooh, I quite like that material theme. Nice work. :)


Wiiija, I took the liberty of adding the following to your style which I took from Thesnipergecko's tweaks

Code:
}
.navPopup {
    width: 500px;
}

It makes the alerts popup a bit wider. :)

Also, just fyi, I noticed the background of the insert dropdown is blue.
 
Willja any chance you could add the following from Scottland's theme?

Code:
img[src$="styles/default/xenforo/online-indicator.png"] {
    width:0;
    height:0;
    padding: 3px;
    background-color: #00E676;
}

It's the online indicator, looks nicer than the default one.
 
I'll update the OP when I get home to reflect the current people's work and confirm none of the old stuff works, or it might be better to start a new topic and close this one down.
 
Still can't fathom out the reply box colour in Firefox, looks like it's loading another CSS ruleset up and is overriding the body colour.
 
Yeh I don't think its possible Scottland, we are stuck with it in blue, its not toooo bad though. Broken Hope I added Scottlands indicator tweak, I agree its better
 
Grey on Chrome though.

ecBvGEo.png
 
@Scottland @wiiija did you try this?

Code:
body[contenteditable="true"] { background: white; color: black !important; }
body[contenteditable="true"] a:link,
body[contenteditable="true"] a:visited,
body[contenteditable="true"] a:focus,
body[contenteditable="true"] a:active
{ color: black  !important; }
 
Is there a Stylish Editor which is a bit like my Web Page Editor so basically you click on something in the web page and it shows you where it is in the code?
 
Status
Not open for further replies.
Back
Top Bottom