Please whitelist cPanel in your adblocker so that you’re able to see our version release promotions, thanks!

The Community Forums

Interact with an entire community of cPanel & WHM users!

In Progress [CPANEL-23616] Edit WebHost Manager Side Bar Style?

Discussion in 'User Experience' started by durangod, Oct 21, 2018.

  1. durangod

    durangod Well-Known Member

    Joined:
    May 12, 2012
    Messages:
    452
    Likes Received:
    28
    Trophy Points:
    78
    cPanel Access Level:
    Website Owner
    Hi, is there a way to edit the side bar style, im not sure where the css file is.

    The reason is that my eyes and brain confuse the current color of the drop down active item highlight background as part of a menu header and having it a different color would make it much easier for me to find where i am on the menu.

    i know the css to modify is

    Code:
    li.highlighted.activePage {
    Images included current color and custom color

    whm_cssbar.jpg


    is /var/cpanel/whmtheme file like an override file. Its only like 1byte in size and when i open it, its empty. If that is an override file i can just put my custom code for that css element in there and it will load. Does anyone know? thanks

    I did find the theme editor in whm but it downloads the file as a tar and i cant unzip that on my pc so i cant use the file. But i did look at all the css files included in my theme in:

    /usr/local/cpanel/whostmgr/docroot/themes/[my_theme_name]/css but that value is not in any of the css files in my new cloned theme. I also checked the css files in the mytheme dir before going to the css dir and nothing.

    I assume this is the master css of some kind and not the compiled version but i did find the code in this file

    /usr/local/cpanel/whostmgr/docroot/styles/legacy.cmb.css but im not sure if this is the file to make the change or not, plus i know there is a "min" version of this file and i assume whm probably loads that instead.

    wait wait that element is a bootstrap css command, i recognize it from when i did my bootstrap site this year.

    this is bootstrap so i need to override the bootstrap command, and i can do that by adding it to my css file in my theme i think.

    Code:
    li.highlighted.activePage
    well at the top of my theme css file called uniform.css (already present) i added this and then switched to my theme, but it dont work...

    Code:
    .sidebar ul.sub li.activePage:hover,
    .sidebar ul.sub li.activePage a:hover,
    .sidebar .categoryHeader.activePage:hover,
    .sidebar .categoryHeader.activePage.highlighted,
    .sidebar ul.sub li.highlighted.activePage {
      background: none;
      text-decoration: none;
      text-shadow: none;
      background-color: #21c400;   /* green */
    }
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #1 durangod, Oct 21, 2018
    Last edited: Oct 21, 2018
  2. durangod

    durangod Well-Known Member

    Joined:
    May 12, 2012
    Messages:
    452
    Likes Received:
    28
    Trophy Points:
    78
    cPanel Access Level:
    Website Owner
    Well took me a bit of testing to find out that the templats in /usr/local copy everything over to the /home/virts by same path files. So i did some testing with custom css file names and then found the custom whm doc page but then realized it was for vesion 64 and earlier. Then finally found this

    Guide to cPanel Interface Customization - The styles.css File - Developer Documentation - cPanel Documentation

    so then changed the custom css file name to styles.css, changed to x theme, then back to custom theme, then cleared my cache from cloudflare. And still nothing... :(

    I dont want to have to change the core file.

    Anyone know how to do this... ?
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. cPanelLauren

    cPanelLauren Forums Analyst II Staff Member

    Joined:
    Nov 14, 2017
    Messages:
    6,476
    Likes Received:
    506
    Trophy Points:
    263
    Location:
    Houston
    cPanel Access Level:
    DataCenter Provider
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  4. durangod

    durangod Well-Known Member

    Joined:
    May 12, 2012
    Messages:
    452
    Likes Received:
    28
    Trophy Points:
    78
    cPanel Access Level:
    Website Owner
    Hi thanks for the link, certainly leads in the right direction but it quickly goes from whm specific to all cpanel style mods which is not what i want. I know the name of the file but its the master file and i dont want to change that.

    The master css file is /usr/local/cpanel/whostmgr/docroot/styles/master-ltr.cmb.min.css and the code inside is

    Code:
    li.highlighted.activePage
    i just need to change the background color to green. Its way down almost to the end about 43 lines from the bottom. Since this is a min file there is no line number for that code.

    This is a ltr version of the file so i am guessing that this file is left to right and the other file (rtl) is a right to left version.

    The problem is that creating a new whm theme does not include that file. As as the link you showed me says

    Theme Manager - Version 76 Documentation - cPanel Documentation

    so i guess i am forced again to edit a core file. :(

    So i changed in the min.css file and now its green, however its only green for that one section of the sidebar nav list, all the other sections of the nav list are the old color. So i guess im still looking for the main css here.

    OK so it looks like the sections off the sidebar nav might be split css wize between the master file listed above in this text and the legacy css.

    This css file for the other section of the sidebar shows, master-legacy.cmb.min.css
    which is alsy in /usr/local/cpanel/whostmgr/docroot/styles/

    there is a min.css version and a normal css version of this file. In the normal css file the code is on line 2008 and the background color is on 2012. On the min css version youll just have to find it, its probably 3/4 down the css line length, if you wrap it its about 45 lines from the end.

    But sadly changing this value also does not cover all the sidebar content...
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #4 durangod, Oct 23, 2018
    Last edited: Oct 23, 2018
  5. cPanelLauren

    cPanelLauren Forums Analyst II Staff Member

    Joined:
    Nov 14, 2017
    Messages:
    6,476
    Likes Received:
    506
    Trophy Points:
    263
    Location:
    Houston
    cPanel Access Level:
    DataCenter Provider
    Hi @durangod

    After some thought and discussion with others on this, I went ahead and opened an internal case for this CPANEL-23616 - potential accessibility issues with WHM X theme. In the case, I asked for either a separate theme or a way to modify the nav bar in the way you requested.

    I'll update you when I have any updates to the internal case here.

    Thanks!
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  6. durangod

    durangod Well-Known Member

    Joined:
    May 12, 2012
    Messages:
    452
    Likes Received:
    28
    Trophy Points:
    78
    cPanel Access Level:
    Website Owner
    Thank you so much, that is super duper nice of you to do that :)
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    cPanelLauren likes this.
  7. rpvw

    rpvw Well-Known Member

    Joined:
    Jul 18, 2013
    Messages:
    1,088
    Likes Received:
    442
    Trophy Points:
    113
    Location:
    Spain
    cPanel Access Level:
    Root Administrator
    @cPanelLauren thank you so much for caring about accessibility.

    I have a colleague who is profoundly colour blind and for whom anything red, orange, yellow or green all appear as a shade of grey.

    Just think about all the things you use on a computer every day without thinking about - he can't tell if a monitor is on, in standby or if it has been switched off. He cant see the red wavy underline of misspelt words - and many of the symbols we unconsciously use every day needs extra careful looking at to make sure of their meaning.

    Any consideration for colour blindness, or ease of accessibility, however small, is a giant step in the right direction.

    Thank you @durangod for initiating this discussion, and thank you Lauren and cPanel for taking it seriously.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    cPanelLauren likes this.
  8. cPanelLauren

    cPanelLauren Forums Analyst II Staff Member

    Joined:
    Nov 14, 2017
    Messages:
    6,476
    Likes Received:
    506
    Trophy Points:
    263
    Location:
    Houston
    cPanel Access Level:
    DataCenter Provider
    Hi @durangod


    Of course! We want everyone to have a good experience and chances are if you are having an issue seeing it correctly others are too!

    @rpvw thanks, that means a lot! It really is a big deal for us here internally as well as we have quite a few folks who have varying degrees of color blindness along with other accessibility-related issues.

    We also came up with another idea you might try out until the devs address that case, have you ever looked at this addon for Firefox? Stylish - Custom themes for any website – Get this Extension for Firefox (en-US) I'm not sure if there's an equivalent for other browsers but if you tell me which one you use the most I'll see if I can find something of the same ilk for you.

    Thanks!
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  9. durangod

    durangod Well-Known Member

    Joined:
    May 12, 2012
    Messages:
    452
    Likes Received:
    28
    Trophy Points:
    78
    cPanel Access Level:
    Website Owner
    That is certainly thinking outside the box lauren and thank you for the great help. I dont use extensions because they are here today and gone tomorrow and also they become outdated and insecure so i just stopped using them at all many years ago.

    However i did finally find the file that completes most of the sidebar active color setting. So in a nutshell there are 4 files to edit to change the color of the active item on the sidebar.

    Luckily they are all in the same dir. /usr/local/cpanel/whostmgr/docroot/styles/

    inside all of them you are looking for the default color of 293a4a and the css code of
    Code:
    li.highlighted.activePage
    Those filenames are:

    legacy.cmb.css
    legacy.cmb.min.css

    master-legacy.cmb.min.css

    then choose one of these depending on your country (one is right to left rtl, the other is left to right ltr) so for the USA we read left to right for example.

    master-ltr.cmb.min.css left to right
    master-rtl.cmb.min.css right to left

    Those changes will take care of most of the sidebar with the exception of the plugin section on the very bottom. You will notice that there is no active page highlight to that section at all. That is because the css class assigned to each section item is

    Code:
    class="highlighted"  and not  class="highlighted.activePage"  
    which should probably be considered a non-fatal css bug since its not assigned the same class as the other sections, lets hope that cpanel fixes that going forward.

    In this case youll have to find the tmpl file and change the css assignment to the other class. However, it appears this process is done totally via js which is why this section is different. I believe this is the js file that assigns the highlighted class to the plugin section:

    /usr/local/cpanel/whostmgr/docroot/templates/menu/navigation.cmb.js

    So i suspect this process is either the new process or the old process and one process is being updated while the other process is under the "if it works dont fix it" category.

    I got most of it done, but im not messing with js files.... I can live without the plugin section being changed.

    In the end if online games, cellphones, other media, and other websites can embrace and offer something for anyone in any stage of color blindness, then i believe cPanel also needs to embrace the need and come up with a feature to help cPanel/WHM users also who face the same issues. :)

    Hope this helps someone... :)
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
    #9 durangod, Oct 25, 2018
    Last edited: Oct 25, 2018
Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice