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

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, 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!
  • 25

Last edited by Haku on April 24th, 2023, 10:00 pm, edited 10 times in total.
Haku
 
Posts: 30
News Articles: 0
Reputation: 39

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: 121
News Articles: 0
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: 30
News Articles: 0
Reputation: 39

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: 121
News Articles: 0
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: 30
News Articles: 0
Reputation: 39

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: 245
News Articles: 0
Reputation: 537

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: 30
News Articles: 0
Reputation: 39

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: 245
News Articles: 0
Reputation: 537

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: 121
News Articles: 0
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: 121
News Articles: 0
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 8 guests