The OcUK NEW Stylish themes thread 2017

[Russinating]

Few updates to my white theme to tidy things up and remove last remnants of blue from login/obscure dialogues.

 

[mortals]

Made a few tweaks again

here is how it looks atm:





The blue/red logo's on frontpage don't look too bad on the grey bg

 

[wiiija]

Thanks for pointing those out marc2003, the arrow on the second line is a Firefox problem, I've commented some code on line 612 to 615 that removes the arrow for Firefox users, obviously I need a better solution for that.
The blue line I'm currently trying to fix and also struggling!

The other issues I'll look into asap.

Sean

 

[Will Gill]

@mortals I like that a lot, which style do I add to get that view, I have most of them installed but none look like that - I'm guessing I need to tweak one?

 

[mortals]

@mortals I like that a lot, which style do I add to get that view, I have most of them installed but none look like that - I'm guessing I need to tweak one?

I edited lots of the xen theme, took the logo from Scottland's Custom Colours.
Merged some of the css to cleanup. (lost structure of overrides so will post full code)

Here is the full code:

-code-

edit: now on userstyles.org

OcUK Forum - Darkness (xenforo)

https://userstyles.org/styles/139336/ocuk-forum-darkness-xenforo

 

[wiiija]

@marc2003 that weird bbcode editor background should be fixed now.

 

[Will Gill]

I edited lots of the xen theme, took the logo from Scottland's Custom Colours.
Merged some of the css to cleanup. (lost structure of overrides so will post full code)

Here is the full code:
]

That's awesome, thanks very much

 

[marc2003]

@marc2003 that weird bbcode editor background should be fixed now.

Thanks.

 

[V_R]

@mortals, I like that!

Now I'm torn between three different themes.....!

 

[mortals]

Just noticed links within posts don't seem to have any special formatting or difference to show they are links

To add underline:

.messageText a {
    text-decoration: underline !important;
}

 

[wiiija]

Just noticed links within posts don't seem to have any special formatting or difference to show they are links

To add underline:

.messageText a {
    text-decoration: underline !important;
}

Nice one, added

 

[unwashed potato!]

Only thing for me is the report etc. buttons overlapping text for users with no sigs with your padding code.

try the below. i am pretty sure this has solved it. you just now have a slightly bigger gap above the signature but it's barely noticeable. make sure to remove or comment out publiccontrolspacing

/* moves the post links like edit, trust etc inline with the signature. this could cause an issue if there is no signature and the text goes all the way to the end of the post box on the final line */

.signature, .signatureDivider {
     position: relative;
    top: 26px;
}


.messageMeta {
      position: relative;
    bottom: 5px !important;
    right: 0;
    float: right !important;
    max-width: 350px;
}

/*
.publicControlsSpacing  {
 display: none;  
}
*/

also with the recent updates to the buttons it messes the quick search and quick reply buttons a bit. below should solve it.

/* 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: 35px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.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: 7px; 
}

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

 

[Nexus18]

try the below. i am pretty sure this has solved it. you just now have a slightly bigger gap above the signature but it's barely noticeable. make sure to remove or comment out publiccontrolspacing

/* moves the post links like edit, trust etc inline with the signature. this could cause an issue if there is no signature and the text goes all the way to the end of the post box on the final line */

.signature, .signatureDivider {
     position: relative;
    top: 26px;
}


.messageMeta {
      position: relative;
    bottom: 5px !important;
    right: 0;
    float: right !important;
    max-width: 350px;
}

/*
.publicControlsSpacing  {
 display: none; 
}
*/

also with the recent updates to the buttons it messes the quick search and quick reply buttons a bit. below should solve it.

/* 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: 35px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.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: 7px;
}

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

Working great!

I agree, went back to my icons, there will no more changing anything until something breaks now, promise

Much better

One last tweak that I would make and no it doesn't involve removing anything Is maybe move those icons and sub forum text into the left a bit more.

 

[unwashed potato!]

anyone know if there's an extension similar to stylish that works for javascript/jquery instead?

 

[wiiija]

Not as far as I know, would be great though wouldn't it? endless possibilities!
What about Tampermonkey or is that just css? never really looked at it.

 

[mortals]

Not sure if anyone else likes this but made a tweak to make grid have alternating backgrounds when viewing a forum.

ol.discussionListItems li.discussionListItem:nth-child(odd) {
    background-color: #333b40;
    border-left: 1px solid #373f44;
    border-right: 1px solid #373f44;
}
ol.discussionListItems li.discussionListItem:nth-child(even) {
    background-color: #2f353b;
    border-left: 1px solid #373f44;
    border-right: 1px solid #373f44;
}
.discussionListItem .posterAvatar, .discussionListItem .stats {
    background-color: inherit;
    border-left: 1px solid #373f44;
    border-right: 1px solid #373f44;
}

edit: had to remove .breadcrumb .crust a.crumb,

 

[unwashed potato!]

Not as far as I know, would be great though wouldn't it? endless possibilities!
What about Tampermonkey or is that just css? never really looked at it.

just found this too. does appear to be what i'm after. like you say. endless possibilities could be had!

 

[wiiija]

I personally like it mortals
Yes it does look like a powerful tool, I wouldn't know where to start though I don't know js at all, might be worth a little tinker though.

 

[Mynight]

anyone know if there's an extension similar to stylish that works for javascript/jquery instead?

https://chrome.google.com/webstore/...or-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

I used that a while ago seemed to work reasonably well. Sadly couldn't find similar for Firefox .

 

[mortals]

You could inject your own JS with a userscript

eg:

var x = document.createElement('script');
x.src = "console.log(injected some script);";
document.getElementsByTagName("head")[0].appendChild(x);