Customizing VSC appearance

Pictofit Element ID Styling Documentation

This page documents the new ID-based styling approach for Pictofit UI components. Stylable elements have a specific ID that can be styled directly using CSS selectors.

Available Element IDs

Element ID	UI Element	Styling Properties
#p2f-main-app	Main application container	Font family, general typography settings
#p2f-sale-icon	Sale/discount badges	Display, visibility, background color
#p2f-price-text	Current price text	Color, font weight, font size
#p2f-old-price-text	Original/strikethrough price	Color, text-decoration
#p2f-back-button	Back navigation button	Background color, hover effects, border
#p2f-add-to-cart-button	"Add to Cart" button	Background color, hover effects, text color
#p2f-size-selection	Size selection tiles	Border color, selected state background
#p2f-add-to-cart-header	"Add to Cart" modal header	Opacity, visibility
#p2f-tuck-button	Garment tuck in/out button	Background color, text color, hover effects

Styling Example

CODE

virtualStylingBuilder.setCustomStyle(`
  :host {
      /* Main app font styling */
      #p2f-main-app {
          font-family: "Libre Baskerville", sans-serif;
      }
      /* Sale icon - hidden */
      #p2f-sale-icon {
          display: none;
      }
  
      /* Price styling */
      #p2f-price-text {
          color: rgba(0, 0, 0, 0.6);
      }
  
      #p2f-old-price-text {
          color: rgba(0, 0, 0, 0.6);
      }
  
      /* Back button styling */
      #p2f-back-button {
          background-color: #9f7a5a;
          &:hover {
              background-color: #8a6649;
          }
      }
  
      /* Add to cart button styling */
      #p2f-add-to-cart-button {
          background-color: #9f7a5a;
          &:hover {
              background-color: #8a6649;
          }
      }
  
      /* Size selection styling */
      #p2f-size-selection {
          border-color: #9f7a5a;
          &.selected {
              background-color: #9f7a5a;
          }
      }
  
      /* Add to cart header - hidden */
      #p2f-add-to-cart-header {
          opacity: 0;
      }
  
      /* Tuck button styling */
      #p2f-tuck-button {
          background-color: red;
          color: yellow;
          &:hover {
              background-color: blue;
              color: white;
          }
      }
  }
`);

ID Naming Convention

All element IDs follow the pattern p2f-<element-name> using kebab-case:

• Prefix: p2f- (short for PictoFit)
• Naming: Descriptive, kebab-case (e.g., add-to-cart-button)
• Consistency: All IDs follow the same pattern for easy recognition