Published using Google Docs
DesignPLUS Library Submission Instructions
Updated automatically every 5 minutes

DesignPLUS Library Submission Instructions

First of all, thank you for your interest in contributing to the DesignPLUS Library!  The more resources we gather, the more powerful this project will be for everyone.  This document offers guidelines for anyone that would like to make a contribution to the DesignPLUS Library.  We are accepting submissions any time so feel free to come back often and share.

Select the resource type you would like to contribute to view submission instructions.

Banner Images

Content Blocks

Template Pages

Quick Styles

Banner Title Styles

Heading Styles

Link Grid Styles

HTML Snippets

Themes

Note for Getting HTML code

  • Content Blocks
  • Template Pages
  • HTML Snippets

These submissions require HTML code from your Canvas page.  You can access the HTML code using the HTML editor view in the bottom right of the rich content editor.

location of html view in canvas rce

Note for Getting CSS classes

  • Banner Title
  • Heading
  • Link Grid
  • Themes

These submissions require CSS classes from your custom styles.  You can access the CSS classes at the bottom of the Custom Banner Title, Custom Headings, and Custom Link Grid tools.

location of current classes text in custom builder tools

Or in the Attributes tool:

location of classes in attributes tool

Banner Images

How to create a new banner image

If you already have the banner image, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the Upload/Embed Image tool from the Canvas apps.
  2. Choose the image and make sure it is free to share.  You can get free images from Unsplash.com or Pexels.com that are CC-0 licensed.
  3. Crop the image to banner dimensions (pick one that works best for the image: 10:1, 10:2, 10:3, 10:4, or 1:1)
  4. If needed, reduce the image size to width no greater than 2000px. Smaller file size is better.
  5. Download the image with a readable file name (not 8sl0034kt1z.jpg gibberish - something like desert_landscape.jpg) and as png or jpg format.  Do not use spaces in the filename; use dashes or underscores instead of spaces.
  6. Upload the banner image to a public server.  If needed, send the image file to Cidi Labs Support to upload the image to our public server.

Submit the resource:

  1. Open the DesignPLUS Library Submission Form.
  2. Fill out your information, your attribution preference, and name for the submission.
  3. Select Image from the list of options.
  4. In the Submission box, include the image width, height, ratio, file size, and URL.

banner image example

Content Blocks

How to create a new content block

If you already have the content block, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add a content block.
  3. Put whatever content and style you wish inside the content block.

Submit the resource:

  1. Go to the HTML view of the Canvas editor and copy the HTML code.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Content Block from the list of options.
  5. In the Submission box, paste the HTML code you copied.

content block example

Template Pages

How to create a new template page

If you already have the template page, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Put whatever content and style you wish on the page.

Submit the resource:

  1. Go to the HTML view of the Canvas editor and copy the HTML code.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Template Page from the list of options.
  5. In the Submission box, paste the HTML code you copied.

template page example

Quick Styles

How to create a new quick style

If you already have the quick style, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add any type of content you want.
  3. Go to Advanced tools and open the Style Editor tool (if needed, go to User Settings first to enable the advanced tools)
  4. In the node list, choose a single element you are going to style.
  5. Use the Style Controls panels to apply different styles to that single element on the page.
  6. When it’s done, give the quick style a name and save it.

Submit the resource:

  1. Open the Quick Style Manager tool in the sidebar Advanced tools.
  2. Find the style name you made and choose the three dots menu for options.
  3. Choose “Share” and copy the JSON code it shows.
  1. location of copy button in quick style manager
  1. Open the DesignPLUS Library Submission Form.
  2. Fill out your information, your attribution preference, and name for the submission.
  3. Select Quick Style from the list of options.
  4. In the Submission box, paste the JSON code you copied.

quick style example

Banner Title Styles

How to create a new banner title style

If you already have the banner title style, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add a Banner Title and include a prefix, title, subtitle, and description.
  3. Go to Advanced tools and open the Custom Banner Title tool (if needed, go to User Settings first to enable the advanced tools)
  4. Use the Custom Banner Title tool to customize the style of the banner title.

Submit the resource:

  1. Copy the text that is shown in the CSS Classes section at the bottom of the Custom Banner Title tool.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Banner Title Style from the list of options.
  5. In the Submission box, paste the CSS classes you copied.

banner title example

Heading Styles

How to create a new heading style

If you already have the heading style, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add a few content blocks that include headings from h2 to h6.
  3. Go to Advanced tools and open the Custom Headings tool (if needed, go to User Settings first to enable the advanced tools)
  4. Use the Custom Headings tool to customize the style of each heading level.

Submit the resource:

  1. Copy the text that is shown in the CSS Classes section at the bottom of the Custom Headings tool.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Heading Styles from the list of options.
  5. In the Submission box, paste the CSS classes you copied.

heading style example

Link Grid Styles

How to create a new link grid style

If you already have the link grid style, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add a Link Grid and add 8 links to it.
  3. Go to Advanced tools and open the Custom Link Grid tool (if needed, go to User Settings first to enable the advanced tools)
  4. Use the Custom Link Grid tool to customize the style of the link grid.

Submit the resource:

  1. Copy the text that is shown in the CSS Classes section at the bottom of the Custom Link Grid tool.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Link Grid Style from the list of options.
  5. In the Submission box, paste the CSS classes you copied.

link grid style example

HTML Snippets

How to create a new snippet

If you already have the snippet, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Add any kind of content you want on the page.
  3. You can include inline styles and any HTML structure you want.  Feel free to include dummy text if needed.

Submit the resource:

  1. Go to the HTML view of the Canvas editor and copy the HTML code.
  2. Open the DesignPLUS Library Submission Form.
  3. Fill out your information, your attribution preference, and name for the submission.
  4. Select Snippet from the list of options.
  5. In the Submission box, paste the HTML code you copied.

html snippet example

Themes

How to create a new theme

If you already have the theme, you can skip this section and go to Submit the resource.

  1. Edit a blank page in Canvas and launch the new sidebar.
  2. Follow the instructions for creating a Banner Title Style, Link Grid Style, and Heading Style all on the same page.  A theme should have a consistent style across all three of those elements.
  3. Add a default banner image also, if you wish. This is not required.  You can add styles to the image using the Image tool.
  4. You may apply any other CSS classes to the div.dp-wrapper, div.dp-header, div.dp-link-grid, or div.dp-banner-image > img elements, but no inline styles are permitted in themes.

Submit the resource:

  1. Gather the CSS classes from the bottom of the Custom Banner Title, Custom Link Grid, and Custom Headings tools.  
  2. For banner image classes, open the image in the Attributes tool (an advanced tool) and retrieve any text in the class text area.
  1. location of classes in attributes tool
  1. Open the DesignPLUS Library Submission Form.
  2. Fill out your information, your attribution preference, and name for the submission.
  3. Select Full Theme Style from the list of options.
  4. In the Submission box, include the CSS classes for heading style, banner title style, link grid style, and banner image styles (if any).  A default image URL is optional.

theme example