{"id":1056,"date":"2024-02-28T14:21:29","date_gmt":"2024-02-28T13:21:29","guid":{"rendered":"https:\/\/contecon.de\/picapportwiki\/?page_id=1056"},"modified":"2024-05-24T13:25:24","modified_gmt":"2024-05-24T11:25:24","slug":"how-to-create-a-design","status":"publish","type":"page","link":"https:\/\/contecon.de\/picapportwiki\/how-to-create-a-design\/","title":{"rendered":"How to create a design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1056\" class=\"elementor elementor-1056\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db96703 e-flex e-con-boxed e-con e-parent\" data-id=\"db96703\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1aaeaa1 elementor-widget elementor-widget-heading\" data-id=\"1aaeaa1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">How to create a design<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24f60d3 elementor-widget elementor-widget-text-editor\" data-id=\"24f60d3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>To create your own design you need some basic skills in CSS and JSON.<\/p><p>As a start take one of our existing designs (<em><strong>.pad<\/strong><\/em>\u00a0&#8211; file) found here:\u00a0<a href=\"https:\/\/contecon.de\/picapportwiki\/available-designs\/\">Available designs<\/a><\/p><p>If you have created a design we would be happy to add it on our available designs list. Just send us the\u00a0<strong><em>.pad<\/em><\/strong>\u00a0file. 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.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a48d73b elementor-widget elementor-widget-heading\" data-id=\"a48d73b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">A closer look at ccpa_hearts.pad<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-193ccd3 elementor-widget elementor-widget-text-editor\" data-id=\"193ccd3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Each .<em><strong>pad<\/strong><\/em>\u00a0file is a renamed\u00a0<em><strong>.zip<\/strong><\/em>\u00a0file. So as a first step to examine\u00a0<em><strong>ccpa_hearts.pad<\/strong><\/em>\u00a0is to rename it to\u00a0<em><strong>ccpa_hearts.zip<\/strong><\/em>\u00a0and copy the contents to a directory.<br \/>You&#8217;ll find the following files:<\/p><div class=\"table-wrap\"><table class=\"confluenceTable tablesorter tablesorter-default stickyTableHeaders\" role=\"grid\"><thead class=\"tableFloatingHeaderOriginal\"><tr class=\"tablesorter-headerRow\" role=\"row\"><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"0\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"File: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">File<\/div><\/th><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" colspan=\"1\" scope=\"col\" data-column=\"1\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Mandatory: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Mandatory<\/div><\/th><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"2\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Remarks: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Remarks<\/div><\/th><\/tr><\/thead><tbody aria-live=\"polite\" aria-relevant=\"all\"><tr role=\"row\"><td class=\"confluenceTd\"><strong>ccpa_hearts<\/strong>.json<\/td><td class=\"confluenceTd\" colspan=\"1\">YES<\/td><td class=\"confluenceTd\"><p>Contains Metadata information about the design.<br \/>Important: File must be encoded in UTF-8<\/p><p>The file\u00a0<strong>must exist<\/strong>\u00a0in each\u00a0<em><strong>.pad<\/strong><\/em>\u00a0file.<\/p><\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\"><strong>ccpa_hearts<\/strong>.css<\/td><td class=\"confluenceTd\" colspan=\"1\">YES<\/td><td class=\"confluenceTd\"><p>Contains Metadata information about the design.<br \/>Important: File must be encoded in UTF-8<\/p><p>The file\u00a0<strong>must exist<\/strong>\u00a0in each\u00a0<em><strong>.pad<\/strong><\/em>\u00a0file.<\/p><\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">background-hearts.jpg<\/td><td class=\"confluenceTd\" colspan=\"1\">NO<br \/>(depends on css file)<\/td><td class=\"confluenceTd\">All image-files referred in the\u00a0<em><strong>.css<\/strong><\/em>\u00a0file must be present in the\u00a0<strong><em>.pad<\/em><\/strong>\u00a0file<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">frame-hearts.png<\/td><td class=\"confluenceTd\" colspan=\"1\"><p>NO<br \/>(depends on css file)<\/p><\/td><td class=\"confluenceTd\">All image-files referred in the\u00a0<em><strong>.css<\/strong><\/em>\u00a0file must be present in the\u00a0<strong><em>.pad<\/em><\/strong>\u00a0file<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">frame-hearts.png<\/td><td class=\"confluenceTd\" colspan=\"1\"><p>NO<br \/>(depends on css file)<\/p><\/td><td class=\"confluenceTd\">All image-files referred in the\u00a0<em><strong>.css<\/strong><\/em>\u00a0file must be present in the\u00a0<strong><em>.pad<\/em><\/strong>\u00a0file<\/td><\/tr><\/tbody><\/table><\/div><h3 id=\"Howtocreateadesign-Thedesign-ID\">The design-ID<\/h3><p>The id marked in\u00a0<strong>green<\/strong>\u00a0in the example above is called the\u00a0<strong>designID<\/strong>. It\u00a0<strong>MUST<\/strong>\u00a0be unique and\u00a0<strong>MUST<\/strong>\u00a0be identical for the<em><strong>\u00a0.pad<\/strong><\/em>,\u00a0<em><strong>.css<\/strong><\/em>\u00a0and\u00a0<em><strong>.json<\/strong><\/em>\u00a0files.<\/p><p>The designID prefixes\u00a0<em><strong>ccpa_<\/strong>\u00a0<\/em>and\u00a0<em><strong>pad-<\/strong><\/em>\u00a0are reserved for Contecon for future use. If you create your own designs you should use a different prefix.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-13e094e e-flex e-con-boxed e-con e-parent\" data-id=\"13e094e\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f890b6 elementor-widget elementor-widget-heading\" data-id=\"8f890b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The design-ID.json File (ccpa_hearts.json)<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2be8f36 e-flex e-con-boxed e-con e-parent\" data-id=\"2be8f36\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9093cbc elementor-widget elementor-widget-text-editor\" data-id=\"9093cbc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This file describes the content of the design.<\/p><div class=\"preformatted panel conf-macro output-block\" data-hasbody=\"true\" data-macro-name=\"noformat\"><div class=\"preformattedContent panelContent\"><pre>{\n     \"name\": \"Red hearts\",\n     \"addToMenue\": true,\n     \"hasUrlResources\": true,\n     \"i18n\":\n     {\n         \"de\": \"Rote Herzen\",\n         \"fr\": \"Coeurs rouges\",\n         \"es\": \"Corazones rojos\"\n     }\n} <\/pre><\/div><\/div><div class=\"table-wrap\"><table class=\"confluenceTable tablesorter tablesorter-default stickyTableHeaders\" role=\"grid\"><thead class=\"tableFloatingHeaderOriginal\"><tr class=\"tablesorter-headerRow\" role=\"row\"><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"0\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Field: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Field<\/div><\/th><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"1\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Description: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Description<\/div><\/th><\/tr><\/thead><tbody aria-live=\"polite\" aria-relevant=\"all\"><tr role=\"row\"><td class=\"confluenceTd\">name<\/td><td class=\"confluenceTd\">Default name for this design used in the Menu if nothing else found in i18n. (it&#8217;s a good practice to use an english name here)<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">addToMenue<\/td><td class=\"confluenceTd\"><em><strong>true<\/strong>\u00a0<\/em>or\u00a0<em><strong>false<\/strong><\/em>. If true it will be addend to the Menu.<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">hasUrlResources<\/td><td class=\"confluenceTd\"><em><strong>true<\/strong>\u00a0<\/em>or\u00a0<em><strong>false<\/strong><\/em>. If true the\u00a0<em><strong>css<\/strong><\/em>\u00a0file contains references to image files. In this case the design will not be available in\u00a0<em><strong>&#8222;Offline Mode&#8220;<\/strong><\/em><\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">i18n<\/td><td class=\"confluenceTd\">International translations of the name-field<\/td><\/tr><\/tbody><\/table><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5f4a13 elementor-widget elementor-widget-heading\" data-id=\"e5f4a13\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">The design-ID.css File (ccpa_hearts.css)<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf9474b elementor-widget elementor-widget-text-editor\" data-id=\"cf9474b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Stylesheet for the design<\/p><div class=\"code panel pdl conf-macro output-block\" data-hasbody=\"true\" data-macro-name=\"code\"><div class=\"codeContent panelContent pdl\"><div><div id=\"highlighter_707299\" class=\"syntaxhighlighter sh-confluence nogutter  css\"><table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"code\"><div class=\"container\" title=\"Hint: double-click to select code\"><div class=\"line number1 index0 alt2\"><code class=\"css plain\">.photo-background {<\/code><\/div><div class=\"line number2 index1 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">background<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">#FFFFFF<\/code>\u00a0<code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/background-hearts.jpg)\u00a0<\/code><code class=\"css value\">repeat-y<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number3 index2 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">background-<\/code><code class=\"css keyword\">size<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">15%<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number4 index3 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><div class=\"line number5 index4 alt2\"><code class=\"css plain\">.photo-canvas {<\/code><\/div><div class=\"line number6 index5 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">padding<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">10px<\/code>\u00a0<code class=\"css value\">10px<\/code>\u00a0<code class=\"css value\">10px<\/code>\u00a0<code class=\"css value\">15%<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number7 index6 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><div class=\"line number8 index7 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number9 index8 alt2\"><code class=\"css plain\">.photo\u00a0 {<\/code><\/div><div class=\"line number10 index9 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number11 index10 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">border-style<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">solid<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number12 index11 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">border-width<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">19px<\/code>\u00a0<code class=\"css value\">16px<\/code>\u00a0<code class=\"css value\">19px<\/code>\u00a0<code class=\"css value\">16px<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number13 index12 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number14 index13 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">-moz-border-image:\u00a0<\/code><code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/frame-hearts.png)\u00a0<\/code><code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css plain\">round;<\/code><\/div><div class=\"line number15 index14 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">-webkit-border-image:\u00a0<\/code><code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/frame-hearts.png)\u00a0<\/code><code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css plain\">round;<\/code><\/div><div class=\"line number16 index15 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">-o-border-image:\u00a0<\/code><code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/frame-hearts.png)\u00a0<\/code><code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css plain\">round;<\/code><\/div><div class=\"line number17 index16 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">border-image:\u00a0<\/code><code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/frame-hearts.png)\u00a0<\/code><code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css value\">57<\/code>\u00a0<code class=\"css value\">50<\/code>\u00a0<code class=\"css plain\">round;<\/code><\/div><div class=\"line number18 index17 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number19 index18 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">-webkit-box-shadow:\u00a0\u00a0<\/code><code class=\"css value\">20px<\/code>\u00a0<code class=\"css value\">20<\/code><code class=\"css plain\">x\u00a0<\/code><code class=\"css value\">40px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.75<\/code><code class=\"css plain\">),\u00a0<\/code><code class=\"css value\">-5px<\/code>\u00a0<code class=\"css value\">-5px<\/code>\u00a0<code class=\"css value\">10px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.75<\/code><code class=\"css plain\">) ;<\/code><\/div><div class=\"line number20 index19 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">-moz-box-shadow:\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css value\">10px<\/code>\u00a0<code class=\"css value\">10<\/code><code class=\"css plain\">x\u00a0<\/code><code class=\"css value\">10px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.75<\/code><code class=\"css plain\">),\u00a0<\/code><code class=\"css value\">-5px<\/code>\u00a0<code class=\"css value\">-5px<\/code>\u00a0<code class=\"css value\">10px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.75<\/code><code class=\"css plain\">) ;<\/code><\/div><div class=\"line number21 index20 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">box-shadow:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css value\">5px<\/code>\u00a0<code class=\"css value\">5px<\/code>\u00a0<code class=\"css value\">20px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.50<\/code><code class=\"css plain\">),\u00a0<\/code><code class=\"css value\">-2px<\/code>\u00a0<code class=\"css value\">-2px<\/code>\u00a0<code class=\"css value\">5px<\/code>\u00a0<code class=\"css plain\">rgba(<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0<\/code><code class=\"css plain\">,\u00a0<\/code><code class=\"css value\">0.20<\/code><code class=\"css plain\">) ;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/div><div class=\"line number22 index21 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/div><div class=\"line number23 index22 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number24 index23 alt1\"><code class=\"css plain\">.photo-overlay {<\/code><\/div><div class=\"line number25 index24 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">display<\/code><code class=\"css plain\">:<\/code><code class=\"css value\">block<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number26 index25 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">background<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">url<\/code><code class=\"css plain\">(designs\/ccpa_hearts\/overlay-hearts.png)\u00a0<\/code><code class=\"css value\">no-repeat<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number27 index26 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">background-<\/code><code class=\"css keyword\">size<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">10%<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number28 index27 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">background-position<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">bottom<\/code>\u00a0<code class=\"css value\">right<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number29 index28 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><div class=\"line number30 index29 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number31 index30 alt2\"><code class=\"css plain\">@media only\u00a0<\/code><code class=\"css value\">screen<\/code>\u00a0<code class=\"css plain\">and (<\/code><code class=\"css keyword\">min-width<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">640px<\/code><code class=\"css plain\">) and (<\/code><code class=\"css keyword\">min-height<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">480px<\/code><code class=\"css plain\">) {<\/code><\/div><div class=\"line number32 index31 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">.photo-canvas {<\/code><\/div><div class=\"line number33 index32 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">padding<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">20px<\/code>\u00a0<code class=\"css value\">20px<\/code>\u00a0<code class=\"css value\">20px<\/code>\u00a0<code class=\"css value\">15%<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number34 index33 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><div class=\"line number35 index34 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">.photo {<\/code><\/div><div class=\"line number36 index35 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">border-width<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">57px<\/code>\u00a0<code class=\"css value\">50px<\/code>\u00a0<code class=\"css value\">57px<\/code>\u00a0<code class=\"css value\">50px<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number37 index36 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/div><div class=\"line number38 index37 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">.photo-overlay {<\/code><\/div><div class=\"line number39 index38 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">background-<\/code><code class=\"css keyword\">size<\/code><code class=\"css plain\">:\u00a0<\/code><code class=\"css value\">20%<\/code><code class=\"css plain\">;<\/code><\/div><div class=\"line number40 index39 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><div class=\"line number41 index40 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\u00a0<\/div><div class=\"line number42 index41 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css plain\">}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/div><\/div><\/div><h3 id=\"Howtocreateadesign-Rules\">Rules<\/h3><ul><li>Always refer image resources with:\u00a0<em><strong>url(designs\/designID\/yourFile.png)<\/strong><\/em><br \/>Examples:<br \/>url(designs\/<strong>ccpa_hearts<\/strong>\/background-hearts.jpg)<br \/>url(designs\/<strong>ccpa_hearts<\/strong>\/overlay-hearts.png)<br \/><em><strong>Important:<\/strong><\/em>\u00a0In the examples before Version 7 there was a leading slash in the url. This slash should be removed as shown above to support the\u00a0<em><strong>server.contextpath<\/strong>\u00a0<\/em>parameter introduced in V7<br \/><br \/><\/li><li>To be compatible with future versions only use the class-names as defined below:<ul><li><p>.photo-background<\/p><\/li><li>.photo-canvas<\/li><li>.photo<\/li><li>.photo-overlay<br \/><br \/><\/li><\/ul><\/li><li>To be compatible with future versions do not change dimensions of the classes (width, height, etc.) and z-ordering.<\/li><\/ul><h3 id=\"Howtocreateadesign-Classes\">Classes<\/h3><div class=\"table-wrap\"><table class=\"confluenceTable tablesorter tablesorter-default stickyTableHeaders\" role=\"grid\"><thead class=\"tableFloatingHeaderOriginal\"><tr class=\"tablesorter-headerRow\" role=\"row\"><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"0\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Class: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Class<\/div><\/th><th class=\"confluenceTh tablesorter-header sortableHeader tablesorter-headerUnSorted\" tabindex=\"0\" role=\"columnheader\" scope=\"col\" data-column=\"1\" aria-disabled=\"false\" aria-sort=\"none\" aria-label=\"Despription: No sort applied, activate to apply an ascending sort\"><div class=\"tablesorter-header-inner\">Despription<\/div><\/th><\/tr><\/thead><tbody aria-live=\"polite\" aria-relevant=\"all\"><tr role=\"row\"><td class=\"confluenceTd\">.photo-background<\/td><td class=\"confluenceTd\">Global Background<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">.photo-canvas<\/td><td class=\"confluenceTd\">Use the canvas padding to get extra space around the photo.<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">.photo<\/td><td class=\"confluenceTd\">The photo itself. Use it to draw a border around the photo.<\/td><\/tr><tr role=\"row\"><td class=\"confluenceTd\">.photo-overlay<\/td><td class=\"confluenceTd\">Can be used as an overlay. Just leave it away if you do not need it.<\/td><\/tr><\/tbody><\/table><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a71b20 elementor-widget elementor-widget-heading\" data-id=\"2a71b20\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Final Steps<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9cdfc7 elementor-widget elementor-widget-text-editor\" data-id=\"d9cdfc7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>When you&#8217;re done with your design, zip all your files to a\u00a0<strong><em>yourID.zip<\/em>\u00a0<\/strong>file and rename it to<strong><em>\u00a0yourID.pad<\/em><\/strong>.<\/p><p>Copy the\u00a0<em><strong>.pad<\/strong><\/em>\u00a0file to the\u00a0<strong>.<em>picapport\/designs<\/em><\/strong>\u00a0directory and type\u00a0<em><strong>reloaddesigns<\/strong>\u00a0<\/em>on the server-console. You will notice that PicApport has created a directory\u00a0<em><strong>.picapport\/designs\/yourID<\/strong><\/em>.<br \/>This directory now contains all the files of your\u00a0<em><strong>.pad<\/strong><\/em>\u00a0file. You can edit your css file directly. Just type\u00a0<em><strong>reloaddesigns<\/strong>\u00a0<\/em>on the server-console to update your design after editing.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5c0aaff e-flex e-con-boxed e-con e-parent\" data-id=\"5c0aaff\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>How to create a design To create your own design you need some basic skills in CSS and JSON. As a start take one of our existing designs (.pad\u00a0&#8211; file) found here:\u00a0Available designs If you have created a design we would be happy to add it on our available designs list. Just send us the\u00a0.pad\u00a0file. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1056","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/pages\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":7,"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/pages\/1056\/revisions"}],"predecessor-version":[{"id":2208,"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/pages\/1056\/revisions\/2208"}],"wp:attachment":[{"href":"https:\/\/contecon.de\/picapportwiki\/wp-json\/wp\/v2\/media?parent=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}