NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name GroupBox Enhancements
// @namespace http://mrprocom.github.io
// @description Improves the look of GroupBox
// @author Mrprocom
// @license MIT
// @updateURL https://openuserjs.org/install/Mrprocom/GroupBox_Enhancements
// @updateURL https://openuserjs.org/meta/Mrprocom/GroupBox_Enhancements.meta.js
// @include http://groupbox.com/*
// @version 1.8
// @grant none
// ==/UserScript==
//Change the font of the whole website to Arial
function changeFont(){
//Assign the <body> tag to bodyTag
var bodyTag = document.getElementsByTagName("body");
//Change the font of bodyTag to "Arial"
bodyTag[0].style.fontFamily = "Arial";
}
//Change the color of the title of the group to black
function changeTitleColor(){
//Assign the title of the group to title
var groupTitle = document.getElementById("ctl00_ctl00_cphTemplate_menus_wrapper_title");
//Change the font color of groupTitle to black
groupTitle.style.color = "black";
}
//Change order of events (like "ABC has joined the group. 12:00:00 PM 01-Jan-2015") from [<Username> <Action> <Date>] to [<Date> <Action> <Date>] and make it bold
function changeEventOrder(){
//Assign the element that contains the events to events
var events = document.getElementsByClassName("newsFeedText");
//Add a zero at the begining of the date (for example, "3:00:00 PM" is going to be "03:00:00 PM") and add 4 spaces between the date and the username
for (i = 0; i < events.length; i++){
if(events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML.length == 25){
events[i].getElementsByTagName("span")[0].innerHTML += " ";
} else {
events[i].getElementsByTagName("span")[0].innerHTML += " ";
events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML =
"0" + events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML;
events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML =
events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML.slice(0, 1) +
events[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].innerHTML.slice(3);
}
//Change the order of the events
events[i].insertBefore(events[i].getElementsByTagName("span")[0], events[i].getElementsByTagName("a")[0]);
//Make events bold
events[i].style.fontWeight = "bold";
}
}
//Change smileys ( :), :D, :P, ;), :O, :P, B), >:(, :$, :S, :(, :'(, :|, 0:), <3 and </3 only ) Note: these smileys are from an app called kik
function changeSmileys(){
//Assign all images in the webpage to allImages
var allImages = document.getElementsByTagName("img");
//Use the "allImages" variable to find smileys and change their source. All if statements in each case will change the width and height of the smiley to 19px if the smiley doesn't have a width/height attribute.
for(i = 0; i < allImages.length; i++){
switch(allImages[i].src){
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emsmile.gif":
allImages[i].src = "http://i.imgur.com/h2Sjkp9.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emteeth.gif":
allImages[i].src = "http://i.imgur.com/jYfXmHi.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emwink.gif":
allImages[i].src = "http://i.imgur.com/uW8rWv2.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emsmileo.gif":
allImages[i].src = "http://i.imgur.com/YzPXJZM.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emsmilep.gif":
allImages[i].src = "http://i.imgur.com/7jbd0Bp.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emsmiled.gif":
allImages[i].src = "http://i.imgur.com/WgP4tmR.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emangry.gif":
allImages[i].src = "http://i.imgur.com/5rali41.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emembarrassed.gif":
allImages[i].src = "http://i.imgur.com/EtE7wbr.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emcrook.gif":
allImages[i].src = "http://i.imgur.com/AMrQdfj.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emsad.gif":
allImages[i].src = "http://i.imgur.com/sc36V8S.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emcry.gif":
allImages[i].src = "http://i.imgur.com/mDnS8zX.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emdgust.gif":
allImages[i].src = "http://i.imgur.com/UpWAm2f.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emangel.gif":
allImages[i].src = "http://i.imgur.com/aCAFCOA.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emlove.gif":
allImages[i].src = "http://i.imgur.com/OdrVzO7.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
case "http://groupbox.com/CuteSoft_Client/CuteEditor/Images/emunlove.gif":
allImages[i].src = "http://i.imgur.com/VrUFRdq.png";
if(allImages[i].hasAttribute("width") === false || allImages[i].hasAttribute("height") === false){
allImages[i].width = 19;
allImages[i].height = 19;
}
break;
}
}
}
//Change the position and the size of the WYSIWYG Editor
function changeEditorLayout(){
//Assign the WYSIWYG editor and some other parts near it to some variables
var wysiwygPart = document.getElementById("ctl00_ctl00_cphTemplate_BodyContent_upQuickPost");
var pageNumPart = document.getElementById("ctl00_ctl00_cphTemplate_BodyContent_panPagingBottom");
var checkPostPart = document.getElementById("ctl00_ctl00_cphTemplate_BodyContent_lbRefresh");
var mainPagePart = document.getElementById("ctl00_ctl00_cphTemplate_BodyContent_panMain");
var wysiwygEditor = document.getElementById("CE_ctl00_ctl00_cphTemplate_BodyContent_txtMessage_ID");
var wysiwygEditorContainer = wysiwygEditor.parentNode.parentNode.parentNode;
//Make the WYSIWYG Editor part before the page number selector part
mainPagePart.insertBefore(wysiwygPart, pageNumPart);
//Remove the "Check for new posts" text because it's unnecessary
checkPostPart.remove();
//Change the value of the margin-left property to 0 (it's better that way)
wysiwygEditorContainer.style.marginLeft = 0;
//Change the size and the background image of the WYSIWYG Editor (changing the whole style attribute of the element is the only working way for some reason)
wysiwygEditor.style =
"background-color: rgb(244, 244, 243); border-color: rgb(221, 221, 221); border-width: 1px; border-style: solid; height: 200px; width: 1297px; background-image: url('http://i.imgur.com/gj3o9eA.png');";
}
//Modify the look of the WYSIWYG Editor
function changeEditorLook(){
//Target some parts of the WYSIWYG Editor and make some variables equal to them
var wysiwygEditorTopToolbar = document.getElementsByClassName("CuteEditorGroupMenu")[0];
var resizeButton = document.getElementsByClassName("CuteEditorBottomBarContainer")[0].firstChild.firstChild.firstChild.lastChild;
var wysiwygTextBox = document.getElementById("CE_ctl00_ctl00_cphTemplate_BodyContent_txtMessage_ID_Frame");
var wysiwygEditorIconSeparator = document.getElementsByClassName("separator");
//Remove the ability to resize the WYSIWYG Editor using the resize button
resizeButton.remove();
//Remove the background image of the top toolbar of the WYSIWYG Editor
wysiwygEditorTopToolbar.style = "width: 1290px; border: none; background-image: url(\"\");"
//Remove borders from the text box of the WYSIWYG Editor
wysiwygTextBox.style = "background-color: White; border: none; height: 147px; width: 100%; display: block;";
//Remove padding from the text box of the WYSIWYG Editor
wysiwygTextBox.parentNode.style = "height:100%; padding: 0;";
//Remove all line separators (the ones that devide the icons of the top toolbar of the WYSIWYG Editor)
for(i = 0; i < wysiwygEditorIconSeparator.length; i++){
wysiwygEditorIconSeparator[i].remove();
}
//Remove the final two line separators (two line separators will remain for some reason)
wysiwygEditorIconSeparator[0].remove();
wysiwygEditorIconSeparator[0].remove();
}
//Call all functions
changeFont();
changeTitleColor();
changeEventOrder();
chahgeSmileys();
changeEditorLayout();
changeEditorLook();