Next-Blog-AI
Home/Documentation/Styling & SEO/Styling
Back to Documentation

Customizing Styles

Learn how to customize the appearance of your Next-Blog-AI content

Overview

Next-Blog-AI provides a comprehensive styling system that allows you to customize the appearance of your blog content and listings. The package includes sensible default styles, but you can override them with your own custom CSS to match your application's design system.

When using the json format for content, you'll need to implement your own styling since you're doing the rendering yourself. This guide focuses on styling HTML content returned by the API.

CSS Classes Structure

To effectively customize the styling, it's important to understand the CSS class structure used by Next-Blog-AI:

Blog Content Classes

  • .next-blog-ai-contentMain container for blog post content
  • .next-blog-ai-commentsContainer for comments section
  • .next-blog-ai-commentIndividual comment container
  • .next-blog-ai-comment-formComment submission form

Blog List Classes

  • .next-blog-ai-listContainer for blog list
  • .next-blog-ai-list.grid-viewApplied when using grid display format
  • .next-blog-ai-list.list-viewApplied when using list display format
  • .next-blog-ai-post-cardIndividual post card in the list
  • .next-blog-ai-paginationPagination controls container

Setting Custom Styles

There are two ways to set custom styles for your Next-Blog-AI content:

1. At Initialization

You can provide custom styles when creating the Next-Blog-AI client:

import { createNextBlogAIForNextJs } from 'next-blog-ai';

// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  // Add your custom styles
  styles: {
    blogContent: `
      .next-blog-ai-content {
        max-width: 800px;
        margin: 0 auto;
        font-family: 'Georgia', serif;
      }
      
      .next-blog-ai-content h1 {
        color: #0070f3;
      }
    `,
    blogList: `
      .next-blog-ai-list {
        gap: 2rem;
      }
      
      .next-blog-ai-post-card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    `
  }
});

2. Using the setStyles Method

You can update the styles after creating the client using the setStyles method:

// Update styles after client creation
const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      /* Your custom styles */
    }
  `,
  blogList: `
    .next-blog-ai-list {
      /* Your custom styles */
    }
  `
});

Extending Default Styles

Rather than replacing the default styles completely, you can extend them by importing the default style constants and adding your customizations:

import {
  
  DEFAULT_BLOG_STYLES,
  DEFAULT_BLOG_LIST_STYLES
} from 'next-blog-ai';

// Extend the default styles
const customBlogContentStyles = `
  ${DEFAULT_BLOG_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-content h1 {
    color: #0070f3;
  }
`;

const customBlogListStyles = `
  ${DEFAULT_BLOG_LIST_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-post-card {
    border-radius: 8px;
  }
`;

// Use the extended styles
// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  styles: {
    blogContent: customBlogContentStyles,
    blogList: customBlogListStyles
  }
});

Styling Blog Content

The .next-blog-ai-content container includes the main blog post content with standard HTML elements like headings, paragraphs, lists, and images. You can style these elements using standard CSS selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    /* Typography */
    .next-blog-ai-content {
      font-family: 'Inter', sans-serif;
      line-height: 1.7;
      color: #333;
    }
    
    /* Headings */
    .next-blog-ai-content h1 {
      font-size: 2.5rem;
      color: #0070f3;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-content h2 {
      font-size: 2rem;
      color: #0070f3;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
    }
    
    /* Links */
    .next-blog-ai-content a {
      color: #0070f3;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    
    .next-blog-ai-content a:hover {
      border-color: #0070f3;
    }
    
    /* Images */
    .next-blog-ai-content img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 2rem 0;
    }
    
    /* Code blocks */
    .next-blog-ai-content pre {
      background-color: #f7f7f7;
      padding: 1rem;
      border-radius: 4px;
      overflow-x: auto;
    }
    
    .next-blog-ai-content code {
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
    }
  `
});

Styling Blog Lists

The .next-blog-ai-list container includes blog post cards arranged in either a grid or list layout. You can style the container and cards using these selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Grid layout */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    /* List layout */
    .next-blog-ai-list.list-view {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    
    /* Post cards */
    .next-blog-ai-post-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .next-blog-ai-post-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Post card elements */
    .next-blog-ai-post-card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .next-blog-ai-post-card-content {
      padding: 1.5rem;
    }
    
    .next-blog-ai-post-card-title {
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    
    .next-blog-ai-post-card-date {
      font-size: 0.875rem;
      color: #666;
      margin-bottom: 1rem;
    }
    
    .next-blog-ai-post-card-excerpt {
      color: #444;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-post-card-link {
      display: inline-block;
      color: #0070f3;
      font-weight: 500;
      text-decoration: none;
    }
    
    /* Pagination */
    .next-blog-ai-pagination {
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      gap: 0.5rem;
    }
    
    .next-blog-ai-pagination-button {
      padding: 0.5rem 1rem;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .next-blog-ai-pagination-button.active {
      background-color: #0070f3;
      color: white;
      border-color: #0070f3;
    }
  `
});

Styling for Dark Mode

You can add styles that detect and respond to dark mode using CSS media queries:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      color: #333;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      .next-blog-ai-content {
        color: #e1e1e1;
      }
      
      .next-blog-ai-content h1, 
      .next-blog-ai-content h2, 
      .next-blog-ai-content h3 {
        color: #61dafb;
      }
      
      .next-blog-ai-content a {
        color: #61dafb;
      }
      
      .next-blog-ai-content pre {
        background-color: #2d2d2d;
      }
      
      .next-blog-ai-content code {
        color: #e1e1e1;
      }
    }
  `
});

Responsive Styling

Add responsive styles to make your blog look great on all screen sizes:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Default (mobile) */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    /* Tablet */
    @media (min-width: 640px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Desktop */
    @media (min-width: 1024px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  `
});
PreviousAPI KeysNextSEO Optimization