Advanced design options

Learn how to use advanced features like simplified design mode, header overlays, and custom CSS for complete design control.

Want more control over your website's appearance? WedSites offers advanced design options like simplified design mode, header overlay effects, and custom CSS for power users!

What's available

Simplified design: Remove default background textures for a cleaner look.

Overlay image with white text: Change text color to white and overlay it on your header background image for better readability.

Custom CSS: Add your own CSS code for complete design control.

All these options are in Site settings → Design tab!

Accessing advanced design options

  1. Go to Site in your main navigation
  2. Click on the settings icon to open Site settings
  3. Click the Design tab at the top
  4. Scroll through to find the advanced options

Each option is in a different section of the Design tab!

Simplified design

This removes background textures from your theme for a cleaner, more minimal look.

What it does:
- Hides default background textures
- Creates a simplified version of your theme
- Makes your site feel more modern and clean
- Affects the overall template background patterns

How to enable:
1. Go to Site settings → Design tab
2. Find the Simplified design section (near the top, below your theme preview)
3. Turn on the toggle
4. Click Save changes at the bottom

When to use:
- You want a minimal, modern look
- Your theme has busy background textures
- You prefer clean designs over decorative ones
- Your photos are the star and you don't want competing patterns

When to skip:
- You love the theme's textures
- Your wedding style is romantic or vintage (textures add character)
- The default design already looks clean

This setting only works if your theme includes background textures. Some themes won't show any difference!

Overlay image with white text

Changes your header text color to white and overlays it on the header background image, making text easier to read against dark or busy images.

What it does:
- Changes header text color to white
- Overlays white text on your header background image
- Makes text stand out against busy images
- Improves readability of your names and header content
- Only affects the header area (not the whole site)

How to enable:
1. Go to Site settings → Design tab
2. Scroll down to the Header section
3. Make sure you have a header background image uploaded (otherwise there's nothing to overlay)
4. Find the checkbox labeled Overlay image with white text
5. Check the box
6. Click Save changes at the bottom

When to use:
- Your header background is dark or busy
- Text is hard to read over your header image
- You want a softer, more elegant header
- Your photo has lots of detail that competes with text

When to skip:
- Your header background is already light
- You want a bold, dramatic header
- You don't have a header background image
- Text is already easy to read

Note: This only appears if you've uploaded a header background image. No image = no overlay option!

Custom CSS

For advanced users who know CSS, you can add your own custom styles to completely personalize your site.

What it is:
- A text area where you can write CSS code
- Gives you full control over styling
- Overrides theme defaults
- Applies to your entire wedding website

How to add custom CSS:
1. Go to Site settings → Design tab
2. Scroll to the bottom (below the header section)
3. Click the Add custom CSS link
4. A Custom CSS text area appears
5. Type or paste your CSS code
6. Click Save changes at the bottom

Your custom CSS is now active!

How to remove custom CSS:
1. Go to Site settings → Design tab
2. Scroll to the Custom CSS section (it's visible now that you've added CSS)
3. Click the Remove custom CSS link
4. The text area disappears and your custom CSS is deleted
5. Click Save changes

Your site returns to the default theme styles!

CSS editor features:
- Syntax highlighting for easier reading
- Line numbers
- Auto-indentation
- Supports all standard CSS

Who should use custom CSS:
- Web developers or designers
- People comfortable with code
- Users with specific design needs not covered by built-in options
- Anyone who wants to match existing branding exactly

Who should skip custom CSS:
- Users not familiar with CSS
- Anyone who just wants basic customization (use the color and font tools instead)
- People worried about breaking their site

Example CSS uses:
- Change font sizes for specific sections
- Adjust spacing and margins
- Hide or show specific elements
- Add custom animations
- Override theme colors in specific places
- Style elements not exposed in settings

Custom CSS tips

Target specific elements:
Use classes and IDs to target only what you want to change. Inspect your site to find the right selectors!

Test thoroughly:
Custom CSS can break your design if not careful. Always view your live site after saving to make sure everything looks good!

Start small:
Make one change at a time and test. Don't paste hundreds of lines at once.

Use comments:
Add CSS comments to remember what each section does:
css
/* Makes headings bigger on mobile */
h1 { font-size: 32px; }

Mobile-friendly:
Remember to test on mobile devices. Use media queries if needed:
css
@media (max-width: 768px) {
/* Mobile styles here */
}

Don't remove!important code:
If you need to override theme styles, you might need !important:
css
.heading { color: red !important; }

Combining advanced options

You can use multiple advanced options together:

  • Simplified design + Custom CSS: Clean base with your own tweaks
  • Overlay + Simplified design: Minimal look with better header readability
  • All three: Full customization with a clean, readable header

Mix and match based on your needs!

Testing your changes

After using advanced design options:

  1. Visit your live wedding website
  2. Check the overall appearance
  3. View different pages
  4. Test on mobile devices
  5. Ask someone else if it looks good
  6. Make sure text is readable
  7. Verify nothing looks broken

Always test before sharing your site with guests!

Troubleshooting custom CSS

Site looks broken:
Remove your custom CSS and start over. You probably have a syntax error or conflicting rule.

Changes don't appear:
Make sure you clicked Save changes. Also try hard-refreshing your browser (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows).

Text is invisible:
Check your color values. You might have set text to the same color as the background.

Mobile looks weird:
Add media queries to adjust styles for smaller screens.

Still stuck:
Remove the custom CSS and use the built-in color and font tools instead. They're designed to work perfectly with your theme!

Reverting to default design

If you've made advanced changes and want to start fresh:

  1. Turn off Simplified design toggle
  2. Uncheck Overlay image with white text if enabled
  3. Click Remove custom CSS if you've added any
  4. Click Save changes

You're back to your theme's default appearance!

When to use built-in tools vs custom CSS

Use built-in tools (colors, fonts, header settings):
- You want quick, easy changes
- You're not a developer
- You want guaranteed compatibility
- You're worried about breaking something

Use custom CSS:
- You need something very specific
- You're comfortable with code
- Built-in options don't cover your needs
- You're replicating existing branding

Getting help with custom CSS

WedSites support can't help with custom CSS debugging (since it's user-generated code), but you can:

  • Search CSS tutorials online
  • Use browser dev tools to inspect elements
  • Ask in web development forums
  • Hire a web developer for complex customization

After the wedding

You can always adjust these advanced settings later:

  • Simplify your design for a cleaner archive
  • Remove custom CSS if you're no longer maintaining it
  • Adjust the header overlay as your photos age

Your site can evolve as your needs change!

Advanced design options give you complete control over your wedding website's appearance, whether you want a simplified theme or full CSS customization!