« back to blog

May 26 2012

Customizing the admin panel, with examples!

Pancake lets you flavor the app to your own taste. Even though it’s completely themeable, you can jump right into branding both your admin and customer-facing sites.

Your first step should be to upload a logo. Not only will it appear when you’re working in Pancake, it will appear on all your client invoices too.

  1. Click ‘Settings’
  2. Click the ‘Branding’ tab
  3. Upload your logo
  4. Click ‘Save Settings’

Voila!

Uploading your own logo should be your first step towards branding, but what else can you do quickly?

Pick your own font

With Pancake you can use your own custom CSS. All you need to do is:

  1. Click ‘Settings’
  2. Click the ‘Branding’ tab
  3. Paste your CSS into the ‘Frontend Custom CSS’ or ‘Backend Custom CSS’
  4. Click ‘Save Settings’

You might need to refresh your page to see any effects. So, let’s choose a font.

I enjoy the ‘Bitter’ font found on Google Web Fonts. Using the CSS @import provided by Google, I simply include the following:

@import url(http://fonts.googleapis.com/css?family=Bitter:400,700,400italic);
body {
    font-family: 'Bitter', Georgia, 'Times New Roman', serif;
}

If I wanted to override every font in Pancake, I could add !important in, like so:

body {
    font-family: 'Bitter', Georgia, 'Times New Roman', serif !important;
}

Depending on whether you add the CSS to the frontend (what your customer sees) or the backend (what you see), you can make Pancake the kind of app that you and your customers enjoy using every day.

Styling the back end

Supposing you thought the existing buttons weren’t very you. Using Chrome Developer Tools or Firebug, you can quickly find the important parts of the CSS to override.

.yellow-btn {
    background: #FF9900;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    font-weight: normal;
    -webkit-transition: background .2s ease;
}

.yellow-btn span {
    background: none;
    text-shadow: none;
    color: #fff;
    padding: 12px 15px 5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.yellow-btn:hover {
    background-color: #E68A00;
}

#nav li.subnav > a:after {
    content:'\25BC';
    font-size: 80%;
    margin-left: 5px;
}

Here I have changed the background color, replace the background image, added a subtle shadow to the button and given it a rounded corner. Because I’m a CSS3 nut and I’ve nothing better to do with my time, I also think it’d be nice to add a little transition to the button when I hover my mouse over it. I always forget there is a sub-menu under ‘Invoices’, so I added a small down arrow to represent that.

Feeling a bit more adventurous, I decided to replace the existing header graphic. You could do this with pure CSS, but I decided to make a background image in a few seconds:

body {
    background: url(/assets/img/MY_header.png) repeat-x;
}

Copy the CSS, paste it into the ‘Backend Custom CSS’, and save. If you make a change and decide the Pancake team had it right all along, delete the CSS, save, and your style will be back to normal.

Styling a customer invoice

Easily sending an invoice is only half the battle. Getting the client to pay on time is another feat altogether. Much like in the Backend branding, I’ve added my favorite font to the customer invoice. Green is the color of money, so I’m going to style my ‘Proceed to payment’ button that way, in the hope of enticing my client to go ahead and click it.

I’ve chosen Paypal as my method of payment, meaning I can specify CSS for that particular button:

#paypal a {
    background: #80ba52;
    color: white;
    text-shadow: 1px 1px 1px #638746;
    box-shadow: 0px 5px 2px -4px #578136;
    box-shadow: none;
    border-radius: 2px;
    -webkit-transition: background .2s ease;
    border-color: #578136;
}

#paypal a:hover {
    background: #6fa743;
    text-shadow: 1px 1px 1px #638746;
    box-shadow: none;
}

#paypal a:active {
    position: relative;
    top: 1px;
}

Much like the button in the backend, I’ve added a new background color, a little text-shadow, transition and most importantly made it stand out from all the other buttons on the page.

Again, paste in the CSS, hit ‘Save Settings’ and your new style will be immediately available to your clients.

In just a few minutes, you can start to skin your Pancake installation without having to worry about any programming or breaking how the app works. Even better, you can make the customer facing screens part of the brand that you have created, making the act of receiving payment less clinical and all just part of the warm, fuzzy service you provide.