Using the Theme Builder

The Theme Builder module allows administrators to modify the look and feel of the portal to reflect their organization's brand identity. This powerful visual customization tool provides comprehensive control over themes, colors, fonts, layout elements, and custom styling.

Requirements

To use the Theme Builder module, you must have:

• Administrator System Role permissions
• Access to the Theme Builder module (based on your Magentrix license and features)

Accessing the Theme Builder

Getting Started with Theme Builder

1. Navigate to the Setup Home page
2. Click Manage > Company Preferences
3. Select System Settings
4. Click Open Theme Builder

Theme Builder Interface Overview

Preview and Navigation

The Theme Builder displays a live preview of your theme with sample pages, allowing you to see changes in real-time. Use the toolbar dropdowns to:

• Switch between sample pages: View how your theme appears across different page types
• Change device views: Preview your theme on desktop, tablet, and mobile devices
• Test responsiveness: Ensure your branding works across all device sizes

Main Configuration Menus

Three icon menus on the top left provide access to all theme customization options:

• Settings: Overall theme selection and layout configuration
• Colors and Fonts: Visual styling and typography options
• Header & Footer: Logo, navigation, and footer content management
• Images: Background images, logos, and visual assets

Settings Configuration

Theme Selection and Layout

Change Theme

1. Click Change Theme to browse available theme options
2. Select your desired theme from the available choices
3. Click Preview Theme to see how it affects your portal's appearance
4. Changes affect the entire portal when published

Layout and Visual Effects

• Box Shadow: Enable shadow effects for dialog menus and interface elements
• Floating Menu: Make the header menu float to the top when users scroll down pages
• Max Page Width: Set the maximum width for page content (improves readability on large screens)
• Roundness: Adjust element corner roundness for modern or traditional appearance

Custom Code Integration

CSS Customization

1. Click the menu dropdown icon
2. Select CSS from the options
3. Enter your custom CSS code for fonts, styling, or layout modifications
4. Check the Enabled checkbox
5. Click Apply to implement changes

JavaScript Integration

1. Click the menu dropdown icon
2. Select JS from the options
3. Enter JavaScript code for integrations like chat plugins or tracking scripts
4. Check the Enabled checkbox
5. Click Apply to implement changes

Colors and Fonts

Color Customization

Access the Colors menu to customize your portal's color scheme:

• Color Picker Tool: Use the visual color picker for easy selection
• RGB Values: Enter specific RGB color codes for precise control
• HSL Values: Use HSL format for advanced color management
• Hex Codes: Enter hexadecimal color codes for exact brand color matching

Font Selection

Access the Fonts menu to customize typography:

• Standard Fonts: Select from available system fonts in the dropdown
• Custom Fonts: Choose --Custom Font-- option and reference the font in your custom CSS
• Brand Consistency: Ensure font choices align with your organization's brand guidelines

Header & Footer Configuration

Header Settings

Logo Configuration

• Logo Link Target: Define what happens when users click your logo
  • Internal Navigation: Keep users within the portal
  • External Link: Redirect to an external website (requires absolute URL)
• Company Logo: Upload your organization's logo for header display
  • Also appears in footer for certain themes
  • Maintains brand consistency across portal pages
• Favicon: Upload the icon displayed in browser tabs and bookmarks

Footer Customization

Column-Based Footer Design

1. Click Add Column to create footer sections
2. Use Align selector to choose column alignment (left, center, right)
3. Configure column width by clicking Edit button:
   • Auto width: Automatically sized based on content
   • Custom percentage width: Set specific width percentages
4. Click OK to apply width changes

Content Management

• Rich-Text Editor: Add formatted text, links, and content to each column
• Logo Upload: Add organization logos (automatically sized to column width)
• Custom Links: Include social media, contact, or navigation links
• Column Deletion: Remove columns using the Delete button

5. Click Apply when footer configuration is complete

Images and Visual Assets

Background and Visual Elements

Login Page Background

• Upload custom background image for the login page
• If left blank, displays gradient using portal theme colors
• Supports brand-consistent login experience

Hero Image

• Background image for page banners and customer home page
• If left blank, displays gradient using portal theme colors
• Creates visual impact for key portal pages

Banner Visual Effect

• Enable gradient visual effects using portal theme colors
• Adds depth and visual interest to page headers
• Works in combination with or instead of hero images

Static Assets Management

Image Upload and Selection

1. Click desired image box to open Static Assets dialog
2. Upload images and favicons to portal's static assets library
3. Click on files to select them for use
4. Click X icon to remove selected images
5. Manage reusable visual assets for consistent branding

Publishing Theme Changes

Making Changes Live

Publishing Process

1. Complete all desired theme modifications
2. Click Publish on the top right of the page
3. Click Yes to confirm publication
4. Important: Changes go live immediately across the entire portal

Pre-Publication Checklist

• Preview theme across multiple device types
• Test navigation and user interface elements
• Verify brand consistency across sample pages
• Ensure custom code functions properly
• Check that all images display correctly

Best Practices for Theme Builder

Brand Consistency Strategy

Visual Identity Alignment

• Use official brand colors (obtain exact hex codes from brand guidelines)
• Select fonts that match or complement your organization's typography standards
• Ensure logo quality and appropriate sizing for different display contexts
• Maintain consistent visual hierarchy across portal elements

User Experience Considerations

• Test theme on multiple devices and screen sizes
• Ensure sufficient color contrast for accessibility
• Verify that custom fonts load properly across different browsers
• Check that floating menus don't interfere with content accessibility

Custom Code Safety

CSS Best Practices

• Use CSS for visual styling only, not for altering core functionality
• Test custom CSS across different browsers and devices
• Document custom CSS for future maintenance and updates
• Keep custom styles organized and commented for clarity

JavaScript Integration Guidelines

• NEVER modify core Magentrix functionality with custom JavaScript
• Use JavaScript only for external integrations (analytics, chat, etc.)
• Test thoroughly before publishing to ensure compatibility
• Plan for potential impacts during platform upgrades
• Consider alternative integration methods when possible

Maintenance and Updates

Ongoing Theme Management

• Regularly review theme appearance after platform updates
• Test custom code functionality following Magentrix upgrades
• Keep static assets organized and up-to-date
• Monitor user feedback about visual changes and accessibility

Change Management

• Document all theme customizations for future reference
• Plan theme changes during low-usage periods when possible
• Communicate significant visual changes to users in advance
• Maintain backup documentation of current theme settings

The Theme Builder module provides powerful capabilities for creating a branded, professional portal experience that reflects your organization's identity while maintaining optimal user experience and functionality.

<< Enabling and Configuring Two-Factor Authentication | Assigning a Custom Domain Name to Your Site >>