Page tree
Skip to end of metadata
Go to start of metadata

To create your own design you need some basic skills in CSS and JSON.

As a start take one of our existing designs (.pad - file) found here: Available designs

If you have created a design we would be happy to add it on our available designs list. Just send us the .pad file. Please understand, that if your file contains copyright protected items like background images we need a written permission to use these images and the information who is the author/source of the image and the license type of the image.

A closer look at ccpa_hearts.pad

Each .pad file is a renamed .zip file. So as a first step to examine ccpa_hearts.pad is to rename it to ccpa_hearts.zip and copy the contents to a directory.
You'll find the following files:

FileMandatoryRemarks
ccpa_hearts.jsonYES

Contains Metadata information about the design.
Important: File must be encoded in UTF-8

The file must exist in each .pad file.

ccpa_hearts.cssYES

Contains Metadata information about the design.
Important: File must be encoded in UTF-8

The file must exist in each .pad file.

background-hearts.jpgNO
(depends on css file)
All image-files referred in the .css file must be present in the .pad file
frame-hearts.png

NO
(depends on css file)

All image-files referred in the .css file must be present in the .pad file
frame-hearts.png

NO
(depends on css file)

All image-files referred in the .css file must be present in the .pad file

The design-ID

The id marked in green in the example above is called the designID. It MUST be unique and MUST be identical for the .pad, .css and .json files.

The designID prefixes ccpa_ and pad- are reserved for Contecon for future use. If you create your own designs you should use a different prefix.

The design-ID.json File (ccpa_hearts.json)

This file describes the content of the design.

{
     "name": "Red hearts",
     "addToMenue": true,
     "hasUrlResources": true,
     "i18n":
     {
         "de": "Rote Herzen",
         "fr": "Coeurs rouges",
         "es": "Corazones rojos"
     }
} 
FieldDescription
nameDefault name for this design used in the Menu if nothing else found in i18n. (it's a good practice to use an english name here)
addToMenuetrue or false. If true it will be addend to the Menu.
hasUrlResourcestrue or false. If true the css file contains references to image files. In this case the design will not be available in "Offline Mode"
i18nInternational translations of the name-field

The design-ID.css File (ccpa_hearts.css)

Stylesheet for the design

.photo-background {
              background: #FFFFFF url(designs/ccpa_hearts/background-hearts.jpg) repeat-y;
              background-size: 15%;
              }
.photo-canvas {
              padding: 10px 10px 10px 15%;
              }
              
.photo  { 
       
         border-style: solid;
         border-width: 19px 16px 19px 16px;
        
         -moz-border-image: url(designs/ccpa_hearts/frame-hearts.png) 57 50 57 50 round;
         -webkit-border-image: url(designs/ccpa_hearts/frame-hearts.png) 57 50 57 50 round;
         -o-border-image: url(designs/ccpa_hearts/frame-hearts.png) 57 50 57 50 round;
         border-image: url(designs/ccpa_hearts/frame-hearts.png) 57 50 57 50 round;
        
         -webkit-box-shadow:  20px 20x 40px rgba(0, 0, 0, 0.75), -5px -5px 10px rgba(0, 0, 0, 0.75) ;
         -moz-box-shadow:     10px 10x 10px rgba(0, 0, 0, 0.75), -5px -5px 10px rgba(0, 0, 0, 0.75) ;
         box-shadow:          5px 5px 20px rgba(0, 0, 0, 0.50), -2px -2px 5px rgba(0, 0, 0, 0.20) ;        
         }              
              
.photo-overlay {
              display:block;
              background: url(designs/ccpa_hearts/overlay-hearts.png) no-repeat;
              background-size: 10%;
              background-position: bottom right;
              } 
              
@media only screen and (min-width: 640px) and (min-height: 480px) {
               .photo-canvas {
                             padding: 20px 20px 20px 15%;
                             }
               .photo {
                  border-width: 57px 50px 57px 50px;
                  }                  
               .photo-overlay { 
                  background-size: 20%;
                  }
               
               }

Rules

  • Always refer image resources with: url(designs/designID/yourFile.png)
    Examples:
    url(designs/ccpa_hearts/background-hearts.jpg)
    url(designs/ccpa_hearts/overlay-hearts.png)
    Important: In the examples before Version 7 there was a leading slash in the url. This slash should be removed as shown above to support the server.contextpath parameter introduced in V7

  • To be compatible with future versions only use the class-names as defined below:
    • .photo-background

    • .photo-canvas
    • .photo
    • .photo-overlay

  • To be compatible with future versions do not change dimensions of the classes (width, height, etc.) and z-ordering.

Classes

ClassDespription
.photo-backgroundGlobal Background
.photo-canvasUse the canvas padding to get extra space around the photo.
.photoThe photo itself. Use it to draw a border around the photo.
.photo-overlayCan be used as an overlay. Just leave it away if you do not need it.

 

Final Steps

When you're done with your design, zip all your files to a yourID.zip file and rename it to yourID.pad.

Copy the .pad file to the .picapport/designs directory and type reloaddesigns on the server-console. You will notice that PicApport has created a directory .picapport/designs/yourID.
This directory now contains all the files of your .pad file. You can edit your css file directly. Just type reloaddesigns on the server-console to update your design after editing.

 

  • No labels