<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div style={{backgroundColor:'red'}}>
                    <VeltCommentsSidebarWireframe.CloseButton/>
                    <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                    <VeltCommentsSidebarWireframe.Status/>
                    <VeltCommentsSidebarWireframe.FilterButton/>
                </div>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            <VeltCommentsSidebarWireframe.Filter>
                <VeltCommentsSidebarWireframe.Filter.Title/>
                <VeltCommentsSidebarWireframe.Filter.CloseButton/>
                <VeltCommentsSidebarWireframe.Filter.Location/>
                <VeltCommentsSidebarWireframe.Filter.People/>
                <VeltCommentsSidebarWireframe.Filter.Category/>
                <VeltCommentsSidebarWireframe.Filter.Priority/>
                <VeltCommentsSidebarWireframe.Filter.CommentType/>
                <VeltCommentsSidebarWireframe.Filter.Versions/>
                <VeltCommentsSidebarWireframe.Filter.GroupBy/>
                <VeltCommentsSidebarWireframe.Filter.DoneButton/>
            </VeltCommentsSidebarWireframe.Filter>
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
            {/* Page Mode Composer */}
            <VeltCommentsSidebarWireframe.PageModeComposer/>
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

Add Custom CSS

To add custom CSS to the component, just add CSS into the wireframe template.

To add Custom CSS, ensure that the Shadow DOM is turned off for the SDK component you are styling.

Conceptual Example:

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        ...
        {/* Header */}
        <VeltCommentsSidebarWireframe.Header>
            <div style={{backgroundColor:'red'}}>
                <VeltCommentsSidebarWireframe.CloseButton/>
                <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                <VeltCommentsSidebarWireframe.Status/>
                <VeltCommentsSidebarWireframe.FilterButton/>
            </div>
        </VeltCommentsSidebarWireframe.Header>
        ...
</VeltWireframe>

<VeltWireframe>
    <VeltCommentsSidebarWireframe>
        {/* Skeleton */}
        <VeltCommentsSidebarWireframe.Skeleton />
        <VeltCommentsSidebarWireframe.Panel>
            {/* Header */}
            <VeltCommentsSidebarWireframe.Header>
                <div style={{backgroundColor:'red'}}>
                    <VeltCommentsSidebarWireframe.CloseButton/>
                    <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
                    <VeltCommentsSidebarWireframe.Status/>
                    <VeltCommentsSidebarWireframe.FilterButton/>
                </div>
            </VeltCommentsSidebarWireframe.Header>
            {/* Filter */}
            <VeltCommentsSidebarWireframe.Filter>
                <VeltCommentsSidebarWireframe.Filter.Title/>
                <VeltCommentsSidebarWireframe.Filter.CloseButton/>
                <VeltCommentsSidebarWireframe.Filter.Location/>
                <VeltCommentsSidebarWireframe.Filter.People/>
                <VeltCommentsSidebarWireframe.Filter.Category/>
                <VeltCommentsSidebarWireframe.Filter.Priority/>
                <VeltCommentsSidebarWireframe.Filter.CommentType/>
                <VeltCommentsSidebarWireframe.Filter.Versions/>
                <VeltCommentsSidebarWireframe.Filter.GroupBy/>
                <VeltCommentsSidebarWireframe.Filter.DoneButton/>
            </VeltCommentsSidebarWireframe.Filter>
            {/* List */}
            <VeltCommentsSidebarWireframe.List/>
            {/* Empty Placeholder */}
            <VeltCommentsSidebarWireframe.EmptyPlaceholder/>
            {/* Page Mode Composer */}
            <VeltCommentsSidebarWireframe.PageModeComposer/>
        <VeltCommentsSidebarWireframe.Panel/>
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

Was this page helpful?

Use CSS LibraryTemplate Variables