Feed Me Haxball

• HaxBall - Classic layout for browsers

Hello. 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 similar a flash version. To do this, I downloaded Stylus plugin. End result is great, so I decided to share this style for everyone.

You can download plugin directly from here:

Chrome
• Stylus for Chrome

Firefox
• Stylus for Firefox

Big advantage of this plugin is that it's 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.





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, 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.

Now we move on to the next stage, which will be to implement the style in browser.

We open a website where we can install the plugin with a one click.

• Click here •

On the website find install style button, when you click on it, the style will be available in your browser, that's all.

Now you can visit HaxBall and check out the new layout I have prepared. I hope you will be satisfied.

Thanks, cya!

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

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);
}

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

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.

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

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

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.

Thanks tho, very nice job

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?

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?