The Community Forums

Interact with an entire community of cPanel & WHM users!
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Editing CSS for Top Frame only

Discussion in 'User Experience' started by medfordite, Aug 10, 2013.

  1. medfordite

    medfordite Member

    Joined:
    Dec 13, 2011
    Messages:
    18
    Likes Received:
    0
    Trophy Points:
    1
    cPanel Access Level:
    Root Administrator
    I have two installations of WHM and one of the DNS Only for my hosting environment. I sometimes need to go into the WHM or DNS to make changes, or whatnot. I would like to be able to edit the CSS for the top frame only above the logo so when I switch to the tab, I can know based on the color of which server I am in (Yes I know it says in the line, but a quick color glance works better for me).

    In the example below, it would be the line above the "BOW" logo:

    /http://s178.photobucket.com/user/itsme5379/media/example.png.html

    I have cloned the original theme to work on this. I am using Firebug and have located the

    .informationWrapper {

    portion of the CSS but am not able to locate which file it is in so I can manipulate the color of the bar.

    And to answer any questions - I know that the word BOW is good enough for visual identification, but also the top bar is where my eyes are drawn to first when changing tabs. (center of it) as below:

    /http://s178.photobucket.com/user/itsme5379/media/capture2.png.html

    This is only a local browser edit and not the file edit so any changes will be lost upon reload.
     
  2. cPanelMichael

    cPanelMichael Forums Analyst
    Staff Member

    Joined:
    Apr 11, 2011
    Messages:
    30,854
    Likes Received:
    676
    Trophy Points:
    113
    cPanel Access Level:
    Root Administrator
    Hello :)

    We do not currently support custom theme or localization efforts for WHM. I was not able to find any documentation on the specific aspect of the WHM theme you are attempting to modify, but I do see that the template files are located in:

    Code:
    /usr/local/cpanel/whostmgr/docroot/templates
    I will leave this thread open for others to add their input.

    Thank you.
     
  3. kdean

    kdean Well-Known Member

    Joined:
    Oct 19, 2012
    Messages:
    262
    Likes Received:
    12
    Trophy Points:
    18
    Location:
    Orlando, FL
    cPanel Access Level:
    Root Administrator
    You may want to find a Firefox Add-on that allows you to modify the css styles of a site in your browser only. I use a similar extension in Safari. Then it would just apply your css modifications on top of the existing styles whenever you go to the site allowing you to make it look different. I'm not as familiar with Firefox Add-ons or I'd point you to one, but I'm sure they exist.
     
  4. MikeLewin

    MikeLewin Member

    Joined:
    Dec 1, 2011
    Messages:
    15
    Likes Received:
    0
    Trophy Points:
    1
    cPanel Access Level:
    Root Administrator
    In case anyone else is still Googling for this as I was.

    Firstly, I think WHM should make this a bit more obvious for those of us who do manage more than one installation.. Having different color schemes helps differentiate and avoid mistakes

    Anyway -

    The CSS files to change are here

    Top frame - /usr/local/cpanel/whostmgr/docroot/templates/menu/top_frame.min.css
    2 bar styles are - .informationWrapper (top) and .navigationContainer (2nd, where logo, etc is)

    Left (menu) frame - /usr/local/cpanel/whostmgr/docroot/templates/menu/command.min.css
    There are several styles that affect the left frame -
    I just searched for background: and background-color: references - made changes, saved and hit refresh in WHM

    Content (right) frame - /usr/local/cpanel/whostmgr/docroot/templates_menu/unified_optimized.css
    I just added body {background-color:#efe;} before the first entry (.grid-container) after the copyright stuff

    Hope that helps someone..

    Mike
     
Loading...

Share This Page