Skip to main content

Advanced Styling

Take your ShopGuide chat customization to the next level with advanced styling techniques. This guide covers custom CSS, animations, responsive design, and professional-grade customization options.

Custom CSS Implementation​

CSS Architecture for Chat Styling​

CSS Variables and Custom Properties

:root {
  /* Brand Colors */
  --chat-primary: #your-brand-color;
  --chat-secondary: #complementary-color;
  --chat-accent: #highlight-color;
  
  /* Typography */
  --chat-font-family: 'Your Brand Font', sans-serif;
  --chat-font-size-base: 14px;
  --chat-line-height: 1.5;
  
  /* Spacing */
  --chat-spacing-xs: 4px;
  --chat-spacing-sm: 8px;
  --chat-spacing-md: 16px;
  --chat-spacing-lg: 24px;
  
  /* Borders and Shadows */
  --chat-border-radius: 12px;
  --chat-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Modular CSS Structure

  • Base styles: Core chat container and typography
  • Component styles: Individual chat elements (messages, buttons, inputs)
  • Utility classes: Reusable spacing, color, and layout classes
  • Responsive styles: Device-specific adaptations

CSS Architecture

Advanced Selector Techniques​

Targeting Specific Chat Elements

/* Chat container styling */
.shopguide-chat-container {
  background: var(--chat-background);
  border-radius: var(--chat-border-radius);
  box-shadow: var(--chat-shadow);
}

/* User message styling */
.shopguide-message--user {
  background: var(--chat-primary);
  color: white;
  margin-left: auto;
}

/* Bot message styling */
.shopguide-message--bot {
  background: var(--chat-secondary);
  color: var(--chat-text-color);
  margin-right: auto;
}

/* Button styling */
.shopguide-button {
  background: var(--chat-accent);
  border: none;
  border-radius: var(--chat-border-radius);
  padding: var(--chat-spacing-sm) var(--chat-spacing-md);
  transition: all 0.2s ease;
}

.shopguide-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

Animation and Micro-interactions​

Entrance Animations​

Smooth Chat Appearance

@keyframes chatSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shopguide-chat-container {
  animation: chatSlideIn 0.3s ease-out;
}

Message Animations

@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shopguide-message {
  animation: messageAppear 0.2s ease-out;
}

Interactive Feedback​

Button Hover Effects

.shopguide-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.shopguide-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s;
}

.shopguide-button:hover::before {
  left: 100%;
}

Typing Indicator Animation

@keyframes typingDots {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.typing-indicator span {
  display: inline-block;
  animation: typingDots 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

Animations

Responsive Design Mastery​

Advanced Breakpoint Strategy​

Custom Breakpoint System

/* Mobile First Approach */
.shopguide-chat-container {
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
}

/* Tablet and up */
@media (min-width: 768px) {
  .shopguide-chat-container {
    width: 400px;
    height: 600px;
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .shopguide-chat-container {
    width: 450px;
    height: 650px;
  }
}

/* Large screens */
@media (min-width: 1440px) {
  .shopguide-chat-container {
    width: 500px;
    height: 700px;
  }
}

Container Queries (Modern Browsers)​

@container (max-width: 300px) {
  .shopguide-message {
    font-size: 12px;
    padding: 8px;
  }
}

@container (min-width: 400px) {
  .shopguide-message {
    font-size: 14px;
    padding: 12px;
  }
}

Fluid Typography​

.shopguide-chat-container {
  font-size: clamp(12px, 2.5vw, 16px);
}

.shopguide-heading {
  font-size: clamp(16px, 4vw, 24px);
}

Theme Integration Techniques​

CSS-in-JS Integration​

Dynamic Theming

.shopguide-chat-container {
  background: var(--theme-background, #ffffff);
  color: var(--theme-text, #333333);
  border: 1px solid var(--theme-border, #e0e0e0);
}

/* Automatically inherit theme colors */
.shopguide-chat-container {
  background: inherit;
  color: inherit;
  font-family: inherit;
}

Dark Mode Support​

@media (prefers-color-scheme: dark) {
  .shopguide-chat-container {
    --chat-background: #1a1a1a;
    --chat-text-color: #ffffff;
    --chat-border-color: #333333;
  }
}

/* Manual dark mode toggle */
[data-theme="dark"] .shopguide-chat-container {
  --chat-background: #1a1a1a;
  --chat-text-color: #ffffff;
  --chat-border-color: #333333;
}

High Contrast Mode​

@media (prefers-contrast: high) {
  .shopguide-chat-container {
    border: 2px solid;
    background: white;
    color: black;
  }
  
  .shopguide-button {
    border: 2px solid black;
    background: white;
    color: black;
  }
}

Theme Integration

Performance Optimization​

CSS Performance Best Practices​

Efficient Selectors

/* Good: Specific, efficient selectors */
.shopguide-message--user { }
.shopguide-button--primary { }

/* Avoid: Overly complex selectors */
.shopguide-chat-container div div span.message { }

Hardware Acceleration

.shopguide-chat-container {
  /* Trigger hardware acceleration */
  transform: translateZ(0);
  will-change: transform;
}

/* Use transform and opacity for animations */
.shopguide-message {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

Critical CSS Inlining​

<style>
/* Critical chat styles inlined for faster loading */
.shopguide-chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>

Advanced Layout Techniques​

CSS Grid for Chat Layout​

.shopguide-chat-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "messages"
    "input";
  height: 100%;
}

.shopguide-header {
  grid-area: header;
}

.shopguide-messages {
  grid-area: messages;
  overflow-y: auto;
}

.shopguide-input {
  grid-area: input;
}

Flexbox for Message Layout​

.shopguide-message-container {
  display: flex;
  flex-direction: column;
  gap: var(--chat-spacing-sm);
}

.shopguide-message {
  display: flex;
  max-width: 80%;
  align-self: flex-start;
}

.shopguide-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

Sticky Positioning for Headers​

.shopguide-header {
  position: sticky;
  top: 0;
  background: var(--chat-background);
  z-index: 10;
  backdrop-filter: blur(10px);
}

Advanced Layout

Accessibility in Advanced Styling​

Focus Management​

.shopguide-button:focus {
  outline: 2px solid var(--chat-accent);
  outline-offset: 2px;
}

.shopguide-input:focus {
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 3px rgba(var(--chat-accent-rgb), 0.1);
}

Screen Reader Optimization​

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Reduced Motion Support​

@media (prefers-reduced-motion: reduce) {
  .shopguide-chat-container,
  .shopguide-message,
  .shopguide-button {
    animation: none;
    transition: none;
  }
}

Browser Compatibility​

Progressive Enhancement​

/* Base styles for all browsers */
.shopguide-chat-container {
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

/* Enhanced styles for modern browsers */
@supports (backdrop-filter: blur(10px)) {
  .shopguide-header {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
  }
}

@supports (display: grid) {
  .shopguide-chat-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

Vendor Prefixes​

.shopguide-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
  
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

Testing and Debugging​

CSS Debugging Tools​

Browser DevTools Usage

  • Inspect Element: Examine applied styles and computed values
  • CSS Grid/Flexbox Inspector: Visualize layout structures
  • Animation Inspector: Debug and fine-tune animations
  • Performance Panel: Monitor CSS performance impact

CSS Validation

  • W3C CSS Validator: Check for syntax errors
  • Accessibility checkers: Verify color contrast and focus states
  • Cross-browser testing: Ensure consistent appearance

Common Styling Issues​

Z-index Problems

/* Create new stacking context */
.shopguide-chat-container {
  position: relative;
  z-index: 1000;
}

Specificity Conflicts

/* Use more specific selectors when needed */
.shopguide-chat-container .shopguide-message {
  /* Styles that need higher specificity */
}

Next Steps​

Master advanced chat styling:

Advanced styling allows you to create a truly unique and branded chat experience. Remember to balance visual appeal with performance and accessibility.