HaxBall - Classic layout

Talk about haxball in here, maps, sides, players, tactics, anything related to the game.

HaxBall - Classic layout

Postby Haku » May 6th, 2019, 11:45 am

• HaxBall - Classic layout for browsers

Hello guys. Overwhelmed by nostalgia and evening boredom while playing HaxBall I thought I'd see what HTML5 would look like in an old school color theme like a flash version. To do this I downloaded Stylish plugin and had a little fun, which came out quite fine and look nice, so I decided to share this style for everyone. I'll add that it works only on browsers that support Stylish plugin.

You can download plugin directly from here:

Chrome
Stylish for Chrome

Firefox
Stylish for Firefox

Big advantage of this plugin is that it's not resourceful and we don't need adblock, everything works as it should.
Now I will describe how to do it all in order to make it look like in the images below.

Image
Image
Image

We download a plugin to which the link is above from an accessible web store for a given browser. In my case it will be Chrome, unfortunately I don't know how many browsers the plugin is compatible with, from what I know, it's definitely Maxthon and Mozilla. For those using incognito, it's important to enable the plugin also in this mode. To do this, click on the three vertically positioned (for chrome) dots at the top of the right side of the screen, then you will find a list of "more tools" which should expand to the left, where u will have more options to choose from, including the extensions we go to. We are in the extension options, we select the "yes" option allow in incognito, so that the plugin will also be active in private mode.

When we move on to the next stage, which is the style edit window, we only need to complete them by pasting in the code that removes banners and all the rest of the redundant elements.

But before you do, open the Stylish edit window and create a new style.

Image

Code:

Code: Select all
.rightbar {
display: none;
}

.header {
display: none;
}

.game-state-view .bar {
background: transparent !important;
}

.teamicon {
display: none;
}

.game-view>.bottom-section {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    background-color: #3c312b;
}

.stats-view {
    background-color: #3c312b;
    padding: 5px;
    margin: 0 5px;
    white-space: nowrap;
    flex: 0 0 100px;
    overflow: hidden;
    line-height: 1.5em;
}

.chatbox-view>.input input[type="text"] {
    color: white;
    background-color: #19111685;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    margin-right: 4px;
    flex-grow: 1;
    align-self: stretch;
    box-sizing: border-box;
}

.chatbox-view>.log p.notice {
    color: #f9817f;
}

.game-view>.bottom-section button {
    background-color: #29201f;
}

.dialog, .room-view>.container {
    background-color: #3c312b;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 5px;
}

.dialog button, .room-view>.container button {
    background-color: #24496700;
}

.settings-view .section .inputrow:nth-child(odd) {
    background-color: #222c3100;
}

.settings-view .section select {
    height: 25px;
    border: none;
    background-color: #19111685;
    margin-left: 10px;
}

.settings-view .section .inputrow>:not(:first-child) {
    background-color: #19111685;
    border-radius: 7px;
    margin: 2px 2px;
    padding: 0px 5px;
    display: inline-block;
}

.room-view>.container>.teams .player-list-view .list {
    flex: 1;
    background-color: #19111685;
    overflow-x: hidden;
    overflow-y: auto;
}

.dialog select, .room-view>.container select {
    border: 1px solid #19111685;
    background-color: #19111685;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: white;
    padding: 0px 5px;
}

.dialog .label-input, .room-view>.container .label-input {
    display: flex;
    background-color: #24496700;
    align-items: baseline;
    border-radius: 5px;
    padding: 3px 3px 3px 5px;
}

.dialog input, .room-view>.container input {
    color: white;
    background-color: #19111685;
    border: none;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #29201f;
}

.dialog>h1, .room-view>.container>h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px !important;
    padding-top: 6px;
    padding-bottom: 5px;
    border-bottom: 3px;
    border-bottom-color: #f98280;
    border-bottom-style: solid;
}

.landing-page .about-box {
    background: rgba(20, 30, 53, 0);
    padding: 20px 55px;
    padding-top: 30px;
    border-radius: 50px;
    margin-top: 40px;
    margin-bottom: 25px;
    text-align: center;
}

.dialog button, .room-view>.container button {
    background-color: #29201f;
}

.dialog .file-btn label, .room-view>.container .file-btn label {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background-color: #29201f;
    display: inline-block;
    cursor: pointer;
}

.roomlist-view>.dialog>.splitter .filters .bool, .room-view.roomlist-view>.container>.splitter .filters .bool {
    margin-right: 6px;
    padding: 0px 6px;
    background-color: #29201f;
    border-radius: 5px;
}

.dialog select, .room-view>.container select {
    border: 1px solid #19111600;
    background-color: #29201f;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: white;
    padding: 0px 5px;
}

.ps__thumb-y {
    background-color: #29201f;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 6px;
    right: 2px;
    position: absolute;
}

.roomlist-view>.dialog>.splitter>.list .separator, .room-view.roomlist-view>.container>.splitter>.list .separator {
    height: 2px;
    width: 100%;
    background-color: #f98280;
}

.game-state-view.restricted {
    background-color: #3c312b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landing-page .about-box .play-link {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: -40px;
    background: linear-gradient(#3c312b, #3c312bbf);
    border-radius: 200px;
    padding: 15px;
    font-size: 35px;
    font-weight: bold;
    display: block;
    text-align: center;
    width: 237px;
    color: white;
    border: 3px solid rgba(247,255,235,0.7);
    box-shadow: 0 0 0 3px #8da86b, 0 0 6px 6px rgba(0,0,0,0.33);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    transition: 0.1s linear
}

.replay-controls-view {
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
}

.replay-controls-view button {
    background-color: #29201f;
}

.replay-controls-view .timebar .bar {
    background-color: #29201f;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.rc-anchor-dark {
    background: #3c312b;
    color: #fff;
}

Copy all and paste the whole thing into the main window of style editions, complete the rest just like on this screen:

Image

In order for the bar to appear to u, click on "specify" underneath, the option is under the window where you should paste the code, then in "Appiles to" u set the option, as in the picture, that is URLs on the domain where you paste the address: http://www.haxball.com, and then on the left click save. As far thehax.pl website is concerned, if you add it to the list, u will have the same style in replays.

After you have done this, u should see this window in the main options:

Image

When you save this style and come to HaxBall, u will have a new layout in site, deleted unnecessary elements and so on.
I personally like this option and hope that one of u will check this alternative and also like it.

Thanks, cya!
  • 25

Last edited by Haku on August 12th, 2019, 10:10 am, edited 6 times in total.
Haku
 
Posts: 5
News Articles: 0
Reputation: 25

Joined: May 14th, 2018, 9:01 pm


Re: HaxBall - Classic layout for browsers

Postby STriker » May 6th, 2019, 4:51 pm

is there a way u can make the chat transparent so u could see more of the pitch?
  • 0

STriker
 
Posts: 95
News Articles: 0
Betting Coins: 50
Reputation: 6

Joined: April 13th, 2018, 12:10 pm

Position: Defensive Midfielder

Re: HaxBall - Classic layout for browsers

Postby Haku » May 6th, 2019, 5:22 pm

Yes, paste the code below into what you have above. In my opinion it looks on average.
If you have any more suggestions, let me know, I'll try to figure it out.

Code: Select all
.bottom-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent !important;
}
.chatbox-view>.input input[type="text"] {
    background: transparent !important;
    border: 1px solid white;
}
.chatbox-view>.input input[type="text"]:focus {
  border: 1px solid black;
}
.stats-view {
    background: transparent !important;
}
.bottom-section button {
    background: transparent !important;
    cursor: pointer;
}
.bottom-section button:hover {
  color: #ddd;
}
.bottom-section .ps__thumb-y {
    background: white;
}
.room-view {
    height: calc(100% - 160px);
}
  • 0

Haku
 
Posts: 5
News Articles: 0
Reputation: 25

Joined: May 14th, 2018, 9:01 pm


Re: HaxBall - Classic layout for browsers

Postby STriker » May 6th, 2019, 5:57 pm

just saw on youtube that the software is tracking your history and u can get hacked or ddos
  • 0

STriker
 
Posts: 95
News Articles: 0
Betting Coins: 50
Reputation: 6

Joined: April 13th, 2018, 12:10 pm

Position: Defensive Midfielder

Re: HaxBall - Classic layout for browsers

Postby Haku » May 6th, 2019, 6:48 pm

All I can do is deny what u're writing. Anyway, u can only run the plugin while playing HaxBall and then turn it off.
I've been using it for a year and nothing happened. The information you have is probably wrong.
  • 0

Haku
 
Posts: 5
News Articles: 0
Reputation: 25

Joined: May 14th, 2018, 9:01 pm


Re: HaxBall - Classic layout for browsers

Postby Anddy » May 6th, 2019, 6:54 pm

https://github.com/haxball/haxball-issues/issues/709

Can you do smth behind this idea or it's impossible atm ?
  • 0

Anddy
 
Posts: 133
News Articles: 0
Reputation: 254

Joined: October 4th, 2015, 5:54 pm


Re: HaxBall - Classic layout for browsers

Postby Haku » May 7th, 2019, 1:23 pm

To be honest, idk if I could anything like that, because I'm not a programmer and it would probably take me more time, the actions I did above are quite simple, only require a moment of time. However, if I try something, I will let u know.
  • 0

Haku
 
Posts: 5
News Articles: 0
Reputation: 25

Joined: May 14th, 2018, 9:01 pm


Re: HaxBall - Classic layout for browsers

Postby Anddy » May 7th, 2019, 6:51 pm

Thanks tho, very nice job
  • 0

Anddy
 
Posts: 133
News Articles: 0
Reputation: 254

Joined: October 4th, 2015, 5:54 pm


Re: HaxBall - Classic layout

Postby STriker » May 13th, 2019, 6:08 pm

Haku wrote:Yes, paste the code below into what you have above. In my opinion it looks on average.
If you have any more suggestions, let me know, I'll try to figure it out.

Code: Select all
.bottom-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent !important;
}
.chatbox-view>.input input[type="text"] {
    background: transparent !important;
    border: 1px solid white;
}
.chatbox-view>.input input[type="text"]:focus {
  border: 1px solid black;
}
.stats-view {
    background: transparent !important;
}
.bottom-section button {
    background: transparent !important;
    cursor: pointer;
}
.bottom-section button:hover {
  color: #ddd;
}
.bottom-section .ps__thumb-y {
    background: white;
}
.room-view {
    height: calc(100% - 160px);
}


i copy and paste both codes u sent and i changed some things like font size and chat bubble size but there is one thing i can't find out how to do, I want to see only 3 lines of the chatbox instead of 8 like i marked in this image: http://prntscr.com/no2c8w are u ablt to write me a code that does it?
  • 0

STriker
 
Posts: 95
News Articles: 0
Betting Coins: 50
Reputation: 6

Joined: April 13th, 2018, 12:10 pm

Position: Defensive Midfielder

Re: HaxBall - Classic layout

Postby STriker » May 13th, 2019, 6:08 pm

Haku wrote:Yes, paste the code below into what you have above. In my opinion it looks on average.
If you have any more suggestions, let me know, I'll try to figure it out.

Code: Select all
.bottom-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent !important;
}
.chatbox-view>.input input[type="text"] {
    background: transparent !important;
    border: 1px solid white;
}
.chatbox-view>.input input[type="text"]:focus {
  border: 1px solid black;
}
.stats-view {
    background: transparent !important;
}
.bottom-section button {
    background: transparent !important;
    cursor: pointer;
}
.bottom-section button:hover {
  color: #ddd;
}
.bottom-section .ps__thumb-y {
    background: white;
}
.room-view {
    height: calc(100% - 160px);
}


i copied and pasted both codes u sent and i changed some things like font size (from 14px to 10px) and chat bubble size, but there is one thing i can't find out how to do, I want to see only 3 lines of the chatbox instead of 8 like i marked in this image: http://prntscr.com/no2c8w are u able to write me a code that does it?
  • 0

STriker
 
Posts: 95
News Articles: 0
Betting Coins: 50
Reputation: 6

Joined: April 13th, 2018, 12:10 pm

Position: Defensive Midfielder


Return to General Haxball Discussion

Who is online

Users browsing this forum: No registered users and 2 guests