1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Admin CP CSS

Discussion in 'Styling and Customization Questions' started by Matthew2D, Jun 7, 2012.

  1. Matthew2D

    Matthew2D Active Member

    Where is the CSS for the Admin CP?

    Thanks.
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    You need debug mode enabled.

    Like you do when you create the TMS add ons.

    You can find Admin Trmplates in the Development menu.
     
  3. Matthew2D

    Matthew2D Active Member

    Thanks. I'm going to make a Admin CP Skin! :D
     
    Yorick likes this.
  4. Chris D

    Chris D XenForo Developer Staff Member

    I expect good things!
     
  5. Matthew2D

    Matthew2D Active Member

    Umm, could you copy the css from header.css in the admin templates and post it here? There isn't a way to revert the template. Sorry.
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    Code:
    /* header */
     
    #header
    {
    background: @primaryMedium;
    position: fixed;
    width: 100%;
    z-index: 10;
    }
     
    .Touch #header
    {
    position: absolute;
    }
     
    /* logo line */
     
    #logoLine
    {
    text-align: center;
    border-bottom: 1px solid #1d74b3;
    overflow: hidden; zoom: 1;
    }
     
    #logoLine .pageWidth
    {
    position: relative;
    }
     
    #version,
    #logoutLink
    {
    position: absolute;
    top: 17px;
    left: 0px;
    font-size: 11px;
    color: @primaryLighter;
    padding: 0 11px;
    /*font-family: Eurostile, @body.font-family;*/
    }
     
    #logoLine a
    {
    color: @primaryLighter;
    }
     
    #logoLine a:hover
    {
    color: @primaryLightest;
    text-decoration: none;
    }
     
    #logoutLink
    {
    left: auto;
    right: 0px;
    }
     
    #logo
    {
    width: 100px;
    }
     
    /* tab navigation */
     
    #tabsNav
    {
    background: transparent url('@imagePath/xenforo/gradients/acp-banner-shadow.png') no-repeat top center;
    padding-top: 10px;
    border-top: 1px solid @primaryDark;
    }
     
    #tabsNav .pad
    {
    background: @primaryLight;
    height: 7px;
    border-bottom: 1px solid @primaryMedium;
    zoom: 1;
    }
     
    .acpTabs
    {
    overflow: hidden; zoom: 1;
    height: 22px;
    font-size: 11px;
    }
     
    .acpTabs li
    {
    float: left;
    }
     
    .acpTabs li.logout
    {
    float: right;
    }
     
    .acpTabs li.logout a
    {
    text-transform: none;
    }
     
    .acpTabs li a
    {
    display: block;
    height: 20px;
    line-height: 20px;
    padding: 3px 11px 0;
    color: @primaryLight;
    border-top-left-radius: 2px;
    border-top-right-radius: 5px;
    outline: 0;
    }
     
    .acpTabs li.active a,
    .acpTabs li.active:hover a
    {
    background: @primaryLight;
    color: @primaryLightest;
    padding: 2px 10px 0;
    border: 1px solid @primaryDarker;
    border-bottom: none;
    font-weight: bold;
    /*text-shadow: 0px 0px 3px @primaryMedium;*/
    }
     
    .acpTabs li:hover a,
    .acpTabs li.Popup:hover a.PopupControl.PopupClosed
    {
    background-color: @primaryMedium;
    color: @primaryLighterStill;
    text-decoration: none;
    }
     
    .acpTabs li#AdminSearch a.PopupControl .arrowWidget
    {
    background: transparent url('@imagePath/xenforo/widgets/acp-search-sprite.png') no-repeat right 0px;
    }
     
    .acpTabs li#AdminSearch a.PopupControl.PopupOpen .arrowWidget
    {
    background-position: right -13px;
    }
     
    .acpTabs li.separated
    {
    float: right;
    }
     
  7. Matthew2D

    Matthew2D Active Member

    Here is what I have so far! :D
     

    Attached Files:

  8. Chris D

    Chris D XenForo Developer Staff Member

    Looking good! :D
     
  9. Matthew2D

    Matthew2D Active Member

    Thanks. Here is the login page.
     

    Attached Files:

  10. Matthew2D

    Matthew2D Active Member

Share This Page