Mar 29 2016, 07:32 PM
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]](http://i.imgur.com/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]](http://i.imgur.com/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":
Then copy and paste the following code to the second textbox labeled as "JavaScript/jQuery":
Like this:
![[Image: gmFp8Nn.png]](http://i.imgur.com/gmFp8Nn.png)
Reload the page and you are good to go.
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
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:
Reload the page and you are good to go.