Knowledge base | InkSoft Support Center

Custom Styling the InkSoft Design Studio

It is possible to use a custom CSS file to alter the default Design Studio styling. This is useful for imparting basic branding and identity into the Design Studio.

NOTE: InkSoft does not offer technical support for custom styling due to the variability in CSS file / code structuring. This is an advanced option and should only be used by experienced web designers / developers with advanced working knowledge of CSS who can test and validate their work.

Step 1: Download and use our CSS starter template

Please take advantage of our clearly commented CSS file as a guide / starting point for custom styling. Download the template here.

Template example located here: https://goo.gl/92HP0q

 

2: Upload images

If you are using custom icons / images, upload these to InkSoft's 'Store Files' area in InkSoft. This feature allows you to upload and manage custom files. Learn more about InkSoft's Store Files feature here. After uploading, you will need to copy the direct URL to the uploaded images and paste these in the custom CSS file.

Example:

/*

 Loading gif animation. Make sure to update the background image URL,

 as well as the height and width of the image that you are using.

*/

#loaderImageAnimator {

 background-image: url(http://stores.inksoft.com/images/publishers/6601/stores/mbwolf/5c958a6d-1fea-4848-8943-bf5b05b17f40.gif);

 height: 64px;

 left: -20px;

 position: relative;

 width: 64px;

}

 

3: Upload CSS file

After you create your custom CSS file and have mapped the URL for all custom images, upload it to InkSoft's 'Store Files' area in InkSoft. This feature allows you to upload and manage custom files. Learn more about InkSoft's Store Files feature here. After uploading, you will need to copy the direct URL to the uploaded CSS file.

 

3: Insert CSS path into Design Studio embed code

As seen below in line 6 of the Design Studio embed code, insert the URL path below to your uploaded custom CSS file. See this step-by-step guide to learn how to access the Design Studio embed code.

The path is: CssPath: 'Insert your URL to CSS file here',

 

Custom Styling Example and Tips

The intent of this function is to control basic styling such as fonts, colors, images. See a working example here: https://www.inksoft.com/custom-design-studio/

It is possible to style the following elements in the Design Studio:

  • TYPOGRAPHY
  • LOADING OVERLAY
  • WELCOME MODAL
  • LEFT PANEL ACTIONS
  • BUTTONS
  • PREVIEW HEADER TOOLS ( Includes Zoom, Select All, Duplicate, Layers, Undo, Redo)
  • COLORS IN DESIGN PANEL
  • EDIT TEXT PANEL
  • COLOR TOOLTIPS
  • LAYER MANAGER PANEL
  • ART LOCATIONS PANEL
  • SHARED MODAL STYLES
  • IMAGE UPLOAD MODAL
  • SAVE AND SHARE MODAL
  • QUOTE MODAL
  • CHECKOUT MODAL