Mar 29 2016, 07:32 PM
(This post was last modified: Mar 29 2016, 08:44 PM by Call me when humans go extinct.)
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
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.
![[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)
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]](http://i.imgur.com/gmFp8Nn.png)
Reload the page and you are good to go.
![[Image: Photo%20collage-climate%20scenarios-glob...k=rcowMNf5]](https://www.noaa.gov/sites/default/files/styles/scale_crop_1120x534/public/thumbnails/image/Photo%20collage-climate%20scenarios-global%20climate%20reports-NOAA%20image-landscapes.jpg?itok=rcowMNf5)