Skip to main content

CSS SampleSheet

Overview​

With no ability to reference external custom stylesheets and no access to Article headers, we are forced to use inline CSS, which sucks for many reasons. Changes to styles must be made one-by-one per article.

Inline CSS is messy, impacts performance, and makes the source very difficult to read through.

MUST USE PREVIEW TO SEE THE EFFECT

This page provides CSS you can copy and use in your Articles (copy and paste using the SOURCE button in the tool bar).

Standardization Rules​

  • Paste a comment before and after any pasted CSS code so we know exactly what to copy
  • Reference the source of the CSS if it was lifted from another site.
  • Add an image of the effect if it only shows in Preview
  • Preview all CSS added to see how it effects the entire page > resolve any page-breaking CSS immediately: don't leave it here!
  • Limit CSS to a specific part of the page by using DIV IDs

Tools and References​

  • Beautify CSS: CleanCSS
  • DIV ID Limiting: Limit CSS to a specific part of the page by using DIV IDs.
  • HTML to Code Block Converter: Use a converter to put the code used right on this page for copying so you don't have to view source and find it.

References:​

  • How can I grab all css styles of an element?
    • Javascript dumpCSSText function
    • Use Chrome > Inspect > "Copy Styles"
  • Bootstrap 4.1.1 Examples (VTiger has some built-in 4.1.1 CSS, YMMV but worth a try)
  • Include external CSS stylesheet in BODY using js: Does not work in VTiger
  • How to host Files On Google Drive for CSS and other Code: Could not get this to work on Box, GDrive, or GiTHub.

Table for notes​

  • Did you know? The documents module in Vtiger CRM provides you a three-level folder hierarchy. If you create a folder at the fourth level, it will be placed under the first folder.

Simple DIV​

.simple-div {
  background-color: lightblue;
  border-left: 6px solid navy;
}