Paul aka Aurbano 80 Posted March 31, 2020 (edited) 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) : 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 : Chrome: Stylus: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Dark-reader: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=es Firefox: Stylus: https://addons.mozilla.org/es/firefox/addon/styl-us/?src=search Dark-reader: https://addons.mozilla.org/es/firefox/addon/darkreader/ 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 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 !! 2021-04-09 UPDATE : added color / background highlighter on ticker symbols starting with $ css.txt Edited December 13, 2021 by Paul aka Aurbano update 5 1 Share this post Link to post Share on other sites
Andrew Aziz 97 Posted April 1, 2020 wow, interesting, thanks aurbano! I will forward this to the developer of the chat. 1 Share this post Link to post Share on other sites
Justin 262 Posted April 1, 2020 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! 1 Share this post Link to post Share on other sites
Paul aka Aurbano 80 Posted April 2, 2020 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
Paul aka Aurbano 80 Posted April 2, 2020 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
Justin 262 Posted April 2, 2020 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
Paul aka Aurbano 80 Posted April 2, 2020 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%; } 1 1 Share this post Link to post Share on other sites
Alastair 110 Posted April 13, 2020 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 1 Share this post Link to post Share on other sites
Alastair 110 Posted April 27, 2020 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
Paul aka Aurbano 80 Posted April 30, 2020 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. Share this post Link to post Share on other sites
Alastair 110 Posted April 30, 2020 Got it, thks sir Share this post Link to post Share on other sites
Alastair 110 Posted July 16, 2020 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" ? Share this post Link to post Share on other sites
Paul aka Aurbano 80 Posted July 17, 2020 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 protradingroom v2.txt 1 Share this post Link to post Share on other sites
Justin 262 Posted July 17, 2020 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 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
Paul aka Aurbano 80 Posted July 17, 2020 (edited) 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 July 17, 2020 by Paul aka Aurbano grammar error Share this post Link to post Share on other sites
