Solo Theme: Ultimate Customization for Your Drupal Website
Complete Control Over Your Drupal 10/11 Site’s Layout & Design
Effortless Navigation & Flexible Layouts in Solo
Effortless Customization – Design Your Drupal 10/11 Site Your Way
Solo Theme Customizable Color Guide
Background Color
Variable: --r-bg
Description: Sets the background color for the region.
Example: #page-wrapper { background-color: var(--r-bg); }
Solo’s Powerful Region System – Total Layout Control for Drupal
Solo’s Powerful Region System – Total Layout Control for Drupal
Solo provides an advanced region system that gives you full flexibility over your site’s layout. The theme features two types of regions:
- Single Regions – Independent sections with their own wrappers, ideal for key site elements like the Header, Primary Menu, System Messages, and Breadcrumbs.
- Grouped Regions – Multiple regions combined into a shared wrapper for balanced layouts, such as the Top, Main, Bottom, and Footer sections.
Single Regions
Solo includes standalone regions for key site components, ensuring focused content placement: ✔ Popup Login Block ✔ Fixed Search Block ✔ Header ✔ Primary Sidebar Menu ✔ Primary Menu ✔ Welcome Text ✔ Highlighted ✔ System Messages ✔ Page Title (Hidden on Home Page) ✔ Breadcrumb ✔ Footer Menu Container
Grouped Regions
Grouped regions share a common wrapper, allowing for a well-structured and evenly spaced design: ✔ TOP: Top First, Second, and Third Containers ✔ MAIN: Left Sidebar, Content, Right Sidebar ✔ BOTTOM: Bottom First, Second, Third, and Fourth Containers ✔ FOOTER: Footer First, Second, and Third Containers
By combining Single and Grouped regions, Solo offers unmatched flexibility in structuring your website, whether you need isolated elements or a cohesive content layout.
Solo Theme Regions – Ultimate Layout Flexibility for Drupal
Customize Your Drupal Site Layout with Solo – Width, Breakpoints & Spacing
Total Control Over Site Width and Layout
Solo makes it effortless to customize your website's width with a single click. Whether you need a compact 800px layout or a full-width 100% dynamic design, Solo provides eight predefined width options. Apply them globally, per content type, or even on individual pages—offering total flexibility to match your vision.
Breakpoint Brilliance for Every Screen
Ensure perfect responsive design with Solo’s five customizable breakpoints. Adjust both site-wide breakpoints and menu breakpoints to guarantee optimal viewing across desktops, tablets, and mobile devices. One-click customization makes sure your Drupal site always looks sharp on any screen.
Flexible Spacing and Typography
Fine-tune your site’s visual balance with Solo’s intuitive spacing and typography controls. Adjust the spacing between regions with five predefined options, modify font sizes site-wide, and even import custom Google Fonts to create a unique brand identity.
Seamless Social Customization with Solo
Effortlessly customize your social presence with Solo! Choose from three icon sizes (Small, Medium, Large), tailor icon colors with a single input, and decide whether to showcase them with a simple checkbox. Featuring 17 social media and communication icons—including Facebook, Instagram, TikTok, and more—Solo makes connecting with your audience seamless and stylish.
Enhanced Customization Features
Tailor every detail with ease. Solo allows quick CSS modifications directly in the header—no need for a sub-theme. Adjust date formats with three predefined styles or switch the layout for multi-value fields to appear inline for a cleaner look. These features make customization fast, easy, and effective.
User-Centric Features for a Polished Experience
Enhance user experience with Solo’s smart design options. Transform login, register, and password pages by disabling sidebars to center forms for a professional, user-friendly layout. Reorder the header and main menu regions to optimize navigation and visual flow. For content-heavy pages, enable Reading Mode to set the content width at 600px, improving readability.
Dynamic Animations and Smooth Interactions
Elevate your site’s interactivity with engaging animations that bring hidden blocks into view as users scroll. This dynamic feature not only enhances aesthetics but also boosts engagement, providing a modern, fluid browsing experience.
