(wL) Forums

Full Version: How to hack the shoutbox with chrome
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Since riser is too lazy to update the forums, so I will show you how to hack it and make it look cool.

[Image: 8rfevkk.png]

First you need to use the chrome browser or any browser that is based on chromium. Install this chrome extension named Styler from chrome web store: https://chrome.google.com/webstore/detai...icon&hl=en
After you installed, the button of Styler [Image: VgG60YI.png] should be showing up on the top right of your chrome.

Go to war-lords.net, then press the  the "Styler" button.

Copy and paste the following code to the first textbox which labeled as "CSS":
Code:
.double-column-table .right-column {
 width: 280px !important;}
#content .right-column #shoutbox {
 margin-bottom:0}

#content > #shoutbox {
 background:#181818;}

#shoutbox .body {
 padding: 0 15px;}

#shoutbox input.text {
 padding: 10px 8px;
 width: 100%;
 box-sizing: border-box;
 border: none;
 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
 font-family: Arial, sans-serif;
 font-size: 12px;
 color: white !important;
 background-color: #2F2F2F;}

#shoutbox .window {
 overflow-y: scroll;
 background: #2F2F2F;
 border-top: 1px solid;
 border-bottom: 1px solid;
 border-color: #222;
 margin-left: -15px;
 margin-right: -15px;
 padding: 5px 5px;
 height: 500px!important;}

#shoutbox .panel {
 margin-top: 10px;
 margin-bottom: 10px;}

#shoutbox .data {
 display: table;
 width: 100%;
 font-size: 12px;}

#shoutbox .entry {
 display: table-row !important;
 width: 100%;
 transition: background-color 0.2s; }

#shoutbox .entry.new {
 background-color: rgba(255, 255, 100, 0.1);}

#shoutbox .avatar {
 padding-right: 10px !important;
 padding-top: 0 !important;
 width: auto;}

#shoutbox .avatar img {
 margin: 0 auto!important;
 vertical-align: middle!important;
 height: 30px;
 max-height: 30px !important;
 max-width:30px !important;
 width: 30px;
 border: solid 1px rgba(255, 255, 255, 0.1)!important;
 border-radius: 17px;
 box-shadow: 0 0 2px rgba(0, 0, 0, 0.1)!important;
 cursor: pointer!important;
 top: 12px;
 position: relative;}

#shoutbox .user {
 position: relative;
 text-align: left!important;
 white-space: nowrap;
 font-size: 10.5px;
 width: 74px;
 display: block !important;
 padding: 3px 0px 3px 1px !important;}

#shoutbox .user a:hover {
 text-decoration: none;}

#shoutbox .entry .text:after {
 content: " ";
 position: absolute;
 width: 0;
 height: 0;
 border: 11px solid;
 border-color: #222222 transparent transparent transparent;
 top: 0;
 left: -7.5px;}

#shoutbox .entry .text {
 background-color: #222222;
 color: white!important;
 width: auto!important;
 position: relative;
 padding: 6px 13px 16px 13px !important;
 border-radius: 0 15px 15px 15px;
 display: inline-block !important;
 min-height: 16px;
 min-width: 86px;
 word-wrap: break-word;}

#shoutbox .info {
 font-size: 10px !important;
 color: #AAA !important;
 white-space: nowrap !important;
 display: block !important;
 padding: 0px !important;
 height: 0px;
 width: 0px;
 position: relative;
 left: 13px;
 top: -17px;
 text-align: left!important;}

#shoutbox .mod {
 padding: 0px 5px!important;
 color: #AAA!important;
 text-decoration: none!important;
 display: inline-block!important;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: 0!important;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 position: absolute;
 font-weight:normal!important;}

#shoutbox .edit {
 padding-top:10px;
 left:62px;}

#shoutbox .del {
 left:79px;
 padding-left: 2px !important;}

#shoutbox .edit:before {
 content:"";
 font-size: 12px !important;}

#shoutbox .del:before {
 content:"";
 font-size: 12px !important;}

#shoutbox .ip {
 display:none;}

Then copy and paste the following code to the second textbox labeled as "JavaScript/jQuery":
Code:
$(document).ready(function(){$("#shoutbox").insertAfter("#content .right-column table:first");$("#content .right-column table:first").after("<br>");$('#shoutbox .window').scrollTop($('#shoutbox .window')[0].scrollHeight);});

Like this:

[Image: gmFp8Nn.png]

Reload the page and you are good to go.
i already added it to the site, thx nats