Solo

The Complete Drupal Theme With No Code Required

Stop choosing between simple and powerful. Solo gives you both: enterprise-grade features with complete UI customization. No subtheme needed. No CSS compilation. No Node.js. Just install and build.

Solo is a modern, high-performance Drupal 10/11 theme designed for site builders who want professional results without developer dependency. As the successor to the well-regarded W3CSS Theme, Solo has been rebuilt from the ground up with modern web standards: pure vanilla JavaScript (zero jQuery dependency), WCAG 2.1 AA accessibility compliance, and a comprehensive feature set that eliminates the need for custom code.

The theme provides 24 customizable block regions, five responsive breakpoints, and a robust four-level mega menu system, allowing it to adapt seamlessly to any content strategy. It includes smart sidebar navigation with auto-repositioning submenus, intelligent menu state management, and advanced layout options to accommodate diverse site structures, all configurable from the theme settings UI.

Solo supports 15 customizable color fields per region and over 50 professionally designed color schemes, giving site builders full creative control while maintaining a lightweight, accessible framework. Whether you are building your first Drupal site, managing a corporate website, or delivering client projects, Solo enables you to create with confidence, clarity, and efficiency.

View the Solo Theme Live Demo

Why Site Builders Choose Solo

• 50 Professional Color Schemes: Apply a polished design instantly with one click, or customize further with 15 color fields per region for complete brand control. No CSS knowledge required.
• Zero jQuery Dependency: Built entirely with pure vanilla JavaScript for faster load times, better performance scores, and no jQuery version conflicts or upgrade headaches that plague other themes.
• WCAG 2.1 AA Accessible Out of the Box: Full keyboard navigation following ARIA Authoring Practices, screen reader announcements, configurable skip links, and accessible color contrasts. Meet compliance requirements without additional work.
• 24 Flexible Regions: Complete layout control from the theme settings UI. Each region has its own configuration options, and the intelligent design system hides unused settings to keep the admin interface clean.
• 4-Level Mega Menus: Complex navigation made simple. Choose between hover or click behaviors, configure 14 different mega menu layouts, and enjoy smart submenu positioning that automatically prevents viewport overflow.
• No Build Tools Required: Unlike many contributed themes that require Node.js, Gulp, or CSS compilation, Solo works immediately after installation. No command line, no package managers, no compilation steps.
• RTL Language Support: Full right-to-left language support throughout the theme, with automatic layout mirroring, adapted menu directions, and RTL-aware keyboard navigation.
• Preloader & Back to Top: Optional load-based preloader (hides when the page has actually loaded; no minimum display time) with logo, text, colors, and “force show” for testing) and an accessible back-to-top button. Both configurable under Global Settings.
• Menu Template Assignment: Assign any of Solo’s responsive menu Twig templates to any menu in the system (primary, footer, or custom), so you can control how each menu looks and behaves without coding.
• Developer-Friendly When You Need It: Clean, modular Twig structure with preprocess hooks, comprehensive template suggestions, and debug mode for troubleshooting. Extend Solo when needed without fighting the theme.

Who Is Solo For?

• Site Builders: Create professional, accessible sites without writing code or creating subthemes. Everything is configurable from the Drupal admin UI.
• Small Businesses & Nonprofits: Launch quickly with 50 ready-to-use color schemes and comprehensive built-in features. Get a professional site without a professional budget.
• Agencies & Freelancers: Deliver client sites faster with a complete feature set. Spend time on content strategy, not fighting theme limitations or building basic functionality.
• Government & Education: Meet WCAG 2.1 AA and Section 508 accessibility requirements out of the box. Solo's accessibility features have been built as a core principle, not an afterthought.
• Enterprise Organizations: Benefit from professional-grade performance optimization, centralized state management, and clean architecture that scales with your needs.
• Developers: When you do need custom work, Solo's modular JavaScript architecture, comprehensive Twig suggestions, and built-in debug mode make extension straightforward.
• W3CSS Theme Users: Seamless upgrade path from the original W3CSS theme with enhanced features, better performance, and full Drupal 10/11 compatibility.

Upgrade from the W3CSS theme to Solo using these video resources:

Part One - Part Two - Solo Theme Playlist

Extend Solo with Companion Modules

Want to build advanced layouts without custom development? The Paragraphs Bundles module allows you to add complex components such as 3D cards, slideshows, carousels, tabs, and accordions, enhancing your site's flexibility and visual presentation — all while maintaining the no-code philosophy.

Several Paragraphs Bundles components are now available as Views styles through the Vanilla Views suite (F.L.A.S.H.C.R.P.T.B), a collection of lightweight Drupal modules that enhance the visual and interactive capabilities of Drupal Views using pure vanilla JavaScript. The suite includes:

Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Selectify was initially planned as a feature within Solo but has been released as a standalone contributed module to benefit all Drupal themes. It transforms standard radio buttons, checkboxes, and select lists into modern, interactive elements while maintaining accessibility standards. Selectify enhances search filters, content editing forms, and user interaction components, making forms more intuitive and visually consistent.

The Solo theme and Paragraphs Bundles module for Drupal - Comprehensive Landing Page Examples Showcasing All Paragraph Bundles: Blue Skyline - Bright Den - Calm Corner - Color Whirl - Dawn View - Dream Road - Dusk Deck - Earth Base - Green Park - Jewel Place - Ocean Field - Peace Beach - Red Hill - Ring Retreat - Secret Garden - Shadow Line - Shine Land - Sky Pattern - Space Art - Star Circle - Star Gate - Star Home - Summit Point - Sun Plains

The Solo theme for Drupal offers a unique dynamic color scheme feature, allowing users to easily apply and switch between 50 professional color palettes to enhance their website's design without needing to modify code: Berry Blue Dreams - Blueberry Skies Quartet - Blushing Magnolia - Celestial Blue Depths - Charcoal Gray - Classic Ivory Lace - Cotton Candy Whispers - Crimson Denim Night - Deep Ocean Shadows - Deep Sea Echo - Denim Twilight - Dusk Shadow Fusion - Eclipse Noir - Enchanted Forest Zest - Ethereal White Harmony - Flaming Sapphire - Galactic Stone Hues - Gentle Ivory Breeze - Gunmetal Echo - Indigo Pulse - Ivory Whisper - Jungle Denim Fusion - Lemon Lime Forest - Luminous Alabaster - Magnolia Afternoon - Metallic Nebula - Midnight Denim Swirl - Midnight Garden Trio - Midnight Navy Duo - Midnight Whispers - Monochrome Splash - Mystic Ash Twilight - Nightfall in Paris - Nocturnal Velvet - Obsidian Cascade - Ocean Depths Mystery - Parisian Skyline - Porcelain Brilliance - Porpoise Dream - Pristine Porcelain Glow - Raspberry Nightfall - Razzle Onyx Elegance - Royal Azure Flame - Rustic Redwood Charm - Salmon Denim Fade - Silken Shadow Whisper - Smokey Quartz Symphony - Soft Silk Elegance - Twilight Ash Mystique - Urban Stone Shadows

Paragraphs Bundles Live Examples

1. Paragraph Bundle 3D Carousel Example
2. Paragraph Bundle Carousel Example
3. Paragraph Bundle 3D Flip Box Example
4. Paragraph Bundle Accordion Example
5. Paragraph Bundle Alert Example
6. Paragraph Bundle Block Content Example
7. Paragraph Bundle Card Three Columns Example
8. Paragraph Bundle Card Two Columns Example
9. Paragraph Bundle Contact Form Example
10. Paragraph Bundle Drupal Block Example
11. Paragraph Bundle Hero Example
12. Paragraph Bundle Icon Example (Google Material Symbols & Image)
13. Paragraph Bundle Image (Original Size) Example
14. Paragraph Bundle Image Background Example
15. Paragraph Bundle Image Overlay Example
16. Paragraph Bundle Lightbox Image Grid Example
17. Paragraph Bundle Link Example
18. Paragraph Bundle Modal Example
19. Paragraph Bundle Node Reference Example
20. Paragraph Bundle One Column Example
21. Paragraph Bundle Parallax Example
22. Paragraph Bundle Responsive Image Narrow Example
23. Paragraph Bundle Responsive Image Wide Example
24. Paragraph Bundle Simple Example
25. Paragraph Bundle Slideshow Example
26. Paragraph Bundle Tabs Example
27. Paragraph Bundle Three Columns Example
28. Paragraph Bundle Two Columns Example
29. Paragraph Bundle Views Example
30. Paragraph Bundle Webform Example
31. PB Content & PB Block Types Example - Understanding the PB Paragraphs Content Type and PB Block Type

Features

24 Customizable Regions for Flexible Layouts

Solo, a fully responsive Drupal 10/11 theme, offers 24 distinct regions, each with its own configuration options. This allows you to customize your site's layout to fit your exact needs, whether you are building a personal blog, corporate website, portfolio, or e-commerce store. Solo’s regions support a variety of content types and layouts — from main content areas to sidebars, headers, footers, and more. Each region automatically receives a unique CSS class based on the actual width of visible regions, ensuring precise responsiveness and a polished, professional look on every screen size.

Intelligent Design for a Clean Admin Experience

Solo’s intelligent design system hides unused region settings from the theme configuration page, reducing clutter for site builders. This ensures a clean, manageable interface, allowing you to focus on the configurations you actually use while speeding up administrative workflows.

Responsive Theme with Five Customizable Breakpoints

The Solo theme adapts its layout seamlessly across desktops, tablets, and mobile devices. With five customizable breakpoints for both the site and menus, Solo ensures your content remains accessible, visually appealing, and optimized for SEO and performance across all devices.

Advanced Four-Level Menu System with Mega Menu Support

Solo features a four-level primary menu system with optional responsive mega menu support, ideal for content-rich Drupal sites requiring structured navigation. Choose hover or click behaviors, supporting advanced navigation while maintaining accessibility and responsiveness.

Smart Menu Positioning and State Management

Solo includes intelligent menu features that enhance user experience:

• Auto-Repositioning Submenus: Dropdown menus automatically flip direction when approaching viewport edges, preventing overflow and ensuring menus are always fully visible.
• Centralized State Management: A sophisticated menu state manager coordinates all menu components, preventing conflicts and ensuring consistent behavior across hover, click, and keyboard interactions.
• Click-Outside-to-Close: Menus automatically close when users click outside the menu area.
• Mobile Focus Management: When opening mobile menus, focus is automatically moved to the first menu item for seamless keyboard navigation.

Built-in Sidebar Menu for Secondary Navigation

Solo provides a sidebar main menu (off-canvas navigation) for enhanced navigation on content-heavy sites such as blogs, documentation hubs, and knowledge bases. The sidebar menu includes proper focus trapping when open, Escape key to close, and automatic focus restoration when closed, helping users access content efficiently through persistent navigation structures.

Flexible Menu Templates for Advanced Navigation

Solo includes a comprehensive suite of menu templates for left/right sidebars, footers, primary menus, and user account menus, ensuring consistent design across your site. Advanced responsive menu templates are available with hover or click activation, multi-level dropdown structures, and horizontal/vertical layouts, with full LTR/RTL support, allowing seamless integration of simple or complex navigation as needed.

15 Color Fields Per Region for Full Brand Control

Solo offers 15 configurable color fields per region, giving you full control over your site's color identity, including background, text, heading, links, buttons, and border colors. This ensures your Drupal site aligns perfectly with your branding guidelines across all pages.

Flexible Layout Options for Every Page

Solo supports seven two-column, three three-column, and four four-column layouts per page, allowing you to tailor content presentation to your exact needs, whether you are building landing pages, portfolios, or structured content grids.

Visual Blueprint Guide in Theme Settings

Solo includes an integrated visual blueprint guide within the theme settings, displaying the structure and positions of all regions for intuitive management. This feature assists agencies and teams in onboarding and planning site layouts efficiently.

Advanced Dynamic Body and Element Classes

Solo automatically applies dynamic classes to <body> and other key elements based on context (node ID, taxonomy terms, view IDs, user IDs, and admin areas), enabling granular styling and advanced theming workflows.

Advanced Search Management

Solo enhances Drupal’s search functionality with features such as:

• Automatic inclusion of hidden content types in advanced search results while keeping filters uncluttered.
• Search filters and exposed Views forms styled consistently with the theme.
• Optional teaser mode for search result displays.

Global Site and Content Width Control

Adjust the width of your site globally, by content type, or by individual node with eight presets, including fixed pixel widths and 100% full width, enabling complete control over your site's presentation on various screens.

Predefined Color Scheme Themes

Solo includes over 50 professionally designed color scheme themes that can be applied site-wide or conditionally by content type, taxonomy, or URL, allowing rapid theming while maintaining consistency across your project.

Accessibility and ARIA Support

Solo is built with WCAG 2.1 AA accessibility as a core principle, providing a comprehensive suite of accessibility features:

• Skip Links: Configurable skip links for header, navigation, main content, and footer regions.
• ARIA Landmarks: Proper ARIA roles and landmarks for all major regions, enhancing screen reader navigation.
• Full Keyboard Navigation: Complete keyboard support for all menu types following ARIA Authoring Practices:
  • Arrow keys navigate within menus (with optional wrapping)
  • Tab key exits menus to the next focusable element (no focus trap)
  • Enter/Space activates menu items
  • Escape closes submenus and returns focus to parent
  • Home/End keys jump to first/last menu items
• Screen Reader Announcements: Dynamic announcements via Drupal.announce() for menu state changes.
• Focus Management: Roving tabindex implementation ensures logical focus order and visible focus indicators.
• Accessible Color Contrasts: All predefined color schemes are designed with sufficient contrast ratios.

Animation and Reading Mode Options

Solo supports smooth scroll-based animations for elements and an optional reading mode that limits content width for long-form reading, improving user experience and readability on articles and blogs.

Optimized for Performance and SEO

Solo is lightweight and high-performance, using clean semantic HTML, no jQuery dependency, and optimized CSS for fast load times, helping your site maintain high Lighthouse scores while providing a polished, modern user experience.

Preloader, Back to Top, Menu Template Assignment, and Formatted Copyright

These features give site builders more control over the loading experience, scroll behavior, menu presentation, and footer content—all configurable from the theme settings.

Preloader (Global Settings)

Solo includes an optional load-based preloader that displays while the page is loading and hides when the page has actually loaded (window.load). It does not add extra loading time: fast loads show it briefly or barely; slow loads keep it visible until load completes. Configure it under Global Settings:

• Enable or disable the preloader site-wide.
• Visibility: hide on admin routes, hide for authenticated users, or use path rules.
• Style (e.g. spinner), optional logo URL and text, and background/text colors (same pattern as region colors).
• Critical CSS in <head> and markup in Twig to avoid flash of unstyled content; 8s timeout fallback for hung resources; late-script safe.
• “Force show for testing” option to display the preloader for 30 seconds on every page when tuning logo, text, and colors.

Back to Top (Global Settings)

Solo includes an accessible Back to top button, configurable under Global Settings:

• Enable or disable the button site-wide.
• Visibility: disable on admin routes, for authenticated users, or hide on small screens; set scroll distance (e.g. 200–800 px) before the button appears.
• Position: bottom-right or bottom-left.
• Style: solid or outline, with optional background and icon colors.
• Icon choice: arrow-up, chevron-up, or arrow-minimal.
• Built for accessibility: proper button, aria-label, visibility controlled via IntersectionObserver, and respect for reduced motion.

Menu Template Assignment (Global Settings)

Under Global Settings, Solo provides Menu template assignment: assign any of the theme’s responsive menu Twig templates to any menu in your system (primary menu, footer menu, or custom menus). You can place the main menu in the header and force it to use a specific responsive template, or give each menu its own look and behavior—all without writing code.

Formatted Copyright and Credit Text

Solo supports a single formatted text field for copyright and credit in the footer. When enabled, you enter all copyright, legal text, links, ICP, or approval info in one rich-text field with a chosen text format, instead of using separate plain-text fields. The four separate copyright/credit fields can still be used when this option is off.

Libraries and Font Management

Solo enables local use of w3.css, supports Font Awesome (versions 4, 5, 6), and offers Google Font integration with 50 fonts for global site typography, 26 fonts for headings, and 25 fonts for targeted HTML tags, giving you complete control over your site's typography without custom coding.

Integrated Social Media Icon Management

Solo offers configurable social media icons (size, color, visibility) for 20+ platforms, including Facebook, X (Twitter), Bluesky, Instagram, YouTube, Mastodon, Telegram, TikTok, Threads, LinkedIn, Pinterest, Reddit, Snapchat, WhatsApp, and others, enhancing your site's connectivity with your audience.

Developer-Friendly and Extendable

Solo provides a clean, modular Twig structure with preprocess hooks, region-based suggestions, and advanced theming support, making it easy for developers to extend, customize, and integrate into complex Drupal builds while maintaining best practices for maintainability.

Enhanced Forms and Input Styling

Solo enhances forms site-wide with:

• Color-coded system tabs for consistent UI.
• Toggleable radio/checkbox styling.
• Aligned input field and button styling across Views exposed filters, search forms, and standard forms, ensuring a cohesive user experience.
• Smart field state detection with CSS classes for has-value, is-required, and has-error states.
• Entity reference field detection and styling.
• Autocomplete message handling.

Popup Login Modal System

Solo includes a fully-featured popup login modal that provides a modern, accessible login experience:

• Modal Overlay: Configurable overlay with adjustable opacity and z-index control.
• Focus Trap: Keyboard focus is contained within the modal while open, following accessibility best practices.
• Escape Key Support: Press Escape to close the modal instantly.
• Click Outside to Close: Optionally close the modal by clicking the overlay background.
• Focus Restoration: When closed, focus returns to the element that triggered the modal.
• Screen Reader Announcements: Modal state changes are announced to assistive technologies.
• Custom Triggers: Configure custom CSS selectors to trigger the login modal from any element.
• Animation Control: Adjustable animation duration for smooth open/close transitions.

Comment Display Customization

Solo provides extensive control over how comments are displayed on your site:

• Heading Position: Choose whether the comment heading appears before or after comment content.
• Author Display: Show or hide the comment author's name.
• Date Display: Show or hide comment dates, with support for relative time format ("2 hours ago").
• Author Picture: Toggle visibility of user profile pictures in comments.
• Permalink: Show or hide the permalink to individual comments.
• New Comment Indicator: Highlight new comments since the user's last visit.
• Comment Form Position: Place the comment form before or after the existing comments list.

Performance Optimization

Solo is engineered for optimal performance with modern web standards:

• Zero jQuery Dependency: Built entirely with vanilla JavaScript for faster load times and reduced overhead.
• Intersection Observer API: Scroll-based animations use the performant Intersection Observer API instead of scroll event listeners.
• Throttle and Debounce: Event handlers are optimized with throttle and debounce techniques to prevent performance degradation.
• Dynamic File Caching: Custom CSS and JavaScript files are cached with MD5 hashes for efficient browser caching.
• Deferred Script Loading: Non-critical scripts are loaded with defer attributes to prevent render blocking.
• Clean Semantic HTML: Minimal, semantic markup reduces page weight and improves SEO.

Developer Tools and Debugging

Solo includes features specifically designed for developers and agencies:

• Debug Mode: Enable menu debug mode to output diagnostic information to the browser console for troubleshooting.
• Verbose Logging: Configurable verbosity levels for detailed or minimal console output.
• Modular Architecture: Clean separation of JavaScript modules (keyboard, focus, navigation, state management) for easy customization.
• Dynamic CSS/JS Injection: Add custom CSS and JavaScript directly from theme settings without creating a sub-theme.
• Extensible Template System: Comprehensive Twig template suggestions for forms, blocks, menus, nodes, and more.

RTL Language Support

Solo provides full right-to-left (RTL) language support throughout the theme:

• Automatic layout mirroring for RTL languages.
• Menu dropdown directions adapt to language direction.
• Sidebar menu opens from the appropriate side based on language.
• All keyboard navigation respects RTL context.

Conclusion: A Versatile Drupal Theme for All Projects

Solo is the perfect choice for Drupal site builders who want advanced design control without unnecessary complexity. Whether you are building a blog, business site, documentation hub, or portfolio, Solo offers the performance, flexibility, and responsiveness you need to deliver a professional, accessible, and visually striking online presence.

Regions

Solo Regions Overview

The Solo theme encompasses two types of regions: Single and Grouped regions. A Single region is characterized by having its own wrapper with no adjacent regions. Examples of this include the header, primary menu, highlighted, etc. On the other hand, Grouped regions consist of 3 or 4 regions that are collectively wrapped, with the horizontal open space evenly distributed among them. Examples of Grouped regions include the top, main, bottom, and footer.

Single Regions

The theme consists of the following single regions:

1. Popup Login Block
2. Fixed Search Block
3. Header
4. Primary Sidebar Menu
5. Primary Menu
6. Welcome Text
7. Highlighted
8. System Messages
9. Page Title
10. Breadcrumb
11. Footer Menu Container

All single regions are visible on all site pages, with the exception of the 'Page Title'. The 'Page Title' is not visible on the home page only.

Grouped Regions

The theme also includes the following grouped regions:

• TOP
  12. Top First Container
  13. Top Second Container
  14. Top Third Container
• MAIN
  15. Left Sidebar
  16. Content
  17. Right Sidebar
• BOTTOM
  18. Bottom First Container
  19. Bottom Second Container
  20. Bottom Third Container
  21. Bottom Fourth Container
• FOOTER
  22. Footer First Container
  23. Footer Second Container
  24. Footer Third Container

Theme Architecture

The div element with the class page-wrapper wraps around 24 distinct regions. Both the page-wrapper and each of these regions can have up to 15 different color inputs applied to them. The color inputs can be categorized as follows:

• General

1. Background color
2. Text color
3. Border color
4. HTML heading color (h1, h2, h3)
5. Background color for Form Input Field

Links

6. Text link color
7. Text link hover color

Menus

8. Text menu link color
9. Text menu link hover color
10. Background menu link color
11. Background menu link hover color

Buttons

12. Text color for buttons
13. Text hover color for buttons
14. Background button color
15. Background button hover color

The construction of the 15 colors is as follows: First, apply global colors to the page wrapper. Then, for each region, apply specific colors. Note that the colors of the regions will override the global colors.

Theme Settings

Blueprint

The blueprint for the Solo theme regions is a structured layout that defines the various sections of a web page. Here's a brief description of each region:

• highlighted: This block is for highlighted or important content or site alert.
• popup_login_block: This is a block that pops up for user login.
• fixed_search_block: This block is for the search bar, which is fixed and does not move as the user scrolls.
• header: This is the topmost part of the webpage, usually containing the logo and some navigation links.
• primary_sidebar_menu: This is the main sidebar menu, usually located on the left or right side of the webpage.
• primary_menu: This is the main navigation menu, usually located in the header.
• welcome_text: This is a text block that welcomes the user to the website or full width hero.
• top_first, top_second, top_third: These are container blocks located at the top of the webpage.
• system_messages: This block displays system messages to the user.
• page_title: This block displays the title of the current page.
• breadcrumb: This block provides navigation links showing the user's path to the current page.
• sidebar_first (Left Sidebar), sidebar_second (Right Sidebar): These are the left and right sidebars of the webpage.
• content: This is the main content area of the webpage.
• bottom_first, bottom_second, bottom_third, bottom_fourth: These are container blocks located at the bottom of the webpage.
• footer_first, footer_second, footer_third: These are container blocks located in the footer of the webpage.
• footer_menu: This is the navigation menu located in the footer.

Global Site Settings

• Solo theme provides a feature to adjust the entire website's width with a single click. It offers eight width options: 800, 1024, 1280, 1440, 1600, 1920, 2560 (PX), or 100%.
• Solo theme provides a feature to adjust the width for each content type with a single click. After enabling the feature, you can set the width for each content type. It offers eight width options: 800, 1024, 1280, 1440, 1600, 1920, 2560 (PX), or 100%.
• Solo theme provides a feature to adjust the width for each node with a single click. After enabling the feature, a field will be added to each node. You can set the width for the page when you edit it. It offers eight width options: 800, 1024, 1280, 1440, 1600, 1920, 2560 (PX), or 100%.
• Solo theme provides a feature to adjust the entire website's breakpoints with a single click. It offers 5 breakpoints options: 576, 768, 992, 1200, 1400 (PX).
• Solo theme provides a feature to adjust the entire website menus' breakpoints with a single click. It offers 5 breakpoints options: 576, 768, 992, 1200, 1400 (PX).
• Solo theme allows you to alter the spaces between regions to modify the layout with a single click. It offers five different space sizes applicable to the entire website.
• Solo theme enables you to modify the entire website's font size with a single click. It provides three different font sizes to choose from.
• Solo theme comes with three custom date formats. For example, Short: (3 December, 2023), Medium: (Sun December 03, 2023), Long: (7:24 PM CST, Sun December 03, 2023).
• Solo theme offers the functionality to import your own Google font and apply it to the website.
• Solo theme provides the ability to add custom CSS to the header for quick customization without the need to create a sub-theme.
• Solo theme allows you to modify the login, register, and password pages and disable the sidebars to center the login form on the page.
• Solo theme provides the ability to change the order of the header and main menu region. By default, the header is displayed first, followed by the main menu. However, this order can be changed to display the main menu before the header.
• Solo theme offers an animation feature that animates opacity upon scrolling. Initially, hidden blocks remain unseen and only start to animate and become visible as you scroll down.
• Solo theme allows you to change the layout for a field with multiple values to be displayed on the same line, separated by a space.
• Solo theme allows you to apply reading mode to any of the content types on the site. The reading mode sets the maximum width for the content region to 600 px for both Text Formatted Long and Text Formatted Long with Summary. It is for Default/Full view mode only.
• Custom Block Title Visibility:
  
  Control the visibility of block titles globally—choose to display, visually hide (for screen readers), or completely remove block titles from the HTML output.
• Global CSS and JS Injection:
  
  Inject custom CSS and JavaScript directly from the theme settings.
  • CSS Dynamic: Add global CSS that is saved to a dedicated file and cached for optimal performance.
  • JavaScript Dynamic: Add custom JavaScript that is loaded from a dedicated file for efficient site-wide delivery.
• Inline Display of Multi-value Taxonomy Terms:
  
  Display multiple values of taxonomy term fields on the same line in block layouts, improving space usage and readability.
• Color-coded Core System Tabs:
  
  Enable color-coded tabs for administrative links (such as View, Edit, Delete, and Revisions) to enhance navigation clarity.
• Enhanced Reading Mode Options:
  
  Apply reading mode to any content type, with flexible controls and guidelines to optimize line length for better content readability.
• Preloader:
  
  Load-based preloader under Global Settings: hides when the page has actually loaded (no minimum display time). Configure visibility (admin routes, authenticated users, path rules), style (spinner, text, or logo), optional logo and text, and background/text colors. Critical CSS in head; 8s timeout fallback; “Force show for testing” for 30s when tuning.
• Back to Top:
  
  Enable an accessible back-to-top button under Global Settings. Set visibility (admin routes, authenticated users, small screens), scroll distance (200–800 px), position (bottom-right or bottom-left), style (solid/outline), optional colors, and icon (arrow-up, chevron-up, arrow-minimal). The button uses proper semantics and respects reduced motion.
• Menu Template Assignment:
  
  Under Global Settings, assign any of Solo’s responsive menu Twig templates to any menu (primary, footer, or custom). Control how each menu is rendered—e.g. use the main menu in the header with a specific responsive template—without custom code.
• Formatted Copyright and Credit:
  
  In the footer/copyright settings, enable “Use a single formatted text field for copyright and credit” to enter all copyright, legal text, links, and ICP in one rich-text field with a chosen text format. When off, the four separate copyright/credit fields remain available.

Libraries and Fonts Settings

• Solo theme provides the feature to locally upload and utilize the w3.css library on the site.
• Solo theme allows you to select one library of the font awesome libraries (4, 5, or 6).
• Solo theme allows you to globally modify the font family of the entire website by selecting from 50 Google fonts.
• Solo theme enables you to globally alter the font family of h1, h2, and h3 by choosing from 26 Google fonts.
• Solo theme offers 25 special Google fonts that can be applied to any HTML tag on your site.

Search Results Settings

• Disable Advanced Search Filters: Configure which advanced search filters to disable—keywords, types, or language. When all filters are disabled, the "Advanced" section will be hidden. By default, all filters are enabled.
• Use Teaser Mode for Search Results: Display search results using the teaser view mode for a simplified layout.
• Content Types for Search Results: Choose which content types are included in search results. This setting applies to both the search form and Drupal Core Search Blocks.

Comment Display Settings

• A checkbox to position the comment heading before or after comment content.
• A checkbox to show or hide the comment author's name.
• A checkbox to show or hide comment dates.
• A checkbox to show or hide the author's profile picture.
• A checkbox to show or hide the permalink to individual comments.
• A checkbox to display a "New" indicator for comments posted since the user's last visit.
• A dropdown to position the comment form before or after the existing comments list.
• Support for relative time format display ("2 hours ago" style).

Page Wrapper Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A list for the predefined CSS classes you can use to disable some of the Solo features.
• A checkbox field to provide an option to enable smooth page load animation.
• 15 color input fields are available for global use across the entire site.

Predefined Color Scheme Settings

• A dropdown select list is available with over 50 predefined Color Scheme Themes to be applied to the entire site.

Social Media Links Settings

• Three options for the social media icons (Small, Medium, or Large).
• One input color field to change the social media icons colors.
• A checkbox field to provide an option to show or hide social icons.
• 20+ social media text fields including Facebook, X (formerly Twitter), Bluesky, Pinterest, LinkedIn, Instagram, YouTube, Mastodon, Reddit, Drupal, Snapchat, Telegram, TikTok, WhatsApp, Threads, plus email icon and RSS field.

Individual Region Settings

Highlighted Settings

• Change the visibility: Visible on all pages, Visible on Home Page Only, Visible on All Pages Except Home Page.
• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• 15 color input fields are available for use within this region.

Popup Login Block Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A checkbox field is available to allow users to login via a popup block.
• A text field is available to display the login word or modify it as needed.
• A checkbox to use inline styles for the popup modal.
• A number field to set the animation duration (in milliseconds) for open/close transitions.
• A checkbox to enable closing the modal with the Escape key.
• A checkbox to enable closing the modal by clicking outside the popup.
• A checkbox to enable focus trapping within the modal while open.
• A checkbox to announce modal state changes to screen readers.
• A checkbox to return focus to the trigger element when the modal closes.
• A text field for custom CSS selectors to trigger the login modal from additional elements.
• A number field to set the z-index value for the modal overlay.
• A number field to set the overlay opacity (0 to 1).
• 15 color input fields are available for use within this region.

Fixed Search Block Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• 15 color input fields are available for use within this region.

Header Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A text field to enter the text to be used for the Site Name Link Title and Site Logo Image Alt.
• A checkbox to activate "Skip to header content" link. A shortcut that helps users quickly access the header content of a page by bypassing repetitive navigation elements.
• A checkbox to center the Site's Logo, Site's Name, and Slogan within the header. The logo will be positioned on the left, while the site name and slogan will be centered alongside it.
• A checkbox to align the Site's Logo, Site's Name, and Slogan centrally. The logo will be positioned at the top, followed by the site name and slogan.
• A checkbox to align the Site's Logo, Site's Name, and Slogan centrally. The logo will be positioned at the top, followed by the site name and slogan. This configuration will adhere to the global breakpoints set on the site.
• A checkbox field, for LTR languages, select this option to position the Search Icon, User Menu, Sidebar Menu, and Sidebar Hamburger on the left, with the logo and site name/slogan on the right. For RTL languages, these elements will be mirrored, positioning the Search Icon, User Menu, Sidebar Menu, and Sidebar Hamburger on the right, with the logo and site name/slogan on the left. The Main Sidebar menu will open from the left in LTR and from the right in RTL.
• A dropdown selection list is available with six font sizes that can be applied to the site name for a small screen.
• A dropdown selection list is available with six font sizes that can be applied to the site name for a large screen.
• A dropdown selection list is available with 25 Google Fonts that can be applied to the site name.
• A dropdown select list is available with 24 predefined CSS text animations that can be applied to the Site name.
• 15 color input fields are available for use within this region.

Primary Sidebar Menu Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A checkbox field to provide an option to show the sidebar main menu dropdowns when hovering over them with the mouse, instead of clicking. (Big screen only).
• A checkbox field to provide an option to apply borders to menu items.
• A checkbox field to provide an option to display the logo and site name at the bottom of the menu
• 15 color input fields are available for use within this region.

Primary Menu Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A checkbox to activate "Skip to main navigation" link. A shortcut that helps users quickly access the main navigation of a page by bypassing repetitive navigation elements.
• A checkbox field provides an option to show the main menu drop-downs when hovering over them with the mouse, instead of clicking.
• A checkbox field to provide an option to apply borders to menu items.
• A checkbox field to provide an option to display the logo and site name beside the hamburger menu.
• A checkbox field to provide an option to center the main menu.
• A checkbox field, for LTR languages, tick this box to make the dropdown menu open on the left instead of the default right. For RTL languages, ticking this box will make the dropdown open on the right instead of the default left, adjusting to the language direction. (Big screen only)
• A checkbox field to provide an option to distribute the space evenly between the menu items. The first item is positioned at the start of the line, and the last item is positioned at the end of the line.
• 15 color input fields are available for use within this region.
• A checkbox field to provide an option to transform the main menu dropdowns into a Mega Menu. By checking this box you will have the following fields:
• Mega Menu Layout: This field allows you to select the column count for the mega menu from 14 different layouts. The available options are:
• 2 Columns: 50%, 50%
• 2 Columns: 67%, 33%
• 2 Columns: 75%, 25%
• 2 Columns: 80%, 20%
• 2 Columns: 33%, 67%
• 2 Columns: 25%, 75%
• 2 Columns: 20%, 80%
• 3 Columns: 33.3%, 33.3%, 33.3%
• 3 Columns: 25%, 50%, 25%
• 3 Columns: 20%, 60%, 20%
• 4 Columns: 25%, 25%, 25%, 25%
• 4 Columns: 16.6%, 33.3%, 33.3%, 16.6%
• 4 Columns: 33.3%, 16.6%, 16.6%, 33.3%
• 4 Columns: 16.6%, 33.3%, 16.6%, 33.3%
• Mega Menu Header: A checkbox field to provide an option to display the second level as headers.

Welcome Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• Change the visibility: Visible on all pages, Visible on Home Page Only, Visible on All Pages Except Home Page.
• A checkbox field to provide an option to enable full width for this region (recommended for hero sections).
• 15 color input fields are available for use within this region.

System Message

• A checkbox field to provide an option to personalize the background of your system messages to match your brand. This will disable the default background.
• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• 15 color input fields are available for use within this region.

Page Title Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A dropdown selection list is available with six font sizes that can be applied to the page title for a small screen.
• A dropdown selection list is available with six font sizes that can be applied to the page title for a large screen.
• A dropdown selection list is available with 25 Google Fonts that can be applied to the page title.
• A dropdown select list is available with 24 predefined CSS text animations that can be applied to the page title.
• A checkbox field to provide the option to center the page title.
• 15 color input fields are available for use within this region.

Breadcrumb Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A checkbox field to hide the page title from the breadcrumb.
• A checkbox field to enable Breadcrumb scrolling (Prevent Wrap).
• 15 color input fields are available for use within this region.

Footer Menu Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A dropdown select list is available with 24 predefined CSS text animations that can be applied to the page title.
• 15 color input fields are available for use within this region.
• A checkbox to activate "Skip to footer content" link. A shortcut that helps users quickly access the footer content of a page by bypassing repetitive navigation elements.

Copyright and Credit Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• Text field for dynamic copyright year. "Type %year% instead of an actual number for a dynamic copyright year. (Copyright © %year% Company Name - All rights reserved)."
• Text field for footer link URL.
• Text field for footer link label.
• Text field for footer link text.
• Use a single formatted text field for copyright and credit: When enabled, one rich-text (formatted) field is used for all copyright and credit content (including HTML, links, ICP, approval numbers). When disabled, the four separate fields above are used.
• 15 color input fields are available for use within this region.

Grouped Region Settings

Regions grouped together are enclosed within a div. While the region wrapper possesses its own settings that are applied to its child elements, each individual region also maintains its own settings, which can supersede those of the region wrapper.

The (TOP, MAIN, BOTTOM, FOOTER) Region Wrapper Settings

• The two columns' settings: (50%, 50%), (67%, 33%), (75%, 25%), (80%, 20%), (33%, 67%), (25%, 75%), (20%, 80%).
• The three columns' settings: (33.3%, 33.3%, 33.3%), (25%, 50%, 25%), (20%, 60%, 20%).
• The four columns' settings: (25%, 25%, 25%, 25%), (16.6%, 33.3%, 33.3%, 16.6%), (33.3%, 16.6%, 16.6%, 33.3%), (16.6%, 33.3%, 16.6%, 33.3%).
• Change the visibility: Visible on all pages, Visible on Home Page Only, Visible on All Pages Except Home Page.
• A checkbox field provides an option to apply animation to each individual region's border (Not Available for Main).
• A checkbox field to provide an option to apply borders to each individual region.
• A radio field provides an option to apply round corners to each individual region.
• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• 15 color input fields are available for use within this region.
• A checkbox to activate "Skip to main content" link. A shortcut that helps users quickly access the main content of a page by bypassing repetitive navigation elements. For MAIN only.
• Per-content-type layout: Enable a dedicated option to assign a unique column layout for each content type within any grouped region. When activated, you can select and override the default layout for every content type in your system, while other content types will continue to inherit the global settings.

The Individual Region Settings

• A text input field is provided to input any predefined CSS classes, either from Solo or any uploaded third-party library.
• A select list to control the layout with Left, Center, and Right Alignment.
• 15 color input fields are available for use within this region.

Return to the beginning ☝️

🎬 Paragraphs Bundles Playlist

Developed & Designed By: Alaa Haddad

---