Introduction to Full Customization
This article demonstrates how to use every available configuration option in Ghost TOC. The table of contents above uses all twelve attributes to create a fully customized experience, including state management, heading filtering, custom styling, and accessibility features.
Getting Started
To replicate this configuration, use the following HTML tag in your Ghost post.
Basic Setup Requirements
First, ensure you have installed the Ghost TOC script in your blog's footer via Code Injection.
Configuration Syntax
The complete syntax for a fully customized TOC includes all six attributes as shown in this example.
Understanding Each Attribute
Let's break down what each attribute does and why you might want to customize it.
Choosing Colors
You can use CSS color names (like "gainsboro"), hex codes (like "#34495e"), RGB values, or any valid CSS color format.
Customization Options Explained
Each option serves a specific purpose in tailoring the TOC to your needs.
Title Customization
The title attribute allows you to set any text, including emojis, as the TOC header. You can use language-specific titles for multi-language blogs.
Collapsible Feature
Setting collapsible="true" adds show/hide functionality, which is perfect for long articles where you want to save screen space.
Custom Button Text
The show-text and hide-text attributes let you customize the toggle button labels. You can use arrows, emojis, or any text that fits your blog's style.
Visual Feedback
Custom button text helps users understand the action they're about to take when clicking the toggle.
Color Scheme Options
Border and background colors help integrate the TOC seamlessly with your blog's design.
Border Color Usage
The border-color attribute controls the outline color of the collapsible container.
Background Color Usage
The bg-color attribute sets the background color, helping the TOC stand out or blend in as needed.
Practical Usage Examples
Here are some real-world scenarios where full customization is beneficial.
Branding Consistency
Match the TOC colors to your brand's color palette for a cohesive look across your blog.
Multilingual Blogs
Use different titles for different language versions of your content while maintaining consistent styling.
Accessibility Considerations
Choose colors with sufficient contrast to ensure readability for all users.
Contrast Ratios
Aim for WCAG AA compliance with a contrast ratio of at least 4.5:1 for normal text.
Clear Labels
Use descriptive button text that clearly indicates the action, helping users with screen readers.
Advanced Tips and Tricks
Take your TOC customization to the next level with these pro tips.
Using Emojis
Emojis can add visual interest to your TOC title and buttons, making them more engaging.
CSS Overrides
For even more customization, you can add custom CSS in Ghost's Code Injection to override default styles.
Building a Snippet Library
Create multiple Ghost snippets with different TOC configurations for different types of articles.
Technical Posts
Use a professional, minimal style for technical documentation and tutorials.
Casual Blog Posts
Try a more colorful, friendly approach with emojis for lifestyle or personal blog content.
Troubleshooting Common Issues
If something doesn't look right, here are common issues and solutions.
Colors Not Appearing
Ensure you're using valid CSS color formats and check for typos in attribute names.
Collapsible Not Working
Verify that collapsible is set to the string "true" (not a boolean), and check the browser console for errors.
Styling Conflicts
Your theme's CSS might override TOC styles. Use browser DevTools to inspect and identify conflicts.
Conclusion
With all six configuration options at your disposal, you can create a TOC that perfectly matches your blog's design and functionality needs. Experiment with different combinations to find what works best for your content and audience.
Next Steps
Now that you've seen full customization in action, try creating your own configuration that matches your blog's style.