How do I change the colour on the background in Staff-CP?

Discussion in 'Style and design' started by Karl Metum, Jan 12, 2012.

  1. Karl Metum

    Karl Metum Established Member

    I need help with change the colours on our helpdesk. How do i change the colours where the arrows are pointing at?
    Screenshot:

    [​IMG]
  2. tallen-bt

    tallen-bt Established Member

    How do you change the status column text? Our helpdesk puts the font as the status color so I can't see it.

    EDIT: Nvm, I figured it out.
  3. Karl Metum

    Karl Metum Established Member

    Try to change your browser.. It's working fine over here.
  4. Karl Metum

    Karl Metum Established Member

  5. Karl Metum

    Karl Metum Established Member

    so.. The question is still unanswered :p "How do i change the colours where the arrows are pointing at?"
  6. Gary McGrath

    Gary McGrath Kayako Staff Staff Member

    Hi Karl,

    To edit the color of these, you need to edit the css.tpl file in __swift\themes\admin_default

    For the rows, look for:

    .gridrow1
    {
    BACKGROUND-COLOR: #f2ebde;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow2
    {
    BACKGROUND-COLOR: #ffffff;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow3
    {
    BACKGROUND-COLOR: #f4ece0;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow4
    {
    BACKGROUND-COLOR: #eee6d9;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }

    And then for the arrow at the bottom:

    .cpuicontainer {
    BACKGROUND-COLOR: blue;
    }

    Once you make the changes, you will not see it take effect until you rebuild your cache from the menu option in the admin CP

    Gary
  7. Karl Metum

    Karl Metum Established Member

    Thank you Gary! You're the best.
  8. chrisrouse

    chrisrouse Reputed Member

    Karl,
    Assuming you see this, can you post a follow up for what your help desk looks like after you modified the colors? I'm interested to see what you did to it.
  9. Karl Metum

    Karl Metum Established Member

    Hi,

    I have actually not made any changes to the colors yet. Even though it's been a while.. :p
  10. Matthew Holko

    Matthew Holko Member

    Hi Garry,

    I am also trying to make some color changes. Ive checked your post and was going to edit that css.tpl file but couldnt find it.
    The structure that you show below is different. I dont have the admin_default folder and instead have just admin
    In that folder there is no css.tpl either

    I am running Kayako Fusion version 4.50.1636 has something changed since the newer version?

    -------------------

    Attached Files:

  11. Drew Keller

    Drew Keller Just one person in a world of millions.

    Matthew,

    The version you are on changed the structure of the folders.

    From a quick look you need to change the following;

    __swift\themes\__cp\css\grid.css for

    .gridrow1
    {
    BACKGROUND-COLOR: #f2ebde;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow2
    {
    BACKGROUND-COLOR: #ffffff;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow3
    {
    BACKGROUND-COLOR: #f4ece0;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    .gridrow4
    {
    BACKGROUND-COLOR: #eee6d9;
    COLOR: #000000;
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    }
    And
    __swift\themes\__cp\css\cpui.css

    for
    .cpuicontainer {
    BACKGROUND-COLOR: blue;
    }

    Dont forget to Rebuild your cache (Admin CP > Diagnistics > Rebuild Cache) after making the changes or you wont see your changes.
  12. Matthew Holko

    Matthew Holko Member

    kayako.jpg kayako.jpg Thanks for your reply Drew.
    Im trying to change the Users area in the Client Support Center.
    Do you know the location of the .css file that I have to change for that area?

    Ive put arrows in the three areas that I want to change the color off.
  13. Drew Keller

    Drew Keller Just one person in a world of millions.

    Matthew,

    The User interface is not in css files, it is all in the templates within the Admin CP.

    the items you are talkign about are in clientcss

    the search button is .searchbutton
    the blue bar is #toptoolbar (Color is an image) ("<{$_themePath}>images/navbarbackground.png") which is actually __swift/themes/client/images/navbarbackground.png
    the background is in .bodymain (background is an image) ("<{$_themePath}>images/mainbackground.gif") which is actually /__swift/themes/client/images/mainbackground.gif
  14. I am interested in making changes to the Staff CP. In the frontend I added a single css file to override the styles kayako has and we like that. On the front end that was easy, you just change the LINK REL tag in the for the CSS by going to the templates...

    Now, how to achieve the same for the Staff CP? is there a way to have a LINK REL CSS tag in the header of just one file to point to an external CSS file?

    EIDT: I use the CSS file to avoid having to merge updates on the Kayako files when upgrading... very important to be able to skip all that mombo-jumbo...
  15. Gary McGrath

    Gary McGrath Kayako Staff Staff Member

    Hi there,

    You would simply want to replace the staff CP css file, there is a css loader which loads all the css files from the relevant folder, so there is no link rel, it loads the css files in the folders.

    Gary

Share This Page