Use Custom CSS tab of your ShortPoint Design Element to add more customization to your element. You can also make it possible/impossible to copy the page design to other pages.



TABLE OF CONTENTS


Before we begin

  • Basic knowledge of CSS is required. Check our basic and advanced tutorials on how to use Custom CSS. 
  • You can use Settings and/or Advanced tabs to improve the look features of your design elements without using Custom CSS.

Customizing ShortPoint design element


Write your CSS code in the Custom CSS field. 


Important: Please, note that you don't need to add declarations for the current element, since the class for it will be auto-generated at runtime, and might be changed whenever you edit your page.



For more information, visit our solution tutorials on Custom CSS:


Check our Custom CSS solutions folder. There you will find a bunch of already created Custom CSS codes for various ShortPoint design elements.


Advanced options

You can add ID and Class attributes to your ShortPoint design elements. These options are useful to:

  • apply the CSS that overrides your previously set settings or added custom CSS codes (use either ID or Class attribute);
  • be accessed from JavaScript (use either ID or Class attribute);
  • allow copying this element (use Class attribute);
  • disable copying whole page design (use Class attribute).

Adding ID attribute


Type ID attribute name to ID field.



Adding Class attribute


Type the Class attribute name to Class field.



Note: to provide multiple CSS class names to the same element, separate them with a space (e.g: class-1 class-2 will add class-1 and class-2 as two separate CSS classes).

Allow Copying ShortPoint Design Element

To allow copying current ShortPoint design element, use the CSS Class name shortpoint-copy



By using this Class name, other users will be able to copy this element, and the whole page design.


Find out more about Copy & Paste feature, by checking these solution articles:


Disable Copying Whole Page Design


To disable copying the whole page design, add the CSS Class name shortpoint-disable-copy-all



By adding this Class to only one ShortPoint element on the page, copying whole page design will be disabled.


Related articles: