Online Sequencer Forums

Full Version: Want a better user experience? [Layout changes!]
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Layout Changes


Hello! Are you bored to stare at the same layout every day? Want a better user experience? I'll help you out.


For example this is how I improved my chat experience:



[Image: 21a89cb398104750bf9e9a4115c3470f.png]



If you hover over the little blob at the top right corner with your mouse, it opens up the list of users in the chat like this:



[Image: 6e27fe992e92450a866b0b63a40e6345.png]


You can also drag the entire chat around on your screen which Jacob_ approves was a neat touch.

Jacob_ doesn't like round layouts which is why I don't think we'll ever see this chat as the original one, but for those who want it or want site related bugs like the 'Edit Full Post' bug fixed, feel free to let me know.




How do I apply this layout to my OS page?



You need a Chrome Extension called "TamperMonkey".

1) You go to Chrome Web Store 

 [Image: d37ad64c1b7c48778935ad87ec614a6d.png]

2) Get the TamperMonkey extension and open it up from the top right corner of your browser: 

[Image: ca148eb662bf47649dcbab44cd58fa99.png]

3) Press the "Create a new script..." at the bottom and you'll see a blank page like this: 


[Image: 79b850e394a447a8848c19736ce02aad.png]


Remove all that code and copy paste this in there and press Ctrl + S to save changes:


Code:
// ==UserScript==
// @name         Chat Layout
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      https://code.jquery.com/jquery-1.12.4.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include      https://onlinesequencer.net/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("#chatbox { position: absolute; border: 10px solid black; border-radius: 25px; opacity: 0.9;}");
GM_addStyle("#chat_table { border-top-left-radius: 20px;}");
GM_addStyle("#chatplaceholder { position: absolute; left: 773px; top: 443px;}");
GM_addStyle("#chatbox_right { background-color: black; border-radius: 10px; width: 110px; text-align: center;}");
GM_addStyle(".message { text-align:center;background-color: #444D49; opacity: 1.0; margin-left: 5%; font-size: 20px; border-radius: 10px;}");
GM_addStyle("#message { background-color: black; opacity: 1.0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}");
GM_addStyle("#chatbutton { background-color: #123C5C; opacity: 1.0; border-radius: 40px;}");
GM_addStyle("#chatbutton:hover { border: 3px solid black; text-align: center;}");
GM_addStyle(".name { text-align:center; font-size: 15px;}");
GM_addStyle(".char { border-radius: 100px; margin-top: 20px; border: solid 2px #262626;}");
GM_addStyle("#status { width: 30px; height: 30px; font-size: 0px; border: 2px solid grey;}");
GM_addStyle("#status:hover { width: 500px; height: 55px; font-size: 15px; text-align: center;}");



$(document).ready(function() {
   $('#chatplaceholder').draggable();

});

4) Go back to OnlineSequencer.net and refresh the page. Open up Tampermonkey just like in step 2 and activate "Chat Layout". Now refresh the page once more and it should work.

You might want to experiment to reposition the #chatplaceholder's top and left pixel positions if the chat seems to go off screen when you open it and if you should run into any other issues with this, let me know.



Also here's the code to fix the Edit button:

Code:
// ==UserScript==
// @name         Edit Post Fix
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      https://code.jquery.com/jquery-1.12.4.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include      https://onlinesequencer.net/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle(".popup_menu { margin-top: -92px; background-color: red;}");

Just make a new userscript and copy paste it in, remember to save it, activate it, and refresh the page.

[Image: b8d873d6285d4337bf778ce866096e2c.png]

Enjoy.







Chat Bot


I know that the code isn't the 'best' but it does the job:
Feel free to improve the chat bot in any way you want.

Commands: /help /nastyjoke /copypasta /onlineusers /clear


Code:
// ==UserScript==
// @name         Chat Bot
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      https://code.jquery.com/jquery-1.12.4.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include      https://onlinesequencer.net/*
// @grant        none
// ==/UserScript==



//This is VoidZee's rusty chatbot. Not the prettiest and best code but it does the job.
//Feel free to improve this and add your own commands if you know how to code.



setInterval(function(){
   
var nastycomments = ["How do you embarrass an archeologist? Give him a used tampon and ask him which period it came from.", "You still use Internet Explorer? You must like it nice and slow.", "Why doesn't Santa have any kids? He only comes once a year.", "Miss Anders... I didn't recognise you with your clothes on.", "Why can't you play Uno with a Mexican? They steal all the green cards.", "How long does it take for a black woman to take a *****? 9 months.", "Two black people have an Asian baby. They name him Sum Ting Wong.", "Why did hitler k*ll himself? Because he saw his gas bill.", "Why can't chinese have white babies? Two Wongs don't make a white.", "What do you call it when a white man dancing has a seizure? An improvement."];
var copypasties = ['Hiiii!!~ im PonyLover69!!!!!!! And i looooove ponies XDD im lookin for other p0ny l0v3rs like me XD so ummmm hihihihi some facts about me :P ;)  1. I draw sexualized ponies 4 fun 2. Im 23  but mature 4 my age XD!! 3. i want to marry twilight sparke from my little pony... dont tell mom!!!! XDDDD (i still live in my moms basement but dont t3ll any0ne hheheheh).I sexually identify as a genderfluid demipony transfaggot bisexual-kin.'];
   
var messa = $(".message");
var namee = $(".name");
   
var chattybot = "[size=7][color=blue][b]ChatBot[/b][/color][/size]: ";
   
   
if (messa.text().indexOf("/help") !== -1) {
   //ex.addClass("test");
   //console.log("now changing and sending the message");
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/help', ':help command executed:'));
   });
   
   sendChat(document.getElementById("message").value = chattybot + "List of commands [Prefix '/' before command: help, copypasta, nastyjoke, onlineusers, clear]");
   
}
   
   if (messa.text().indexOf("/nastyjoke") !== -1) {

       
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/nastyjoke', ':nastyjoke command executed:'));
   });
   
   sendChat(document.getElementById("message").value = chattybot + nastycomments[Math.floor(Math.random()*nastycomments.length)]);
   
}
   if (messa.text().indexOf("/onlineusers") !== -1) {

       
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/onlineusers', ':online command executed:'));
   });
   
   sendChat(document.getElementById("message").value = chattybot + document.getElementById("status").innerHTML.replace("In Chat:", ""));
   
}
   if (messa.text().indexOf("/clear") !== -1) {

       
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/clear', ':clear command executed:'));
   });
   
   sendChat(document.getElementById("message").value = "[list][*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*][/list]" + chattybot + " Chat cleared.");
   
   
}

   if (messa.text().indexOf("/copypasta") !== -1) {

       
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/copypasta', ':copypasta command executed:'));
   });
   
   sendChat(document.getElementById("message").value = chattybot + copypasties[Math.floor(Math.random()*copypasties.length)]);
   
   
}
   
   
   
   
   
// Codes below are unimportant.

   
   
   
   
   
   
   
//Following doesn't work and is just a test anyway
   
if (messa.text().indexOf("/ctest") !== -1 && namee.text().indexOf("Playername") !== -1) {

       
   $('.message').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('/ctest', ':ctest command executed:'));
   });
   
   $('.name').each(function() {
          var text = $(this).text();
          $(this).text(text.replace('Playername', ':Playername command executed:'));
   });
   
   sendChat(document.getElementById("message").value = "test123");
   
   
}
   //Following is just a test
if (messa.text().indexOf("/123") !== -1) {


   console.log(document.getElementById("message").value = namee.text().indexOf("VoidZee") + " Test");
   
   
}
   
   //Interval loops every half second, you can make the bot react faster if you lower the number to like 100 but I wouldn't recommend it since it slows down your PC.
   
}, 500);
       




Removing Chat

Code:
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://*/*
// @grant        GM_addStyle
// @run-at        document-start
// ==/UserScript==


GM_addStyle(".chat_link { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes chat from OS front page
GM_addStyle("a[href='javascript:;'] { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes chat from the OS forum page
GM_addStyle("#chatbar { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes bottom chat from the OS forum page
^ Lazy code but does the trick



DARK THEME! ~



Code:
// ==UserScript==
// @name         OSDarkThemeV2
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://onlinesequencer.net/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==


//Enjoy the dark OS theme! Made by VoidZee.


//#1e1e1e is really dark grey
//#191919 even darker


GM_addStyle("#menubar_element{ color: white; background-color: black;} img { border: 0; }");

GM_addStyle("#bar{ color: white; background-color: black; font-size: 135%;} img { border: 0; }");

//GM_addStyle("#nav ul{ color: white; background-color: grey !important;} img { border: 0; }");
//GM_addStyle("li:active{ color: white; background-color: grey !important;} img { border: 0; }");
GM_addStyle("#nav ul li.active{ color: white; background-color: rgba(62, 62, 62, 0.8); !important;} img { border: 0; }");



GM_addStyle("html{background-color: #191919;} img { border: 0; }"); //general bg
//GM_addStyle("body{background-color: #191919;} img { border: 0; }");
GM_addStyle("#header{background-color: #191919;} img { border: 0; }");

GM_addStyle(".profile_header{ color: white; background-color: #3f3f3f;} img { border: 0; }");

GM_addStyle("a:hover{background-color: #3f3f3f;} img { border: 0; }");


GM_addStyle("#menus{ color: white; background-color: black;} img { border: 0; }");
GM_addStyle("#sidebar{ color: white; background-color: #191919;} img { border: 0; }");
GM_addStyle("#toolbar_element{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle("#toolbar_container{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle("#middle{ color: white; background-color: #191919;} img { border: 0; }");
GM_addStyle("#nav{ color: white; background-color: #191919;} img { border: 0; }");

GM_addStyle("#instrument_select_box{ color: white; background-color: black;} img { border: 0; }");
GM_addStyle("#instrument_options{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle(".instrument_option{ color: white; background-color: #1e1e1e;} img { border: 0; }");

GM_addStyle(".key{ color: white; background-color: #7f7f7f;} img { border: 0; }");
GM_addStyle(".key_sharp{ color: white; background-color: black} img { border: 0; }");

GM_addStyle(".toolbar_button{ color: white; background-color: black} img { border: 0; }");

GM_addStyle(".btn_side{ color: white; background-color: #3f3f3f;} img { border: 0; }");

GM_addStyle(".btitle{ color: white; background-color: #3f3f3f;} img { border: 0; }");
GM_addStyle(".bcontents{ color: white; background-color: #383838;} img { border: 0; }");


GM_addStyle("li#logo{color: white; background-color: black;} img { border: 0; }");

GM_addStyle(".box_label{color: white; background-color: black;} img { border: 0; }");


GM_addStyle("li#logo:hover{background-color: black;} img { border: 0; }");
GM_addStyle("a#/{background-color: red;} img { border: 0; }"); //not even sure on earth I tested here

GM_addStyle("span.title{} img { border: 0; }"); //logos text
GM_addStyle("span.subtitle{visibility: hidden} img { border: 0; }"); //logos text
GM_addStyle("span.subtitle:after{content: 'Dark!'; visibility: visible;} img { border: 0; }"); //logos text


GM_addStyle("#ad{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#bottom_left{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#like_button{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#share{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#share{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");





//Forum page CSS below
//Forum page CSS below
//Forum page CSS below





GM_addStyle("#os_bar{color: white; background-color: black !important;} img { border: 0; }");
GM_addStyle("#os_nav{color: white; background-color: #191919 !important;} img { border: 0; }");
GM_addStyle("#os_logo{color: white; background-color: black !important;} img { border: 0; }");

GM_addStyle("span.os_subtitle{visibility: hidden} img { border: 0; }"); //logos text
GM_addStyle("span.os_subtitle:after{content: 'Dark!'; visibility: visible;} img { border: 0; }"); //logos text

GM_addStyle("#os_header{color: white; background-color: #191919 !important;} img { border: 0; }");
GM_addStyle("a:hover{color: white !important; background-color: none !important; -o-transition:.0s !important; -ms-transition:.0s !important; -moz-transition:.0s !important; -webkit-transition:.0s !important;} img { border: 0; }");
GM_addStyle("#os_nav ul li:hover{color: white !important; background-color: #000000; !important; -o-transition:.0s; -ms-transition:.0s; -moz-transition:.0s; -webkit-transition:.0s;} img { border: 0; }");

GM_addStyle("td.thread{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle(".thead{color: white !important; background-color: black !important; border: 1px solid #a7a7a7 !important;} img { border: 0; }");
GM_addStyle(".tborder{color: white !important; background-color: #101010 !important; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("textarea{color: white !important; background-color: #2f2f2f !important;} img { border: 0; }");
GM_addStyle("blockquote{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle("blockquote cite {color: white !important; background-color: #2f2f2f !important; border: 1px solid #ababab;} img { border: 0; }");

GM_addStyle(".trow_sep{color: white !important; background-color: #2f2f2f !important; border: 1px solid #949494 !important;} img { border: 0; }");

//GM_addStyle(".codeblock{color: white; background-color: black !important;} img { border: 0; }"); //BUGGY SO FLONK GAVE ME THIS
GM_addStyle(".codeblock.codeblock{color: white; background-color: black !important;} img { border: 0; }"); //flonks css override thingy
GM_addStyle(".post_head{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle(".post_controls{color: white !important; background-color: #414141 !important;} img { border: 0; }");
GM_addStyle(".post_content .signature{color: white !important; background-color: #373737 !important;} img { border: 0; }");



GM_addStyle("a.button:active{color: white; background-color: #afafaf !important;} img { border: 0; }");
GM_addStyle("a.button:visited{color: white; background-color: #afafaf !important ;} img { border: 0; }");
GM_addStyle("a.button:hover{color: white; background-color: #afafaf !important;} img { border: 0; }");
GM_addStyle("a.button:link{color: white; background-color: #afafaf !important;} img { border: 0; }");



GM_addStyle(".tcat{color: white; background-color: #3c3c3c !important;} img { border: 0; }"); //forumteampage
GM_addStyle(".proi{color: white; background-color: black !important;} img { border: 0; }"); //insidepplsforumpages
GM_addStyle(".pcss3t > label{color: white; background-color: black !important; border: 1px solid #ffffff !important;} img { border: 0; }"); //insidepplsforumpages

GM_addStyle(".navMenu{color: white; background-color: rgba(62, 62, 62, 0.8);} img { border: 0; }");

GM_addStyle("td.trow1{background-color: black !important; text-shadow: none !important; font-size: 145%; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("td.trow2{background-color: black !important; text-shadow: none !important; font-size: 145%; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("table{color: white !important; } img { border: 0; }");

GM_addStyle(".ajax_mark_read{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#chatbar{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }"); //forumbottochatremove
GM_addStyle(".expcolimage{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");

GM_addStyle(".tfoot{background-color: #4a4a4a !important;} img { border: 0; }");
GM_addStyle(".trow1{background-color: #252525 !important; text-shadow: none !important;} img { border: 0; }");

GM_addStyle("a:link{color: grey !important;} img { border: 0; }");
GM_addStyle(".post .post_head span.post_date{color: white !important;} img { border: 0; }");
GM_addStyle("a:visited{color: grey !important;} img { border: 0; }");
GM_addStyle(".smalltext{color: #cecece !important;} img { border: 0; }");
GM_addStyle("#content{background-color: rgba(23, 23, 23, 0.7) !important;} img { border: 0; }");

GM_addStyle("#footer .upper{background-color: black !important; border-top: 1px solid #9a9a9a !important; border-bottom: 1px solid #9a9a9a !important} img { border: 0; }");




ENJOY!

[Image: 26dOJ5y.png]

Forum page look!

[Image: NAJWfjn.png]

Inside view from threads:

[Image: rnUx7yt.png]
Cool. Sticking thread for anyone that wants it.
Added my chat bot to the list for usage. Feel free to improve it in any way you want. Enjoy.
I cleaned up the Chatbot a bit so it's super easy to add commands now. Smile (see line 81)

Code:
// ==UserScript==
// @name         Chat Bot
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       You
// @include      https://onlinesequencer.net/*
// @grant        none
// ==/UserScript==



//This is VoidZee's rusty chatbot. Not the prettiest and best code but it does the job.*
//Feel free to improve this and add your own commands if you know how to code.
//
//*Fixed in v0.2



// Send a message to chat.
var messageInput;
var sendMessage = string => {
   if(!messageInput) messageInput = document.getElementById('message');
   if(!messageInput) return; // if the user has not openend the chat yet, return.
   messageInput.value = string;
   sendChat();
};

// Turn the HTML of a `.chat` element into usable data
var parseMessage = node => {
   var info = node.childNodes[0],
       name = info.childNodes[0].textContent,
       time = info.childNodes[2].textContent,
       text = node.childNodes[1].textContent;

   return {
       'user' : name,
       'time' : time,
       'message' : text
   };
};

// Execute `fn` every time a new message has been recieved.
var messageStream = (fn, interval) => {
   var chat_table, latest;
       
   setInterval(() => {
       // check whether the user has even opened the chat yet.
       if(!chat_table){
           chat_table = document.getElementById('chat_table');
           if(chat_table) latest = chat_table.lastElementChild;
           else return;
       }
       // if a new message has been received, #chat_table will have been
       // cleared, and so `latest` will no longer be a part of #chat_table.
       if(!latest.parentNode){
           latest = chat_table.lastElementChild;
           fn(parseMessage(latest));
       }
   }, interval);
};

var nastycomments = [
   "How do you embarrass an archeologist? Give him a used tampon and ask him which period it came from.",
   "You still use Internet Explorer? You must like it nice and slow.",
   "Why doesn't Santa have any kids? He only comes once a year.",
   "Miss Anders... I didn't recognise you with your clothes on.",
   "Why can't you play Uno with a Mexican? They steal all the green cards.",
   "How long does it take for a black woman to take a *****? 9 months.",
   "Two black people have an Asian baby. They name him Sum Ting Wong.",
   "Why did hitler k*ll himself? Because he saw his gas bill.",
   "Why can't chinese have white babies? Two Wongs don't make a white.",
   "What do you call it when a white man dancing has a seizure? An improvement."
];

var copypasties = [
   'Hiiii!!~ im PonyLover69!!!!!!! And i looooove ponies XDD im lookin for other p0ny l0v3rs like me XD so ummmm hihihihi some facts about me :P ;)  1. I draw sexualized ponies 4 fun 2. Im 23  but mature 4 my age XD!! 3. i want to marry twilight sparke from my little pony... dont tell mom!!!! XDDDD (i still live in my moms basement but dont t3ll any0ne hheheheh).I sexually identify as a genderfluid demipony transfaggot bisexual-kin.'
];

var PREFIX = "[color=#AAAAAA][b]ZeeBot[/b][/color] - ";


var commands = {
   'help'        : data => 'List of commands [Prefix \'\/\' before command: help, copypasta, nastyjoke, onlineusers, clear]',
   'nastyjoke'   : data => nastycomments[Math.floor(Math.random()*nastycomments.length)],
   'onlineusers' : data => document.getElementById("status").innerHTML.replace("In Chat:", ""),
   'clear'       : data => '[list][*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*]   ‍   [*][/list]',
   'copypasta'   : data => copypasties[Math.floor(Math.random()*copypasties.length)]
};


// main loop!
messageStream(data => {
   if(data.message[0] === '/'){
       var command = data.message.split(' ')[0].substring(1);
       if(commands[command]) sendMessage(PREFIX + commands[command](data));
   }
}, 100);
Hey guys

I created a tamper monkey script to make our lives a little easier. I think we can combine our powers and make some really cool stuff.

https://raw.githubusercontent.com/wmerfa...er/main.js
Code:
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://*/*
// @grant        GM_addStyle
// @run-at        document-start
// ==/UserScript==


GM_addStyle(".chat_link { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes chat from OS front page
GM_addStyle("a[href='javascript:;'] { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes chat from the OS forum page
GM_addStyle("#chatbar { color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
// Removes bottom chat from the OS forum page

Removing Chat

I did my best alright, that's what matters. I'm lazy on the coding part but enjoy having no chat.


quick Edit: I found out about this method in Tampermonkey called "@run-at document-start" which means it will run this code before the site starts so the effects of this is instant, I should've done this to all my previous codes because I quit using tampermonkey due to not being able to load my 'cool' effects instantly after always F5'ing the page or going to the site.
Dark Theme, now with Forum.

Check the thread for sourcecode.

Added 'Dark Theme' due to being requested by ParaSpider. EDIT: Version 2 Released. 
Hope you enjoy it but let me know if you want to change something in it because I know it isn't the prettiest.

If you press save, it'll saves the song so don't worry. I simply removed the notification button.

EDIT: I was able to make the Forums thanks to Jacob showing me what "!important" does to elements in CSS.

ALL BUGS FIXED 11/11/2017
Lucent has given me the permission to do whatever I want with the chat, excluding colour and size changes. I may release a chat-bot of my own soon, but I make no guarantees. I will use my own code, but I looked over your code a bit so I don't re-invent the wheel too much. Overall, I already invented my own methods for doing this, but I will adopt a 500 ms delay.
The dark theme is REALLY cool, but the sequencer itself could use some fixes. IMO the text is a bit big at the top where it says Welcome back Guest, and/or the inspired. But mainly the Online sequencer sign. It's still blue. If that can get fixed that'd be cool. If not then i guess I'll just mes with the code a bit (even though i dont know crap lol)

EDIT: Also in chat, the Mobile friendly and move to sidebar kinda over laps the top left of the chat a bit.
Code:
// ==UserScript==
// @name         Chat Layout
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      https://code.jquery.com/jquery-1.12.4.js
// @require      https://code.jquery.com/ui/1.12.1/jquery-ui.js
// @include      https://onlinesequencer.net/*
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle("#chatbox { position: absolute; border: 10px solid black; border-radius: 25px; opacity: 0.9;}");
GM_addStyle("#chat_table { border-top-left-radius: 20px;}");
GM_addStyle("#chatplaceholder { position: absolute; left: 773px; top: 443px;}");
GM_addStyle("#chatbox_right { background-color: black; border-radius: 10px; width: 780px; text-align: center;}");
GM_addStyle(".message { text-align:center;background-color: #44464d; opacity: 1.0; margin-left: 5%; font-size: 20px; border-radius: 10px;}");
GM_addStyle("#message { background-color: black; opacity: 1.0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}");
GM_addStyle("#chatbutton { background-color: #123C5C; opacity: 1.0; border-radius: 40px;}");
GM_addStyle("#chatbutton:hover { border: 3px solid black; text-align: center;}");
GM_addStyle(".name { text-align:center; font-size: 15px;}");
GM_addStyle(".char { border-radius: 100px; margin-top: 20px; border: solid 2px #262626;}");
GM_addStyle("#status { width: 30px; height: 30px; font-size: 0px; border: 2px solid grey;}");
GM_addStyle("#status:hover { width: 500px; height: 55px; font-size: 15px; text-align: center;}");



$(document).ready(function() {
  $('#chatplaceholder').draggable();

});

Code:
// ==UserScript==
// @name         OSDarkThemeV2
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://onlinesequencer.net/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==


//Enjoy the dark OS theme! Made by VoidZee.


//#1e1e1e is really dark grey
//#191919 even darker


GM_addStyle("#menubar_element{ color: white; background-color: black;} img { border: 0; }");

GM_addStyle("#bar{ color: white; background-color: black; font-size: 80%;} img { border: 0; }");

//GM_addStyle("#nav ul{ color: white; background-color: grey !important;} img { border: 0; }");
//GM_addStyle("li:active{ color: white; background-color: grey !important;} img { border: 0; }");
GM_addStyle("#nav ul li.active{ color: white; background-color: rgba(62, 62, 62, 0.8); !important;} img { border: 0; }");



GM_addStyle("html{background-color: #191919;} img { border: 0; }"); //general bg
//GM_addStyle("body{background-color: #191919;} img { border: 0; }");
GM_addStyle("#header{background-color: #191919;} img { border: 0; }");

GM_addStyle(".profile_header{ color: white; background-color: #3f3f3f;} img { border: 0; }");

GM_addStyle("a:hover{background-color: #3f3f3f;} img { border: 0; }");


GM_addStyle("#menus{ color: white; background-color: black;} img { border: 0; }");
GM_addStyle("#sidebar{ color: white; background-color: #191919;} img { border: 0; }");
GM_addStyle("#toolbar_element{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle("#toolbar_container{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle("#middle{ color: white; background-color: #191919;} img { border: 0; }");
GM_addStyle("#nav{ color: white; background-color: #191919;} img { border: 0; }");

GM_addStyle("#instrument_select_box{ color: white; background-color: black;} img { border: 0; }");
GM_addStyle("#instrument_options{ color: white; background-color: #1e1e1e;} img { border: 0; }");
GM_addStyle(".instrument_option{ color: white; background-color: #1e1e1e;} img { border: 0; }");

GM_addStyle(".key{ color: black; background-color: #7f7f7f;} img { border: 0; }");
GM_addStyle(".key_sharp{ color: white; background-color: black} img { border: 0; }");

GM_addStyle(".toolbar_button{ color: white; background-color: black} img { border: 0; }");

GM_addStyle(".btn_side{ color: white; background-color: #3f3f3f;} img { border: 0; }");

GM_addStyle(".btitle{ color: white; background-color: #3f3f3f;} img { border: 0; }");
GM_addStyle(".bcontents{ color: white; background-color: #383838;} img { border: 0; }");


GM_addStyle("li#logo{color: white; background-color: black;} img { border: 0; }");

GM_addStyle(".box_label{color: white; background-color: black;} img { border: 0; }");

GM_addStyle("#bar{color: white; background-color: black !important;} img { border: 0; }");
GM_addStyle("#nav{color: white; background-color: #191919 !important;} img { border: 0; }");
GM_addStyle("#logo{color: white; background-color: black !important;} img { border: 0; }");

GM_addStyle("li#logo:hover{background-color: black;} img { border: 0; }");
GM_addStyle("a#/{background-color: red;} img { border: 0; }"); //not even sure on earth I tested here

GM_addStyle("span.title{} img { border: 0; }"); //logos text
GM_addStyle("span.subtitle{visibility: hidden} img { border: 0; }"); //logos text
GM_addStyle("span.subtitle:after{content: 'Dark!'; visibility: visible;} img { border: 0; }"); //logos text


GM_addStyle("#ad{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#bottom_left{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#like_button{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#share{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#share{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");





//Forum page CSS below
//Forum page CSS below
//Forum page CSS below





GM_addStyle("#os_bar{color: white; background-color: black !important;} img { border: 0; }");
GM_addStyle("#os_nav{color: white; background-color: #191919 !important;} img { border: 0; }");
GM_addStyle("#os_logo{color: white; background-color: black !important;} img { border: 0; }");

GM_addStyle("span.os_subtitle{visibility: hidden} img { border: 0; }"); //logos text
GM_addStyle("span.os_subtitle:after{content: 'Dark!'; visibility: visible;} img { border: 0; }"); //logos text

GM_addStyle("#os_header{color: white; background-color: #191919 !important;} img { border: 0; }");
GM_addStyle("a:hover{color: white !important; background-color: none !important; -o-transition:.0s !important; -ms-transition:.0s !important; -moz-transition:.0s !important; -webkit-transition:.0s !important;} img { border: 0; }");
GM_addStyle("#os_nav ul li:hover{color: white !important; background-color: #000000; !important; -o-transition:.0s; -ms-transition:.0s; -moz-transition:.0s; -webkit-transition:.0s;} img { border: 0; }");

GM_addStyle("td.thread{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle(".thead{color: white !important; background-color: black !important; border: 1px solid #a7a7a7 !important;} img { border: 0; }");
GM_addStyle(".tborder{color: white !important; background-color: #101010 !important; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("textarea{color: white !important; background-color: #2f2f2f !important;} img { border: 0; }");
GM_addStyle("blockquote{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle("blockquote cite {color: white !important; background-color: #2f2f2f !important; border: 1px solid #ababab;} img { border: 0; }");

GM_addStyle(".trow_sep{color: white !important; background-color: #2f2f2f !important; border: 1px solid #949494 !important;} img { border: 0; }");

//GM_addStyle(".codeblock{color: white; background-color: black !important;} img { border: 0; }"); //BUGGY SO FLONK GAVE ME THIS
GM_addStyle(".codeblock.codeblock{color: white; background-color: black !important;} img { border: 0; }"); //flonks css override thingy
GM_addStyle(".post_head{color: white !important; background-color: black !important;} img { border: 0; }");
GM_addStyle(".post_controls{color: white !important; background-color: #414141 !important;} img { border: 0; }");
GM_addStyle(".post_content .signature{color: white !important; background-color: #373737 !important;} img { border: 0; }");



GM_addStyle("a.button:active{color: white; background-color: #afafaf !important;} img { border: 0; }");
GM_addStyle("a.button:visited{color: white; background-color: #afafaf !important ;} img { border: 0; }");
GM_addStyle("a.button:hover{color: white; background-color: #afafaf !important;} img { border: 0; }");
GM_addStyle("a.button:link{color: white; background-color: #afafaf !important;} img { border: 0; }");



GM_addStyle(".tcat{color: white; background-color: #3c3c3c !important;} img { border: 0; }"); //forumteampage
GM_addStyle(".proi{color: white; background-color: black !important;} img { border: 0; }"); //insidepplsforumpages
GM_addStyle(".pcss3t > label{color: white; background-color: black !important; border: 1px solid #ffffff !important;} img { border: 0; }"); //insidepplsforumpages

GM_addStyle(".navMenu{color: white; background-color: rgba(62, 62, 62, 0.8);} img { border: 0; }");

GM_addStyle("td.trow1{background-color: black !important; text-shadow: none !important; font-size: 100%; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("td.trow2{background-color: black !important; text-shadow: none !important; font-size: 100%; border: 1px solid black !important;} img { border: 0; }");
GM_addStyle("table{color: white !important; } img { border: 0; }");

GM_addStyle(".ajax_mark_read{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");
GM_addStyle("#chatbar{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }"); //forumbottochatremove
GM_addStyle(".expcolimage{color: white; background-color: black; visibility: hidden; height: 0px; width: 0px; margin: 0; padding: 0; pointer-events: none;} img { border: 0; }");

GM_addStyle(".tfoot{background-color: #4a4a4a !important;} img { border: 0; }");
GM_addStyle(".trow1{background-color: #252525 !important; text-shadow: none !important;} img { border: 0; }");

GM_addStyle("a:link{color: #999999 !important;} img { border: 0; }");
GM_addStyle(".post .post_head span.post_date{color: white !important;} img { border: 0; }");
GM_addStyle("a:visited{color: #999999 !important;} img { border: 0; }");
GM_addStyle(".smalltext{color: #cecece !important;} img { border: 0; }");
GM_addStyle("#content{background-color: rgba(23, 23, 23, 0.7) !important;} img { border: 0; }");

GM_addStyle("#footer .upper{background-color: black !important; border-top: 1px solid #9a9a9a !important; border-bottom: 1px solid #9a9a9a !important} img { border: 0; }");
OK, I actually easily fixed the things I felt needed to be fixed. Here it is if anyone else wants to use it.
Pages: 1 2