Jump to content

OverClocked ReMix Re-Theming - Dark Skin Updated: 2021-07-02

Ramaniscence

By Ramaniscence,
in General Discussion

 Share

Recommended Posts

Ramaniscence Rookie

Ramaniscence

Posted
Posted (edited)

Below is the Mozilla Format CSS for import into Stylish: 

@-moz-document domain("ocremix.org") {
  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,800;1,400;1,700&display=swap');

  /* Dark Theme Colors */
  :root {
      --color-primary: 231, 146, 97;
      --color-primary-variant: 230, 85, 2;
      --color-surface: 18, 18, 18, 1;
      --color-surface-ev-1: 255,255,255,0.05;
      --color-surface-ev-4: 255,255,255,0.09;
      --color-primary-on-surface: var(--color-primary), 0.12;
      --color-on-surface: 255,255,255,0.8;
      --color-on-surface-variant: 255,255,255,0.66;
  }

  /* transition css */
  body {
      background: rgba(var(--color-surface)) !important;
      color: #aaa !important;
      font-family: Roboto, Arial, Helvetica, sans-serif;
  }

  .container-content {
      background-color: #121212;
  }

  .widget-content-shading-light, .widget-neutral {
      border-radius: 0;
      box-shadow: 0 1px 2px rgba(0,0,0,0.33);
      border-radius: 1em;
      background-color: rgba(var(--color-surface-ev-1));
  }

  .widget-content-inner, .widget-neutral .widget-content {
      background-color: transparent
  }

  .widget-content-inner h3 {
      color: rgba(var(--color-on-surface-variant)) !important;
  }

  .widget-content-inner h2, .widget-content-inner h2 a {
      color: rgba(var(--color-on-surface-variant)) !important;
      font-weight: 500;
      font-size: 1.33em;
  }

  .widget-content-inner ul li {
      color: rgba(var(--color-on-surface)) !important;
      margin: 4px 0;
      font-size: 1.15em;
  }

  .col-border-right {
      border-right: solid 0px #111 !important;
  }

  .col-border-left {
      border-left: solid 0px #111 !important;
  }

  hr {
      border-top: solid 0px #111 !important;
  }

  ul.link-items li, div.list-item {
      background-color: transparent;
      border-bottom: 1px solid #222;
  }

  ul.link-items li:hover, div.list-item:hover {
      background: rgba(var(--color-surface-ev-1));
  }

  span.color-bodytext a, span.color-bodytext a:link, span.color-bodytext a:visited, div.main-content a.color-bodytext {
      color: rgba(var(--color-on-surface-variant)) !important;
  }

  .color-additional, .color-additional a, .color-additional a:link, .color-additional a:visited, table.data .color-additional a, a.color-additional {
      color: rgba(var(--color-on-surface));
  }

  .widget-header, .widget-neutral .widget-title {
      background-color: transparent !important;
  }

  .widget-arrangement .widget-content-shading-light  {
      background: transparent;
      padding: 0;
  }

  .widget-arrangement .widget-title {
  background-color: transparent !important;
  }

  .widget-arrangement {
      background-color: rgba(var(--color-surface-ev-1));
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.33);
      border-radius: 10px;
  }

  div.writeup, div.writeup p, div.writeup blockquote, div.writeup ul li {
      color: rgba(var(--color-on-surface));
      font-size: 1.08em;
  }

  /* Forums */

  /* Forums Theme Override */
  :root {
      --box--backgroundColor:rgba(var(--color-surface-ev-1));
      --theme-area_background_reset: var(--color-surface-ev-1);
      --theme-button_bar: var(--color-surface-ev-4);
  }

  #ipsLayout_body {
      background: #121212;
  }

  .ipsBreadcrumb > ul > li {
      color: rgba(var(--color-on-surface-variant));
  }

  .ipsBreadcrumb > ul > li > a {
      color: rgba(var(--color-on-surface));
  }

  .ipsType_pageTitle, .ipsType_sectionHead {
      color: rgba(var(--color-on-surface-variant));
  }

  .ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected ):not( .ipsModerated ):not( .ipsDataItem_new ):not( .ipsDataItem_success ):not( .ipsDataItem_warning ):not( .ipsDataItem_error ):not( .ipsDataItem_info ):not( .ipsDataItem_status ):nth-child(even) {
      background: rgba(255,255,255,0.01);
  }

  .ipsWidget_title, .ipsType_sectionTitle {
      background-color: unset;
      border-bottom: unset;
  }

  .ipsDataItem {
      border-bottom: 1px solid #222;
  }

  .ipsWidget .ipsCalendarDate {
      background: rgba(var(--color-surface));
  }
  .ipsType_sectionTitle {
      background-color: unset;
  }

  .ipsTabs_container {
      background: rgba(var(--color-primary-on-surface));
  }

  .cTopicHovercard {
      /* background: var(--color-surface), var(--color-surface-ev-1); */
      background: rgba(var(--color-surface));
  }

  .ipsTabs_panel {
      /* this also should be dark gray */
  }

  .ipsTabs_panels.ipsTabs_contained {
      background: #f00; /* This should be dark gray */
  }

  #elPostFeed {
      background-color: rgba(var(--color-surface-ev-1));
  }

  #elPostFeed article {
      border-radius: 10px;
  }

  .ipsQuote_citation, .ipsSpoiler_header {
      color: rgba(var(--color-on-surface));
  }

  blockquote.ipsQuote, .ipsQuote_citation, .ipsSpoiler, .ipsSpoiler_header {
      background: rgba(var(--color-surface-ev-1));
  }

  .ipsOutline {
      --outline-border-color: rgba(var(--color-surface-ev-1));
  }

  .ipsPagination:not( .ipsPagination_mini ) a {
      color: rgba(var(--color-on-surface-variant));
  }

  .ipsTags .ipsTag, .ipsTag_prefix {
      color: rgb(var(--color-primary)) !important;
      background-color: rgba(var(--color-primary), 0.05) !important;
      border: 1px solid rgba(var(--color-primary), 0.25);
  }

  .ipsTag:hover{
      color: rgb(var(--color-primary-variant)) !important;
  }

  .ipsApp .cke_wysiwyg_frame, .ipsApp .cke_wysiwyg_div {
      color: rgb(var(--color-on-surface));
  }
}

Known Issues:

  • Many. This is a WIP
  • Many more because the forum is currently under development.

Legacy Information:

Spoiler

Updated OCR3 and OCR Dark, added VGMix 2 theme:

Dark Theme

OverClocked ReMix 3 Theme

VGMix 2 theme

You'll notice there's some image replacement that needs to be done still, I'm working on it best I can.

In addition:

You'll find that, since the directory of the forums has changed, the sidebar removal NO LONGER works. I actually think removing the sidebar makes things look weird now, but if you still want to do it all you have to do is change the "phpbb" line to "forums".

PLEASE NOTE:

This can only be done if you are using Mozilla Firefox through the Stylish add-on or by editting the userContent.css.

There are also various ways to do it via Opera Browser. If you are using Opera and would like to use this style please read this and this.

 

Changelog:

2021-07-02 - Updated to Material Dark style for new forum theme.

2009-02-26 - Fixed SPOILERS tags

2009-02-25 - Fixed some issues with new user pages

2009-02-25 - Updated a few graphics

2007-06-11 - Fixed position of user info DIV

2007-06-11 - Fixed dates in changelog because I'mma tard

2007-01-02 - Updated a few replaced images.

2007-01-01 - Code clean-up to eliminate errors.

2007-01-01 - Image replacement for smileys

2007-01-01 - Editting the background colors so theme displays correctly WITHOUT main theme.

2007-01-01 - Alittle more image replacement

2006-12-31 - Added my own little something ❤️

2006-12-31 - Added new post images not in PhpBB

2006-12-31 - Updated/added a few image replacemnts using images from PhpBB

2006-12-30 - Initial launch

Edited by Ramaniscence
Link to comment
Share on other sites
Ayres Newbie

Ayres

Posted
Posted
Not sure if IE has an option for this type of scripting. You'd have to wait for Rama on that one. Although I'd just recommend switching to FireFox.

Yeah, I read the more info on everything, and it never once mentioned IE. I think I'm screwed unless Rama knows something else.

Link to comment
Share on other sites
Ayres Newbie

Ayres

Posted
Posted

I downloaded Firefox just so I can use this. It's running fine, and I've got the "Stylish" add-on.

But anytime I go to save it it yells at me:

The code you entered contains errors:

Expected color but found '#8d8c92repeat-x'. Expected end of value for property but found '#8d8c92repeat-x'. Error in parsing value for property 'background'. Declaration dropped.

And if I save anyway, the "style" doesn't take effect.

Halp halp.

Link to comment
Share on other sites
atmuh Newbie

atmuh

Posted
Posted
I downloaded Firefox just so I can use this. It's running fine, and I've got the "Stylish" add-on.

But anytime I go to save it it yells at me:

The code you entered contains errors:

Expected color but found '#8d8c92repeat-x'. Expected end of value for property but found '#8d8c92repeat-x'. Error in parsing value for property 'background'. Declaration dropped.

And if I save anyway, the "style" doesn't take effect.

Halp halp.

I got that error but saved it anyway and it works.

Link to comment
Share on other sites
anthonium Newbie

anthonium

Posted
Posted
I downloaded Firefox just so I can use this. It's running fine, and I've got the "Stylish" add-on.

But anytime I go to save it it yells at me:

The code you entered contains errors:

Expected color but found '#8d8c92repeat-x'. Expected end of value for property but found '#8d8c92repeat-x'. Error in parsing value for property 'background'. Declaration dropped.

And if I save anyway, the "style" doesn't take effect.

Halp halp.

When you apply the style, make sure you visit the website using http://www.ocremix.org/forums and then click on the forum you want. the links to each individual forum change when you use the style. So if you are accessing the forums using a bookmark right now, delete that bookmark, go to the forums using that link i said, and then click on the forum you want and you can bookmark that. Also remember you have to add both styles as Rama said in his post.

Link to comment
Share on other sites
Ayres Newbie

Ayres

Posted
Posted
When you apply the style, make sure you visit the website using http://www.ocremix.org/forums and then click on the forum you want. the links to each individual forum change when you use the style. So if you are accessing the forums using a bookmark right now, delete that bookmark, go to the forums using that link i said, and then click on the forum you want and you can bookmark that. Also remember you have to add both styles as Rama said in his post.

Well, clicking on your link solved the problem, but anytime I type into OCR and go into the forums any other way, other than using your link, it doesn't keep the skin.

Never mind about the other part. I've got it working. Looks great. Thanks for your help, guys.

Link to comment
Share on other sites
SilverStar Newbie

SilverStar

Posted
Posted
Well, clicking on your link solved the problem, but anytime I type into OCR and go into the forums any other way, other than using your link, it doesn't keep the skin.

Never mind about the other part. I've got it working. Looks great. Thanks for your help, guys.

Try clearing your cache with ctrl-F5.

Also, are you installing both of the scripts? Everywhere from the front page to the forums are showing up with the style installed, for me.

Link to comment
Share on other sites
KyleJCrb Newbie

KyleJCrb

Posted
Posted

Hey Rama, how does the image replacement in the code work? I want to change the forum images that mark new posts in threads and the like back to the ones used in phpbb, but I'm not exactly sure how to go about doing that. I figured out how to change the New Post and Reply buttons, since the code was already there, but I don't know how to add new ones. Any ideas?

Link to comment
Share on other sites
Ayres Newbie

Ayres

Posted
Posted
Hey Rama, how does the image replacement in the code work? I want to change the forum images that mark new posts in threads and the like back to the ones used in phpbb, but I'm not exactly sure how to go about doing that. I figured out how to change the New Post and Reply buttons, since the code was already there, but I don't know how to add new ones. Any ideas?

I wholeheartedly agree with this idea.

Link to comment
Share on other sites
Ramaniscence Rookie

Ramaniscence

Posted
  • Author
Posted
Hey Rama, how does the image replacement in the code work? I want to change the forum images that mark new posts in threads and the like back to the ones used in phpbb, but I'm not exactly sure how to go about doing that. I figured out how to change the New Post and Reply buttons, since the code was already there, but I don't know how to add new ones. Any ideas?

That's actually what I planned to do, but I entirely forgot that PhpBB was STILL THERE.

Anyway code works as follows (Just using this as an example):

img[src="/images/projects/album_blood_on_the_asphalt_125.jpg"] {
		background: url("http://ramaserv.thasauce.net/images/OCRCSS/OCR4-Contrast/RoFL.png") #000 top left no-repeat !important;
		width: 0 !important;
		height: 100px !important; 
		padding-left: 100px !important;
		border: 1px solid #555 !important;
	}

First line is the actual selector for the image. All images with the src of what. You can use "title" too if that's easier for you.

Next is the background image (new image) and the location, background color yadda yadda.

Width is ALWAYS equal to 0, padding-left is equal to the width of the new image, and height is equal to that of the new image.

It doesn't so much REPLACE the image as it does "shove it out of the way" =P. Anyway I'm gonna do this probably later tonight, or tomorrow anyway.

I got that error but saved it anyway and it works.

Yea, right now I loaded ALL the CSS that vB is running, and poke and prodded it where nessacary. Somewhere in the original code is something that Stylish doesn't like, so it drops it (I noticed in particular Stylish doesn't like how djp uses the background attribute) but this doesn't effect anything I've done.

Please remember, this is just my INITIAL release of the style update, and they'll definitely be more within the next few days.

Rama had an advance view of the vB forum. He was helping us out with testing. Thx again, Rama.

Is true, but not ENTIRELY why I was done so fast. I pretty much did the code while djpretzel had vB turned OFF to back up the database. I just left a page open with the forum still on it =P.

REALLY it went so quick because I had to edit almost none of style. The vB style is still in progress as it is and is pretty barebones. The whole edit can be broken down into just a few broad things:

1) Table Headers (black background stuff)

2) Sub headers (Grey background stuff)

3) TDs within table tboder (everything)

JUST editting those 3 things style 75% of the board. Also SINCE the style is new I really can't pinpoint individual things that need editting because djp hasn't classed or ID'd them yet (besides QUOTES and CODE and a few other thigns this isn't so much a problem with MY style but there's a few elements in the original OCR style with no padding that really bug me :( ).

When you apply the style, make sure you visit the website using http://www.ocremix.org/forums and then click on the forum you want. the links to each individual forum change when you use the style. So if you are accessing the forums using a bookmark right now, delete that bookmark, go to the forums using that link i said, and then click on the forum you want and you can bookmark that. Also remember you have to add both styles as Rama said in his post.

This is very important. The styles are URL SPECIFIC. They WILL NOT work for OCREMIX.ORG only WWW.OCREMIX.ORG. I'd have to put ALL the code in there twice to make that work, and it really just seem redundant to me.

Also: A lot of this wasn't mentioned in the first post because I figured most people already knew, apparently I'm gonna have to re-write it later anyway.

Link to comment
Share on other sites
Ramaniscence Rookie

Ramaniscence

Posted
  • Author
Posted

Updatedthe style to include any image replacement that I could steal from PhpBB.

This basically means all post icons except "threads you've posted in." I'll make new images for those asap.

Update: ALL post icons now replaced. Apologies to anyone who doesn't like the NEW post images, I did my best. I'm trying to keep all the images with transparency as GIFs, and I'm not really The Coop so I'm not skilled with pixel art -_-.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...