Link Preview Custom CSS Options for Complete Design Control

Go Back to Main Knowledgebase

The Link Preview feature gives you full control over how your previews look through custom CSS. You can override any of the default styling to match your brand perfectly or create entirely unique designs that stand out.

Basic CSS Structure and Classes

The preview system uses several CSS classes that you can target with your custom styles. The main container uses .link-preview-tooltip, while individual elements have their own classes like .title, .description, .preview-image, and .site-info. Understanding these classes lets you modify specific parts of the preview without affecting others.

.link-preview-tooltip {
    /* Main preview container */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.link-preview-tooltip .title {
    /* Preview title styling */
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.link-preview-tooltip .description {
    /* Description text styling */
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

Color Schemes and Brand Matching

Create custom color schemes that match your website’s branding. You can use solid colors, gradients, or even background images to make your previews unique. The key is maintaining good contrast so text remains readable.

/* Dark theme preview */
.link-preview-tooltip.dark-theme {
    background: #2d3748;
    border: 1px solid #4a5568;
    color: #e2e8f0;
}

/* Bright brand colors */
.link-preview-tooltip.brand-colors {
    background: #your-brand-primary;
    border-left: 4px solid #your-brand-accent;
}

/* Glassmorphism effect */
.link-preview-tooltip.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

Image and Layout Customization

Control how images appear in your previews and experiment with different layouts. You can make images circular, add borders, or position them differently relative to the text content.

/* Circular preview images */
.link-preview-tooltip .preview-image {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    float: left;
    margin-right: 15px;
}

/* Side-by-side layout */
.link-preview-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 400px;
}

.link-preview-tooltip .preview-image {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    margin-right: 15px;
}

/* Full-width header image */
.link-preview-tooltip .preview-image.header-style {
    width: 100%;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 8px 8px 0 0;
}

Animation and Hover Effects

Add smooth animations and interactive elements that make your previews feel more engaging. Subtle animations can make the experience feel polished without being distracting.

/* Smooth slide-in animation */
.link-preview-tooltip {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.link-preview-tooltip.fade-in {
    transform: translateY(0);
    opacity: 1;
}

/* Hover effects on the preview itself */
.link-preview-tooltip:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

/* Animated border */
.link-preview-tooltip.animated-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
}

Mobile-Specific Styling

Create different styles for mobile devices to ensure your previews work well on smaller screens. You can adjust sizes, hide certain elements, or completely change the layout for mobile users.

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .link-preview-tooltip {
        max-width: 280px;
        font-size: 14px;
    }
    
    .link-preview-tooltip .preview-image {
        width: 100%;
        height: 120px;
        margin-bottom: 10px;
    }
    
    /* Hide less important elements on mobile */
    .link-preview-tooltip .site-info {
        display: none;
    }
}

Advanced Typography and Content Styling

Customize how text appears in your previews with advanced typography options. You can use custom fonts, adjust spacing, and create hierarchy through different text treatments.

/* Custom typography */
.link-preview-tooltip {
    font-family: 'Your-Custom-Font', sans-serif;
}

.link-preview-tooltip .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.link-preview-tooltip .description {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 10px;
}

/* Stylized site info */
.link-preview-tooltip .site-info {
    border-top: 1px solid #eee;
    padding-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

Custom Preview Types for Different Content

Create different preview styles for different types of content. You might want blog posts to look different from product pages or external resources.

/* Blog post previews */
.link-preview-tooltip.blog-post {
    border-left: 4px solid #4CAF50;
    background: #f8f9fa;
}

/* Product previews */
.link-preview-tooltip.product {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* External link previews */
.link-preview-tooltip.external {
    border: 2px dashed #ff9800;
    background: #fff3e0;
}

/* Add icons based on content type */
.link-preview-tooltip.blog-post::before {
    content: "📝";
    font-size: 20px;
    margin-right: 8px;
}

Performance and Loading States

Add custom loading animations or placeholders that appear while preview content is being fetched. This keeps users engaged even when there’s a slight delay.

/* Loading state */
.link-preview-tooltip.loading {
    background: #f0f0f0;
    position: relative;
    overflow: hidden;
}

.link-preview-tooltip.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

Remember to test your custom CSS across different browsers and devices to ensure consistency. Start with small changes and gradually build up to more complex customizations. The goal is to enhance the user experience while maintaining readability and performance.

397