What This Page Does

The Style Manager lets you customize the look and feel of your website without writing any code. Click on any element you see on your site and change its colors, fonts, spacing, shadows, and more. You can create different styles for light mode and dark mode, test how things look on mobile devices, and apply changes to specific pages or your entire site.

Think of it like a visual editor that sits on top of your site, letting you point and click to make design changes instantly.

[Screenshot: page-overview]

How to Get Here

Navigate to Admin Panel > Templates > Style Manager

Understanding the Page

When you first open the Style Manager, you'll see two main areas side by side:

Left Panel: Style Editor

This is your control panel with seven tabs for different styling options:

• Colors - Text colors and backgrounds (including gradients)
• Typography - Fonts, sizes, and text formatting
• Spacing - Padding and margins
• Borders - Border styles, widths, colors, and shadows
• Layout - Display settings, positioning, and flexbox
• Effects - Opacity, transforms, and filters
• Size - Width, height, and aspect ratios

When you select an element on your site, this panel shows the current styles and lets you change them.

Right Panel: Live Preview

This shows your actual website in a preview window. You can:

• Navigate to different pages
• Click elements to select and style them
• Toggle between desktop, tablet, and mobile views
• Switch between light and dark modes
• See your changes instantly as you make them

Top Controls

The header bar includes:

• Light Mode / Dark Mode buttons - Choose which mode you're editing
• Save All - Save all your style changes
• Reset All - Remove all custom styles and start fresh

Common Tasks

How to Style an Element

This is the basic workflow you'll use for all styling tasks.

1. Click the Edit Mode button (cursor icon) in the preview toolbar.
2. A green "Edit Mode Active" indicator appears at the top of your screen.
3. Move your mouse over elements in the preview - they'll highlight with a blue outline.
4. Click an element to select it.
5. You'll see information about the selected element at the top of the left panel.
6. Use the tabs (Colors, Typography, etc.) to change how it looks.
7. Watch your changes appear instantly in the preview.
8. When you're happy with the changes, click Save Changes at the bottom of the left panel.

[Screenshot: selecting-and-editing-element]

How to Change Colors

After selecting an element:

1. Click the Colors tab in the left panel.
2. Expand the Text Color section to change text color.
3. Click the color swatch (colored square) to open a color picker.
4. Pick a color or type a hex code in the text field.
5. The element updates immediately in the preview.

To change the background:

1. In the Colors tab, expand the Background section.
2. Choose Solid for a single color or Gradient for a color blend.
3. For solid backgrounds, click the color swatch and pick your color.
4. Check Transparent if you want no background at all.

[Screenshot: color-picker-interface]

How to Create a Gradient Background

Gradients blend multiple colors together smoothly.

1. Select your element and go to the Colors tab.
2. Expand Background and click the Gradient button.
3. Choose a direction by clicking one of the 8 direction buttons (or enter a custom angle).
4. You'll see at least 2 color stops. Click each color swatch to choose colors.
5. Adjust the position sliders (0-100%) to control where each color appears.
6. Click + Add Stop to add more colors to your gradient.
7. Click the X button next to a color stop to remove it (you must keep at least 2).
8. Watch the gradient preview bar update as you make changes.

[Screenshot: gradient-builder]

How to Change Fonts and Text

After selecting text or any element with text:

1. Click the Typography tab.
2. Expand Font Family & Size.
3. Choose a font from the Font Family dropdown (Roboto, Inter, Montserrat, etc.).
4. Set the Font Size using the number input and choose the unit (px, rem, em, or %).
5. Select a Font Weight to make text thinner or bolder (400 is normal, 700 is bold).

For text formatting:

1. Expand the Text Formatting section.
2. Click alignment buttons to align left, center, right, or justify.
3. Choose Text Transform to make text UPPERCASE, lowercase, or Capitalized.
4. Choose Text Decoration to add underlines, strikethroughs, or overlines.

[Screenshot: typography-options]

How to Add Spacing

Spacing controls the empty space around and inside elements.

1. Select your element and click the Spacing tab.
2. Expand Padding and enter a number to add space inside the element.
3. Expand Margin and enter a number to add space outside the element.

How to Add Borders and Shadows

After selecting an element:

1. Click the Borders tab.
2. Expand Border to customize the border.
3. Choose a Border Style (Solid, Dashed, Dotted, etc.).
4. Set the Border Width in pixels.
5. Click the Border Color swatch to choose a color.
6. Set Border Radius to round the corners.

To add a shadow:

1. Expand the Box Shadow section.
2. Click a shadow preset button (None, SM, MD, LG, XL) for common shadow styles.
3. Or type a custom shadow value in the Custom Shadow field.

[Screenshot: border-and-shadow-controls]

How to Style Hover Effects

Hover effects trigger when someone moves their mouse over an element (like buttons).

1. Select the element you want to add hover effects to.
2. Look for the State Selector bar below the element information.
3. Click the :hover button.
4. The selector display updates to show you're editing hover styles.
5. Make your changes - try changing the background color or adding a transform.
6. Move your mouse over the element in the preview to see the hover effect.
7. Click Save Changes when done.

[Screenshot: state-selector-hover]

How to Style for Light and Dark Mode Separately

Your site can look different in light mode versus dark mode.

1. Click Light Mode in the header to edit light mode styles.
2. Select elements and customize them as desired.
3. Click Save Changes for each element.
4. Click Dark Mode in the header to switch to dark mode editing.
5. The preview automatically switches to dark mode so you can see what you're editing.
6. Select the same elements and customize them for dark mode.
7. Save your dark mode changes.

How to Apply Styles to Specific Pages

By default, styles apply to your entire site. But you can make styles that only appear on certain pages.

The Style Manager automatically detects which page you're viewing:

To apply page-specific styles:

1. Use the preview navigation to go to the page you want to customize.
2. Click Edit Mode and select elements on that page.
3. Make your style changes.
4. Click Save Changes.
5. These styles will only apply to that specific page.

How to Reset Styles

Reset a Single Element:

1. Select the element you want to reset.
2. Click Reset Element at the bottom of the left panel.
3. Confirm by clicking OK in the popup.
4. All custom styles for that element are removed.
5. The element returns to its original appearance.

Reset Everything:

1. Click Reset All in the header.
2. Read the warning carefully - this deletes ALL your custom styles.
3. Click OK to confirm.
4. All custom styles across your entire site are removed.
5. Your site returns to the default appearance.

Preview Controls

Navigation Toolbar

The toolbar at the top of the preview lets you navigate and control the preview:

Device Preview

Test how your styles look on different screen sizes by clicking these buttons in the preview header:

The preview shrinks to the selected size with a shadow border so you can see exactly how mobile users will see your site.

[Screenshot: responsive-preview-modes]

Dark Mode Toggle

The moon icon in the preview header toggles the preview between light and dark mode. This is separate from the mode buttons in the main header:

• Header mode buttons - Control which styles you're SAVING (light or dark)
• Preview moon button - Control which mode you're VIEWING

Understanding the Style Tabs

Each tab in the left panel focuses on different visual properties.

Colors Tab

• Text Color - The color of text inside the element
• Background - Solid color, gradient, or transparent background
• Gradient Builder - Create smooth color blends with multiple color stops

Typography Tab

• Font Family - Choose from professional web fonts
• Font Size - Text size with flexible units (px, rem, em, %)
• Font Weight - How thin or bold the text appears
• Line Height - Space between lines of text
• Letter Spacing - Space between individual letters
• Text Formatting - Alignment, capitalization, underlines, etc.

Spacing Tab

• Padding - Space inside the element (between content and border)
• Margin - Space outside the element (between element and neighbors)

Borders Tab

• Border Style - Solid, dashed, dotted, or decorative lines
• Border Width - How thick the border is
• Border Color - Color of the border line
• Border Radius - How rounded the corners are
• Box Shadow - Drop shadows to create depth

Layout Tab

• Display - How the element behaves (block, inline, flex, grid, etc.)
• Position - How the element is positioned (static, relative, absolute, etc.)
• Flexbox - Controls for arranging child elements in rows or columns

Effects Tab

• Opacity - How transparent the element is (0% = invisible, 100% = solid)
• Transform - Scale, rotate, or move the element
• Filters - Blur, brightness, contrast, and grayscale effects

Size Tab

• Width - How wide the element is
• Height - How tall the element is
• Min/Max Width & Height - Size constraints
• Object Fit - How images and videos fit inside their containers
• Aspect Ratio - Maintain proportions (square, 16:9, etc.)

Tips for New Users

Troubleshooting

The preview doesn't load or shows a blank page

What you see: The right panel is empty, white, or shows an error.

How to fix it:

1. Click the Refresh button in the preview toolbar.
2. Check if your site is working by opening it in a new browser tab.
3. If the site works but the preview doesn't, contact your site administrator - this may be a configuration issue.

I can't select elements when I click them

What you see: Clicking elements in the preview doesn't do anything.

How to fix it:

1. Make sure the Edit Mode button (cursor icon) is highlighted in green.
2. Try refreshing the preview using the refresh button.
3. Some very small elements (smaller than 5x5 pixels) can't be selected - try clicking nearby elements.

My changes don't appear on the live site

What you see: Changes show in the preview but not on the actual site.

How to fix it:

1. Make sure you clicked Save Changes at the bottom of the left panel (not just Save All).
2. Clear your browser cache and refresh the live site.
3. If you're viewing the site in a different mode (light vs dark), switch modes to see if your changes apply there.

Hover effects don't work

What you see: You styled the :hover state but nothing happens when you hover.

How to fix it:

1. Make sure you clicked the :hover button in the State Selector before making changes.
2. Hover effects only work with a mouse - mobile users won't see them.
3. Check if your original site styles have conflicting hover effects that override yours.

Colors look wrong or don't match what I picked

What you see: The color picker shows one color but the element shows another.

How to fix it:

1. Click the element again to reselect it and refresh the current color values.
2. Make sure you're editing the right property - Text Color is separate from Background.
3. Save and refresh the preview to see the final result.

I can't save my changes (Save button is grayed out)

What you see: The Save All and Reset All buttons are disabled and grayed out.

How to fix it:
An orange banner at the top of the page indicates demo mode is enabled. Demo mode prevents saving changes. If you need to save changes, contact your site administrator to disable demo mode.

My gradient doesn't show up

What you see: You created a gradient but the element still shows a solid color.

How to fix it:

1. Make sure you clicked the Gradient button (not Solid) in the Background section.
2. Check that you have at least 2 color stops with different colors.
3. Save your changes and refresh the preview.

Related Pages

This guide is for ComusThumbz site owners and operators. It focuses on using the Style Manager interface to customize your site's appearance without coding.