Made with Kirby and <3

##My First Kirby Site … Everrrr

I almost forgot to post it here :stuck_out_tongue: I created this site months ago;

http://mediatrend.nl/


It is my first Kirby site ever, and I designed, coded and created everything by hand.

First I made the static html-template, which I than converted to a real Kirby-theme.


###I also changed some parts of the CMS to suit my needs;

The admin-backend is secured with a - nice styled - captcha-code (Kirby powered).


When you enter the right captcha, you’ll see the admin-form, branded in a corporate style.


I worked hard to power everything in the front-end from Kirby’s back-end;

Take the picture above, you can change these things from the admin-panel;

  • The number of bullets (add / remove a bullet - and the php-code will dynamically adjust).
  • The icons in the bullet (I made a special icon-field, from where you can pick your favorite icon which is than placed in the appropriate bullet).
  • The caption, text, etc… (duhhhh…).
  • The source, place, position of the image on the left.

This is how the page looks in the back-end;

As you can see, I converted all “blocks” from the homepage to “tabs” (tabbed interface) in the back-end.

So you can simply click on a tab in the back-end, which opens that particular part from the front-end.

You can than change latterly every content-aspect one can imagine from a nice, and simple interface.


This is another part of the homepage; the numbers you see are animated… and of course that animation is Kirby-powered © :slight_smile:

Using the back-end one can adjust the speed of the animation, the number-offset and the desired end-result of the highest numbers.


This is the back-end of the “numbers block”.

Using a dynamic structured field, one can add or remove the animated numbers and of course change them (caption, amount, speed, etc…)


The last example of my first site;

From the back-end, you can add extra content-blocks to one particular page.

Every content-block has it’s own color, icon, caption, etc… (to make it more user friendly).

The image above show one block (with a green accent, a headphone icon and a caption in a weird language).


…and this is how it looks like in the back-end;

Simply create a new content-block (which will show up in the tabbed-interface) and one can set the icon (bullhorn - with live preview on the right), caption and accent color.

The caption color also has it’s own shaded / degrees (hue, saturation, etc…) in the front-end;

This is done by some custom javascript (Kirby spits out the rgb-code from the back-end, javascript converts it to 50 shades of gray).


Thanks to Kirby and @bastianallgeier I now can finally create the sites I want… how I want.

4 Likes