Jump to content
Paul aka Aurbano

Simpler / clearer theme for BBT chat room

Recommended Posts

Hi everybody,

I've been thinking about giving the room my own personal touch as I often found my self during the last few months having difficulties with the small chat and all the messages... Short Story  I aimed for this goals :

  • Giving some more space for the main chat
  • Reduce the tab selection section in the middle of the column so that it does not overflow in several lines
  • Give some clean icons that clearly identify the content while keeping the tooltip
  • Hide the Alert Panel while keeping it accesible using the mouse over it (autohide)
  • Change the font for a readable one with a smaller size as I use to have the chat in a 40" TV

The final result is this ( original colors on the right, darker theme on the left) :

chat.thumb.jpg.3033aa77ffc66ac2367f428614ea0055.jpg

 

If interested in getting more room for the main chat, just install Stylus and Darkreader (if you like the dark  theme ) plugins on your browser :

After the easy installation, just go to the top right cornor of your browser and click on the "S" then on the "create new style option" while being in the tab of the chatroom. Copy the CSS text that you can find attached to this post and then paste it in the editor area. Check the name you want to give to this style on the upper left corner and the URL that should be monitored : https://protradingroom.com

new-stylus.jpg.4a3df2319f453839052d6354436d9753.jpginput.thumb.jpg.7f75856c65e957432e37ec91937192aa.jpg

 

 

Save  the changes and  go back to the  room. If you want to activate the dark theme just go to the DarkReader plugin and manage  your settings ...

Hope anyone finds this usefull.

Keep it green !

@Paul aka Aurbano

 

2021-12-13 UPDATE : update tab icons

2021-04-07 UPDATE : added few changes to fix tickers column on bezinga news, with bullet points, and a better line jump management >> ending in better reading ... this feature was suggested by @Justin and @Alastair ... hope it helps many people !!

20210407-183652.thumb.jpg.9cd35d3644b62755ddf359f09b0f90d9.jpg

 

2021-04-09 UPDATE : added color / background highlighter on ticker symbols starting with $

20210409-103115.jpg.8ed3a16a61e70112a7eba2faf3d9e616.jpg

 

 

 

css.txt

Edited by Paul aka Aurbano
update
  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

This is freaking amazing @aurbano! Just installed it 🙂

I already had Stylus running for other sites. Updating/beautifying things to be more efficient and look better is my jam!

  • Like 1

Share this post


Link to post
Share on other sites
20 hours ago, Andrew Aziz said:

wow, interesting, thanks aurbano! I will forward this to the developer of the chat.

Thanks @Andrew Aziz  ... as it happens, I contacted Sebastian on the chat to let him know about this post, and after a long talk, we realized that we now live 30min appart from each other !! we plan to meet as soon as the covid19 restrictions go away 🙂 LOL anything I can do to improve this awesome community !

Share this post


Link to post
Share on other sites
17 hours ago, Justin said:

This is freaking amazing @aurbano! Just installed it 🙂

I already had Stylus running for other sites. Updating/beautifying things to be more efficient and look better is my jam!

I thought that I was the only one customization maniac around hahahaha I use Stylus a lot to custom my favourites websites when I want them to work better. Check this custom dark theme I wrote for FinViz

https://userstyles.org/styles/164469/finviz-general-dark-theme

Share this post


Link to post
Share on other sites
1 hour ago, aurbano said:

I thought that I was the only one customization maniac around hahahaha I use Stylus a lot to custom my favourites websites when I want them to work better. Check this custom dark theme I wrote for FinViz

https://userstyles.org/styles/164469/finviz-general-dark-theme

Oh wow, very nice!

I'm currently trying to see if I can move the whole chat to the right side of the screen....

Share this post


Link to post
Share on other sites
1 hour ago, Justin said:

Oh wow, very nice!

I'm currently trying to see if I can move the whole chat to the right side of the screen....

man ! that is too easy to be a problem ... add this 3 lines to the end of the CSS style and use the width attribute to properly adjust the chat to your screen aspect ratio 🙂 Enjoy !

/* move chat to the right */
#chatAlertsDiv { position:absolute; right:0px; top:0px; width:18%; }
#presentationHolderDiv.l-cell { position:absolute; left:0px; width:82%; }

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Aurbano. A million thks.

 

Used both FinViz and Chat room styles......perfecto. U saved an old mans eyes with the chat styles man its so sweet. 

 

Font is chat are perfect, colors r great,,layout with sliding top box is amazing man u too stylish. Going to use this tool more often

 

  • Like 1

Share this post


Link to post
Share on other sites

Aurbano,

U think u could create or guide on a new custom style for theses forum pages ?  White is too bright on eyes.

 

 

Share this post


Link to post
Share on other sites
On 4/27/2020 at 4:38 PM, Alastair said:

Aurbano,

U think u could create or guide on a new custom style for theses forum pages ?  White is too bright on eyes.

@Alastair you don't need to build up anything special if you just installed the DarkReader plugin for your browser and activate it in the forum. It will all go easy in the eyes just fine.

Capture-20200430-052827.jpg

Share this post


Link to post
Share on other sites

Aurbano,

This week my chat room style stopped working perfectly. See pic attached.

Over this week I noticed:

1. Sliding Moderator chat no longer slides

2.  Two or three chars are cut off, in the margin of chat display area (See yellow area in attached)

Was looking in code but did not find anything tht stands out as  the problem.  Can u give me some guidance on how to fix to original pls.

Did u also have this prob after room was "upgraded" ?

 

 

 

Chat 2020-07-16 074850.png

Share this post


Link to post
Share on other sites

Due to last updates in the chatroom, the dark conpact theme with icon tabs that I designed stop working .... obviously, no ones fault 🙂 hehehe

I did manage to fix most of the work ... watch pictures attached and download the new CSS style file ... go to the top of the thread in this page to watch how to install this chatroom feature 😉

Enjoy ! any updates and fixed will be posted in the thread in the future.

 @Andrew Aziz @Thor @Justin  @Alastair

Capture-20200717-115152.jpg

Capture-20200717-115150.jpg

protradingroom v2.txt

  • Thanks 1

Share this post


Link to post
Share on other sites
21 minutes ago, Paul aka Aurbano said:

Due to last updates in the chatroom, the dark conpact theme with icon tabs that I designed stop working .... obviously, no ones fault 🙂 hehehe

I did manage to fix most of the work ... watch pictures attached and download the new CSS style file ... go to the top of the thread in this page to watch how to install this chatroom feature 😉

Enjoy ! any updates and fixed will be posted in the thread in the future.

 @Andrew Aziz @Thor @Justin  @Alastair

Capture-20200717-115152.jpg

Capture-20200717-115150.jpg

protradingroom v2.txt 1.92 kB · 2 downloads

Awesome @Paul aka Aurbano!

Two things I noticed... which seem to be completely related to my selfish self!

The right hand side of the screen code doesn't seem to work anymore:

/* move chat to the right */
#chatAlertsDiv { position:absolute; right:0px; top:0px; width:18%; }
#presentationHolderDiv.l-cell { position:absolute; left:0px; width:82%; }

And as a moderator, we also have an Admin tab between Trades and Swing.... Any chance to make a special script just for that 😇 I can get whatever HTML/CSS you need, if you can't see it on your end!

Share this post


Link to post
Share on other sites

Hi @Justin,

As I told @Alastair a while ago, sadly moving the chat to the right side is not available any more due the new techonology used in the room. The only idea I can provide right now is to dettach the chat to another browser window and manage them at your needs.... We might need to talk to Sebastian in order to move the chat to the right side and I am not totally sure if that is possible with some Javascript code or maybe a modified flex design.

I don't have access to the code nor the tab that you administrators have, however .... what changes do you need ??

Regards,

Paul

Edited by Paul aka Aurbano
grammar error

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.