Ready-made Code

Level: Average

Many Designs from BehindTheRabbit come with “Ready-made Code”. This means that instead of creating, injecting and double-testing your own code, you can use a number of pre-made snippets already embedded in your Design.

The process is much easier and the result is already tested, so even if some action is required on your side to activate the option (or options) you choose to apply, this is still much easier and safer than code everything from scratch.

Moreover, you can mix any available option with other ones and you still can add your own “Page” or “Site” code injections the usual way.

How to create the activation code

Each design supporting Ready-made Code has its own options, identified by a keyword (check the table below or the specific page of your Design).

Your code consists in just two lines, and you need to worry only about the first one. It will look like this:

<div class="option option option">

Change the option placeholder with any number of options you’d like to apply among those available to that specific Design.

For example, a correct activation code for Krypton Pro is:

<div class="left-sidebar no-title-bg">

Leave a blank space between options, if there is more than one.

The second line will be just:


whatever the Design or the options are.

You can apply the change to single pages or to the whole website. You can also do both at the same time (for example: a right sidebar for a single page, a base-red color for the whole website. Or vice-versa).

  • If you’re changing a single page, choose “Edit” menu → “Page Code Injection…”.
  • If you’re changing the whole website, choose “Edit” menu → “Site Code Injection”.

The process is the same for both situations from here.

Select the Document Body tab: you’ll see two large fields. Write into the first one the code you created previously (line 1).

Write the second line (</div>) into the second field of the same area. Don’t forget this step, it’s very important to preserve the layout of your website.

Check this image to see if everything looks correct:

Krypton Options

Some caveats

  1. Remember that Ready-made Code options are intended for their specific Designs. Some Designs may share the same options, but switching between Designs may lead to unpredictable results or the code may not work. So check if you need some adjustment!
  2. Some options are conflicting with each other. For example, a Design can’t be “red” and “green” at the same time. Mixing conflicting options leads to unpredictable results (most likely one of them will not be applied).

Designs supporting Ready-made Code

Design Options
Krypton Pro left-sidebar
Carbone right-sidebar
Simple Rabbit right-sidebar
orange / red / blue / green
Grafite right-sidebar

Check individual pages for further information on these options.