Style Overview

The Announcement HTML will pick up styles based on what your website already defines. At default, Vinoshipper provides styling which wraps the content similar to how Product Item looks. However, you are welcome to disable style for Announcement and provide your own.

Only style .vs-announcement-stage

By styling .vs-announcement-stage, your styles won't apply when no announcement exists. This is especially important if you wish for styles like margin or padding to only apply when an announcement exists.

Basic Theming

By default, the theme variable defined in Configuration is used with every component; no additional configuration needed.

Announcement HTML will still inherit from the page's style.

Custom / No Vinoshipper Style

If you wish to remove all Vinoshipper provided style from all Announcement components, you will need to set the announcementStyle Configuration setting to disable loading Vinoshipper's Announcement style:

window.document.addEventListener('vinoshipper:loaded', () => {
  window.Vinoshipper.init(000, {
    announcementStyle: false,
  })
})

This setting will only disable Vinoshipper styles for Announcement components. All other styles will be loaded.

When styling, be sure to account for all possible basic HTML styles including Headings 1 - 6, paragraph, blockquote, lists (ordered & unordered), and links.