Announcement

Collapse
No announcement yet.

step by step to easily customize the Admin

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • step by step to easily customize the Admin

    Most of the credit goes to DeanP and Alupis

    There is an easy way to fix the visual problems with the new admin without even a risk of breaking anything. This fix makes using the new admin so much easier.

    This will fix most of the visual issues with the admin. You still need to keep the WYSIWYG editor turned off from the "Administrator" drop down (optional)

    1. Use Chrome browser
    2. go to Chrome Store and install the Stylebot extension
    https://chrome.google.com/webstore/d...foejpgmdaleoha
    3. Go to your admin,
    4. Click the "css" icon at the top of the browser > open stylebot
    5.In the panel that opens look for your admin web address. Click on it, and erase the end of it so it ends with admin/ ( https://www.yoursite.com/admin/ )
    6. At the bottom of this panel, click the "Edit CSS" button and paste the css code below. and click SAVE

    That't it. When you go to your admin, you will see this new version.

    Code:
    #main {
        max-width: 1150px;
    }
    
    .alert a {
        color: #660000;
    }
    
    .alert a:hover {
        color: #009999;
    }
    
    .btn-default {
        background-color: #EBA10E;
        border-color: #F2F2F2;
        color: #000;
    }
    
    .btn-main {
        background: #7D6B1B;
        color: #ffffff ;
    }
    
    .btn-save:hover, .btn-green:hover {
        background: #829447;
        border: 1px solid #F2F2F2;
        color: #FFF;
    }
    
    .col-md-12 textarea {
        background: #DCDCDC;
        min-height: 50px;
        resize: both;
    }
    
    .minified #logo-group #logo {
        background-image: url(../assets/brandv7/img/logo-white-sm.png);
    }
    
    .smart-form .checkbox {
        font-weight: 600;
    }
    
    .smart-form .input input, .smart-form .select select, .smart-form .textarea textarea {
        font-weight: 600 ;
    }
    
    .smart-form .input input, .smart-form.select select, .smart-form .textarea textarea, .smart-form .select select, .ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
        background-color: #DCDCDC;
        min-height: 32px;
    }
    
    .smart-form .label {
        color: #000;
        font-size: 13px;
        font-weight: 700;
    }
    
    .smart-form .select-multiple select {
        min-height: 170px
    ;
        resize: both;
    }
    
    a {
        font-weight: 700
    ;
    }
    
    a#lnkStock {
        background-color: #B6B27F;
        color: #A70918;
        font-size: 16PX;
        font-weight: 900;
        padding: 5px 25px;
    }
    
    /* Added styles */
    
    /* For some reason specifying a new default button above overrides the green button below, so you have to add in the green button again. */
    
    h1, h2, h3, h4 {
        font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
        font-weight: 600;
    }
    
    h5 {
        font-weight: 600;
    }
    
    section textarea, .col-md-12 textarea, .textarea-expandable textarea {
        background-color: #DCDCDC;
        min-height: 50px;
    }
    
    span.order0 {
        background: #B6B27F;
    }
    
    textarea#content_area {
        min-height: 500px ;
        resize: both;
    }
    
    textarea#extended_description {
        min-height: 175px;
        resize: both;
    }
    
    tr.highlight td, tr.unread.highlight td {
        background-color: #DFD4A9 ;
    }
    You do not have permission to view this gallery.
    This gallery has 2 photos.

  • #2
    Thanks for posting this, elightbox. If I make these changes using Chrome, what will I see when I use Firefox? I much prefer using Firefox over Chrome, but I'd like to make my admin better. I know, I just want everything! :D

    Comment


    • #3
      This CSS extension is for Chrome. It will only affect the Chrome Browser on the computer you are using.
      The good thing, is that you cannot break anything by experimenting. Very easy to setup, so it is worth a try. I guarantee it is way better than using the admin on Firefox.

      Comment


      • #4
        I considered using Chrome for programming because Firefox didn't load edit pages very well, but Chrome doesn't show the admin sales graph for some reason. Support has been sending me emails from time to time saying they were still working on it, but didn't have a clue what was causing it or what to do about it. I backed off Chrome at that point. I have way too many things set up in Firefox for other uses to switch to Chrome completely. There are just too many things Chrome can't (or won't) do. It's a pity we can't have the best of both worlds. :(

        Comment


        • #5
          cwnoah Although there is no StyleBot plugin/extension for FireFox, there should be something similar. While not exactly the same, Stylish and GreaseMonkey may be able to do the same thing.

          Comment


          • #6
            Thanks Alupis!

            Comment


            • #7
              cwnoah I use chrome and can see everything in my admin. I wonder why you can't? I was a die hard FF fan and hated chrome, but started using chrome and I won't go back. I see what a resource hawg FF actually was and I actually prefer chrome now. Of course I hated the new admin and I'm using it too, but it's not as bad as I once thought. Thanks elightbox for the great tutorial because I'm not a coder and am constantly afraid if I make a move I'll destroy something I can't fix :-)

              Comment

              Working...
              X