snippyly-comment-pin {
  --velt-comment-pin-ghost-color: red;
}
1

Select the Comment Pin component

You can select the Comment Pin component. Our CSS variables are set at the component level.

2

Modify a CSS variable

Set the variable to anything you want. We expose a set of variables so you can customize the component to better match your UI.

3

Check out the table below

Reference the table below to see what parts we expose. Alternatively, you can directly inspect the component HTML to see what parts are available.

propertydefault valuedescription
--velt-comment-pin-size2.5remSets the comment pin size
--velt-comment-pin-avatar-size1.5remSets the comment pin avatar size
--velt-comment-pin-bg-colorvar(--velt-purple)Sets the comment pin background color
--velt-comment-pin-border-radius6.5em 6.5em 6.5em 0.125emSets the comment pin border radius
--velt-comment-pin-box-shadow0px 8px 16px -8px rgba(15, 15, 15, 0.1)Sets the comment pin box shadow
--velt-comment-pin-ghost-colorvar(--velt-grey-3-color)Sets the comment pin ghost color
--velt-comment-pin-popover-color#a259feSets the comment pin popover color
--velt-comment-pin-border2px solid #FFFFFFSets the comment pin border
--velt-comment-pin-border-width0 15px 15px 0Sets the comment pin border width
--velt-comment-pin-border-colortransparent var(--velt-comment-pin-popover-color) transparent transparentSets the comment pin border color
--velt-comment-pin-index-border1px solid rgb(210, 210, 210)Sets the comment pin index border
--velt-comment-pin-index-font-size0.55remSets the comment pin index font size
--velt-comment-pin-index-bgwhiteSets the comment pin index background color
--velt-comment-pin-index-colorblackSets the comment pin index color
--velt-internal-lock-icon-colorwhiteSets the comment pin lock icon color
--velt-internal-lock-bg-colorgreySets the comment pin lock background color
--velt-comment-pin-bubble-sizeclamp(20px, 24px, 30px)Sets the comment pin bubble size
--velt-comment-pin-bubble-border-radius50%Sets the comment pin bubble border radius
--velt-comment-pin-bubble-offset-top-8pxSets the comment pin bubble offset top
--velt-comment-pin-bubble-offset-right-8pxSets the comment pin bubble offset right
--velt-comment-pin-bubble-offset-leftunsetSets the comment pin bubble offset left
--velt-comment-pin-bubble-offset-bottomunsetSets the comment pin bubble offset bottom
--velt-comment-pin-highlight: 4px solid green2px dashed #a259feSets the hightlighter outline style. Set to none to hide outline.

Was this page helpful?