YOOtheme Sonic - Joomla Template

How to Set Up YOOtheme Sonic for a Conference Website on Joomla

YOOtheme Sonic is not just a visual skin for Joomla. It is a ready-made foundation for an event website, where the homepage, speakers, schedule, venue, sponsors, news, and ticket section are already designed as one coherent flow. This guide explains how to work with Sonic after installation, which settings to review in YOOtheme Pro, how to preserve the demo structure while adapting it to a real event, and how to make sure the template behaves the way your site actually needs it to.

This material is intended for a site owner, Joomla administrator, webmaster, or editor who needs to turn a conference demo into a working site quickly. It is not a retelling of the product listing. Instead, the process is broken down into practical steps: preparation, installation, Template Styles, menus, modules, pages, custom speaker fields, result checks, and troubleshooting common issues.

The core idea is simple: Sonic works best when you do not try to replace all demo content in one pass. First, you need to understand where the event structure lives inside the template, where the overall styling is controlled, where modules and menus are connected, and where individual YOOtheme Pro layouts are edited.

What Sonic Is Designed to Do and Where It Fits Best

Sonic is best seen as a template for an event website, not as a universal corporate template for every use case. Its demo is built around a conference: a large hero section, event-focused navigation, speaker cards, a multi-day schedule, a venue block, sponsors, a ticket call to action, and pages for news or supporting materials. That structure works especially well when the site needs to answer a visitor's main questions quickly: what the event is, who is speaking, where it takes place, how the program is structured, and how to get to registration.

You can adapt Sonic for a standard company website as well, but you would need to replace the meaning of almost every section. That is why it is better to decide before installation whether your project actually matches an event-style structure. If the site is for a conference, forum, festival, educational intensive, local meetup, workshop series, or a showcase event, Sonic saves time because the logic is already built in. If you need a product catalog, user account area, complex portal, or a site with a large amount of standard content, it makes more sense to look at a different template or build the structure through YOOtheme Pro Templates and Dynamic Content.

Sonic's strength is the way it connects visual flow and content. Visitors do not see a set of decorative sections. They follow a path: first the event, then the people, then the program, then the venue, then trust signals through partners, and finally the move to ticket registration. If you preserve that sequence, the template will work far better than if you rearrange sections at random.

What Types of Sites Sonic Works Best For

The practical choice depends on how much event information the organizer already has. Sonic is especially useful if you already have, or are close to having, the following:

• The event name, a short tagline, the date or date range, the city, and the venue.
• A list of speakers, curators, artists, or participants with photos and short descriptions.
• A schedule, even if only in broad blocks: registration, talks, breaks, sessions, and evening activities.
• Information about partners, sponsors, the venue, directions, accommodations, or participation rules.
• A clear next step: registration, an application, a contact form, ticket purchase, or a link to an external service.

If you do not have that information yet, you can still install the template, but the demo will look more convincing than the real site. In that case, it is better to build an event content sheet first and only then start changing layouts. Otherwise, it is easy to end up with a polished page full of empty cards, placeholder names, and a call to action that goes nowhere.

Who It May Not Be Right For

Sonic may be unnecessary if you need a strict text-first site without a visual builder, a minimal template with no demo data, a project with a completely custom design system, or a site where every page should rely only on standard Joomla output without a visual editor. It also does not solve ticket sales, payment processing, CRM, email campaigns, or participant management on its own. Those functions need to be handled through separate components or external services.

The right expectation for Sonic is this: it helps you build the visual layer and structure of an event website. The business logic for registration, payments, email, and analytics still needs to be planned separately.

What Is Included in the Product Logic of YOOtheme Sonic

According to the official Sonic page, it is built on YOOtheme Pro and comes as a themed package with ready-made page layouts, style variations, an image collection, and a demo website for Joomla. That matters in practice because you are not working with a standalone ZIP file that simply changes the site header. You are working with a full set of layouts and settings inside the YOOtheme Pro ecosystem.

For a conference website, this gives you three levels of configuration. The first is the visual layer: style, colors, fonts, background layers, buttons, cards, spacing, and the overall visual mood. The second is the page structure: Home, Team or Speakers, Schedule, Location, Partners, Pricing, Portfolio, Index, and Post, depending on the current layout set. The third is Joomla data: articles, categories, custom fields, menus, modules, and template style assignments.

Event Pages and Reusable Sections

In Sonic, the pages that usually matter most for an event are the homepage, speakers, schedule, venue, partners or sponsors, pricing or tickets, a resource list, and an individual post. When you adapt the template, do not start with button colors. First, map every ready-made layout to a real page on the site.

Example mapping:

This table is not just a formality. It helps you keep each section's purpose intact. If the speakers page suddenly fills up with news and the schedule is buried deep in the menu, the template stops solving the job it was designed for.

Custom Fields for Speakers

The official Sonic page specifically mentions Joomla user custom fields: Image for the photo and Description for the bio. That is a useful sign for an administrator because it means at least part of the speaker data can be stored as managed fields instead of manually typed cards inside each layout. In a real project, that makes updates much easier, especially when the organizer adds a new participant or changes a description.

If you use custom fields, decide in advance who is responsible for the data: the content editor fills in images and descriptions, the webmaster checks the output in YOOtheme Pro, and the organizer approves the order and wording. The most common mistake in templates like this is editing the visual layer and content separately, without a single source of truth.

What to Check Before Installing It on an Existing Joomla Site

Preparation matters most when you are installing Sonic not on a blank test domain, but on a site that already has working content, menus, and extensions. YOOtheme Pro supports two very different approaches: installing the theme on an existing site, and using a demo package as a full Joomla installation with demo content. You should not mix those options unless you fully understand the consequences.

If you already have a live site, install the YOOtheme Pro theme for Joomla and load the layouts you need inside the builder. The demo package is useful for learning and for a fast start on a clean environment, but it is a full Joomla installation, not an extension you can safely layer onto an existing project. Before doing anything, create a full backup of both files and database through your hosting tools or the Joomla backup method you normally use.

Minimum Technical Check

Before installation, do not stop at Joomla version compatibility. Check the server environment as well. The official YOOtheme Pro documentation lists requirements such as PHP with the GD module, and Joomla documentation provides the required PHP modules plus recommended memory headroom for modern CMS versions. In practical terms, that means the template may install successfully but still fail later when generating responsive images if the server does not support the necessary image processing functions.

• Check your Joomla and PHP versions in the CMS system information.
• Make sure the required PHP modules for Joomla and image processing are enabled, especially GD.
• Check upload size, execution time, and memory limits if the ZIP archive fails to install or the installation stops midway.
• Create a separate site backup before installation, even if the template looks like a normal extension.
• Make sure the administrator account has permission to install extensions and edit templates.

Content Readiness Check

The technical installation is only half the job. For an event template, content matters just as much. Sonic looks convincing when the photos, names, session titles, and calls to action all work together. If you are starting from scratch, create a simple table with the following: section, data source, owner, status, image link, button text, and target page.

For the homepage, the minimum is usually enough: the event name, a short explanation of the event, one primary call to action, a speaker list, a draft schedule, the venue address, and partner logos. Everything else can be refined after the first build. Without those basics, you will keep tweaking the demo forever without understanding where design ends and real information begins.

Installation and First Launch Without Losing the Demo Logic

Start the installation on a test copy. Even if Sonic is meant for an existing live site, it is still worth setting up a separate staging copy or local environment first. That lets you inspect how the layouts are built, which module positions are used, which styles are enabled, and which pages are worth moving to the main site.

For an existing Joomla site, the general path is straightforward: install the YOOtheme Pro template package through the standard Joomla extension installer, make the template active or create a separate template style, open YOOtheme Pro from the admin panel, and load the layouts you need. For a clean project, you can study the demo package, but treat it as a learning-oriented full installation, not as a patch for your current site.

Initial Post-Install Check

After installation, do not rush into editing every section. First, make sure the site opens correctly, the admin panel does not show errors, YOOtheme Pro launches, settings save properly, and the front end displays the selected template. Then test the main visitor path: menu, homepage, schedule page, and registration or form link.

1. Open the Joomla admin panel and confirm that the template installed without errors.
2. Go to Template Styles and check which template style is assigned by default.
3. Open YOOtheme Pro from the admin menu.
4. Make one small change, such as temporarily editing button text, and click Save.
5. Open the public page in a private browser window and confirm that the change is visible without logging in.
6. Revert the test change if it was only used for verification.

Quick takeaway: the installation is successful not when Joomla accepts the ZIP file, but when YOOtheme Pro opens, settings save correctly, and the public page shows the expected style and navigation.

What to Do If You Install Sonic on a Site with an Existing Menu

On a live site, you usually already have a main menu, hidden items, service pages, categories, and modules. Do not assign the new template style to every menu item at once unless you are sure of the outcome. It is safer to create a copy of the style, assign it to a single test menu item first, and verify the appearance there. Joomla and YOOtheme Pro both allow style assignments by menu item, so you can move pages over to Sonic gradually.

This approach is especially useful when the current site remains accessible to visitors. You can prepare a separate event menu item, build the conference homepage there, verify the modules, and only then add the link to the main navigation.

Template Styles, Styling, and the Color Logic of Sonic

Template Styles are one of the key mechanisms in Joomla and YOOtheme Pro. They let you keep multiple design variants and assign them to different menu items. For Sonic, that is especially useful in two scenarios: when you want a dedicated conference style inside a larger site, or when different event sections need different visual emphasis.

The official YOOtheme Pro documentation recommends duplicating the default style, opening it through Open Website Builder, and then assigning it to menu items either through the Menu Assignment tab or through the menu item settings. It is important to understand that a style is not a separate page. It is a set of appearance and behavior settings that Joomla applies to selected menu items.

A Safe Order for Style Configuration

Work with a copy of the style, not your only live version. Give it a clear name, for example the name of the event. Inside YOOtheme Pro, first choose the Sonic style variation that fits best, then adjust the global settings: logo, colors, fonts, spacing, buttons, header, and footer. Leave fine-grained changes to individual elements for the end, once the overall look has already been approved.

1. Create a copy of the base style in Joomla Template Styles.
2. Assign the copy to a test menu item so you do not change the whole site at once.
3. Open YOOtheme Pro and choose an appropriate Sonic style variation.
4. Review the header, navbar, mobile header, footer, and key buttons.
5. Save the changes and check the page in both standard and mobile views.

When to Change the Style Library and When to Edit a Single Block

If a color or font should change across the entire event site, use the Style Library, Style Customizer, and global variables. If only one block needs to change, such as a partner card or a registration section, it is better to edit that specific element in the Page Builder. That prevents the common problem where a small button tweak in one place unexpectedly changes every button across the site.

Visually, Sonic depends on bright open space, light typography, gradient accents, shadowed cards, and bold transitions from coral to pink or purple. If you replace all of that with heavy dark colors, the template loses its recognizable lightness. That is still possible, but at that point you are effectively building a new design on top of Sonic and should retest every section from scratch.

Menus, Modules, and Positions: Where Event Sites Usually Break

In Joomla templates, many visible elements do not live only inside the page layout. They also depend on the menu and module system. YOOtheme Pro integrates Menus and Modules into its own interface, which allows an administrator to manage menu items, positions, and module settings directly from the builder. That is convenient, but it requires discipline: you need to know whether you are editing a menu, a module, a position, a builder module, or the page layout itself.

For Sonic, the most important areas are the header, navbar, mobile header, top, bottom, sidebar, and builder positions. If a module is published in the wrong position or assigned to the wrong menu items, the block may not appear even if everything looks correct inside the builder. The reverse is also true: a module may suddenly appear on extra pages if its assignment is too broad.

Event Navigation

The main event menu should stay short. In its reference form, Sonic uses items such as Home, Speakers, Schedule, Location, Sponsors, Blog, and a prominent Get tickets button. When adapting the template, do not turn the top menu into a complete list of every Joomla page. For a conference visitor, a fast route matters more than a full content catalog.

A practical menu structure might look like this:

• Home or Event.
• Speakers.
• Program.
• Location.
• Partners.
• News or resources.
• Registration as a separate prominent button.

If the site is multilingual, do not try to show the same menu to every language through random duplicates. Use Joomla's built-in language structure and check the menu assignment for each language. YOOtheme Pro includes settings for the language switcher module, but the language architecture itself is still a Joomla responsibility.

Modules and Positions

YOOtheme Pro shows module positions and assigned modules in the Modules panel. The gray dot next to a module helps you see whether it is published on the current page in live preview. That is helpful for troubleshooting: if a block does not appear, first check the module's published status, its position, its menu assignment, and its visibility conditions. Only after that should you touch CSS.

For an event site, modules are usually needed in several places: an extra header menu, a language switcher, contact details, a bottom call to action, partner widgets, signup forms, or informational inserts above and below the content. A Builder Module can work well for a more complex block in a position, but remember that it opens the Page Builder for that module and can have its own section structure.

Why the Sidebar May Not Appear

The official YOOtheme Pro documentation points out an important detail: the sidebar position is not rendered on pages built through the YOOtheme Pro page builder. That matters for Sonic because many of its key event pages are builder pages. If you are trying to show a side module on one of those pages and nothing appears, the issue may not be the module itself but the layout logic.

Instead of a sidebar on a builder page, use a section, row, module element, or position element inside the layout. That gives you full control over placement and avoids fighting behavior that is built into the template.

Pages, Custom Fields, and Dynamic Content for Speakers

Sonic includes a ready-made visual logic for speakers, but a real project is easier to manage when the data does not live only inside static cards. YOOtheme Pro can load dynamic content from Joomla: articles, categories, tags, users, custom fields, and other supported sources. For an event site, that makes it possible to separate the card design from the actual speaker or program data.

If the speaker list is small and rarely changes, you can edit the cards directly in the Page Builder. But if speakers are added over time, reordered, given their own pages, or reused in multiple places on the site, it is better to use a Joomla data source and fields. Then a single biography or photo can be updated in the source and pulled automatically into the necessary elements.

How to Organize Speaker Data

The minimum data set for a speaker is simple: name, role, photo, short bio, presentation topic, and a link to a page or social profile. The official Sonic page mentions the Image and Description user fields, and YOOtheme Pro Dynamic Content can map those fields into elements. Depending on your site structure, speakers can be stored as Joomla users, category articles, or another supported source.

Choose one method and stick with it. Mixing users, articles, and manual cards quickly creates chaos. When the organizer asks you to replace a photo, you should not have to guess where it is actually stored.

How to Verify the Data-to-Layout Connection

Create one test speaker with real data and check the full path: the field is filled in, the source is selected, the element pulls the correct value, the card layout holds together, and the link goes to the correct page. Then add another speaker with a long name and a differently cropped photo. That immediately shows whether the grid can handle real content rather than only perfect demo cards.

Result check: change one speaker description in the Joomla source and refresh the public page. If the text changes without manually editing the card, the dynamic content is configured correctly.

Practical Example: Building the Conference Homepage

Let us walk through the workflow you will usually need right after installing Sonic: turning the demo homepage into the homepage for a real event. The goal is to keep the template's strongest structural logic, replace demo data with real information, and verify that a visitor can move from the hero section to registration without friction.

Goal and Preparation

The goal is to build a conference homepage with a clear hero section, a speaker block, a schedule, a venue section, partners, and a final call to action. Before you begin, Joomla, YOOtheme Pro, and Sonic should already be installed, a test copy of the style should be created, and the main text and images should be prepared.

Create a separate menu item for the event homepage. If the site is already live, assign Sonic only to that menu item. That way, you can build the page without changing the rest of the site.

Setup Steps

1. Open YOOtheme Pro and select the page that will serve as the event homepage.
2. Load or open the ready-made Sonic Home layout.
3. Replace the event name and short subtitle in the hero section.
4. Check the registration button. It should lead to a form, an external service, or a dedicated page with participation details.
5. In the speaker section, replace the photos, names, roles, and links. If you use Dynamic Content, verify the data source.
6. In the schedule, replace the days, times, and session names. Do not leave demo placeholders in place.
7. In the location section, enter the city, venue, address, and useful transportation guidance.
8. In the partner block, upload logos in a visually consistent style and verify their contrast.
9. Save the layout with Save Layout, then save the theme settings with Save if you changed any theme settings.

Verification and a Key Detail

Check the result not in the same window where the builder is open, but in a separate private browser window. That lets you see the page through the eyes of a normal visitor. Walk through the path: open the site, understand what the event is, find the speakers, review the schedule, locate the venue, click registration. If any step takes more than a few seconds to understand, the section needs to be simplified.

One important detail: saving the layout and saving the theme settings are two different actions. The Page Builder documentation clearly notes that saving a page layout does not save theme settings. If you only changed block text, saving the layout is enough. If you changed the style, header, favicon, global CSS, or YOOtheme Pro settings, save the corresponding settings layer as well.

Practical Ways to Use Sonic for Different Types of Events

The same template can support different scenarios as long as you do not break its core event logic. Below are several realistic use cases based on the confirmed capabilities of Sonic and YOOtheme Pro: ready-made layouts, styles, Page Builder, menus, modules, Dynamic Content, and responsive media.

Conference with Multiple Tracks

Use the schedule page as your base, but split the program into tracks through sections, tabs, visual markers, or separate pages. If there are many tracks, do not force everything into one long block. Create separate menu items for the main directions and assign them the same template style so the user experience still feels continuous.

Check: an attendee should be able to understand quickly where their track is, when the break happens, and where the next session is. If the schedule requires zooming the page or reading very small text, it is better to split it into multiple views.

Local Meetup or Educational Intensive

For a smaller event, you can remove extra pages and keep only the homepage, program, speakers, and registration form. Sonic does not require you to use every demo block. If there are no sponsors, do not keep an empty section with placeholder logos. It is better to replace it with venue partners, an organizer block, or helpful resources.

Check: the menu should be shorter than it would be for a large conference. If the site has only three key actions, do not create seven navigation items just because they existed in the demo.

Event Series or Archive of Past Meetups

Sonic includes a logic for past events and news pages. You can adapt that to an archive of earlier meetups, event reports, recorded talks, or photo galleries. Dynamic Content is especially useful here: materials can be stored as Joomla articles while the layout provides a consistent card-based output.

Check: a new entry should be added without copying an entire old page. If every report requires manually assembling a new layout from scratch, the data and the template have not been separated yet.

Landing Page with Registration Through an External Service

If tickets or applications are handled by an external service, Sonic can serve as the front-facing showcase. In that case, the registration buttons should point to an external URL or to a dedicated Joomla page with instructions. The key point is not to leave a demo button without a real destination. For analytics, use safe built-in settings and follow consent rules for external scripts if they are connected through YOOtheme Pro Settings.

Check: when a user clicks the main call to action, they should land in the expected flow, not on an empty page or an anchor with no form.

Result Check: Visual Quality, Speed, Responsiveness, and SEO Basics

Once Sonic is configured, you need to verify more than whether the page opens. For an event template, four areas matter most: visual consistency, responsiveness, loading speed, and basic search clarity. Do not assume that a polished demo layout will automatically solve those issues for you. The demo works with carefully prepared images and tidy content, while a real site often breaks because of oversized photos, long headings, extra modules, and unclear links.

Visual Review

Open the homepage and review it like an editor. The hero section should immediately explain what the event is and what the visitor should do next. Speaker cards should remain equally readable. The schedule should not turn into a long wall of tiny text. The venue block should help people get there, not simply decorate the page.

Check long names, real photos, partner logos on both white and colored backgrounds, button hover states, the active menu item, and the footer. Sonic relies on light typography and plenty of white space, so poorly prepared images stand out even more than they would in denser templates.

Responsiveness and Images

YOOtheme Pro can generate responsive images and supports lazy loading. But the quality of the result still depends on your source files and settings. Upload images that are large enough but not excessive, define width and height where they matter to the layout, and check the focal point if portraits are being cropped badly. For speakers, that is especially important: the face should not disappear after automatic cropping.

Use the device preview in YOOtheme Pro, but also open the site at real browser window sizes. In Sonic, the top navigation, registration button, speaker cards, and schedule all need to remain readable on smaller screens. If the hero section takes up too much vertical space, visitors may never see the next important block.

SEO Basics Without Spam

Sonic does not replace content work. Your event page still needs proper headings, short descriptions, meaningful links, image alt text, and a clear menu structure. There is no need to repeat the event name in every heading. It is better to make each section answer a real question: who is speaking, what is on the program, where it happens, and how to take part.

If you use Joomla articles for news or archives, check the category, alias, metadata, URL structure, and internal links. For pages created in the Page Builder, make sure important text is real text on the page and not just part of an image.

Safe Improvements Without Editing the Template Core

For Sonic, YOOtheme Pro settings are usually enough. But in a real project, you often need a small adjustment: align speaker cards, improve button contrast, add spacing for a long schedule, or fine-tune the look of one specific section. Do that through settings, custom CSS, or a child theme, not by editing YOOtheme Pro core files.

The YOOtheme Pro documentation allows custom CSS through Settings and describes child themes as the proper way to separate project-level changes from updates. For a small visual adjustment, the simplest place to start is Settings -> CSS. If the project grows and the amount of custom work increases, create a child theme and keep the CSS in css/custom.css.

Example of a Small CSS Fix for Speaker Cards

Goal: align speaker cards a bit more evenly and make captions more resilient to long names. Before applying it, open your browser developer tools and make sure the classes match your actual layout. Sonic is built on UIkit, so the exact classes may vary depending on the element and its settings.

/* Add this to YOOtheme Pro -> Settings -> CSS
   or to the child theme file templates/yootheme_NAME/css/custom.css. */
.sonic-speakers .uk-card {
  min-height: 100%;
}

.sonic-speakers .uk-card-title {
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: anywhere;
}

.sonic-speakers .uk-card-media-top img {
  object-fit: cover;
  object-position: center;
}

This tweak is based on safe UIkit card CSS logic, not on any invented internal Sonic API. To avoid affecting the whole site, add the parent class sonic-speakers to the relevant section or Page Builder container. The check is simple: long names should not overflow the card, portraits should remain neatly cropped, and other cards across the site should stay unchanged.

Rollback is simple as well: remove this CSS or temporarily disable the section's parent class. If the grid breaks after the change, do not blindly increase selector specificity. Go back to the element settings, review the card structure, and only then adjust the CSS.

When a Child Theme Makes More Sense

A child theme makes sense if you are adding project-level CSS or JS files, custom fonts, Less styling, overrides, or additional builder elements. For a single line of CSS, it is overkill. For a conference website that will run for multiple seasons and receive regular updates, a child theme is already a smart choice: your changes will survive YOOtheme Pro updates, and another developer will be able to understand what was added specifically for the project.

Do not edit files inside the main template folder just for a quick fix. That kind of change can disappear after an update and will make troubleshooting much harder if the site starts behaving differently later.

Why Sonic May Display Incorrectly and How to Troubleshoot It

Troubleshooting should move from simple to complex. Do not start with CSS if you have not yet checked the installation, permissions, menu item assignments, module publishing, and settings saving. With a Joomla template, the issue often looks like a broken design, while the real cause sits in another layer.

The Template Will Not Install or the Installation Stops

Symptom: Joomla returns an error when you upload the archive, the installation hangs, or you see a message about exceeded limits.

A likely cause is server-side limits: upload size, execution time, memory, or a missing image-processing module. Check Joomla system information, your hosting logs, and the YOOtheme Pro documentation on installation issues. If you are accidentally trying to install the demo package on an existing site as if it were a normal extension, stop there: the demo package is a full Joomla installation.

What to fix

• Make sure you are using the template package intended for an existing site.
• Increase PHP limits through your hosting panel or contact your provider.
• Check that the administrator has permission to install extensions.
• Repeat the installation on a test copy, not on the live site without a backup.

Changes in YOOtheme Pro Do Not Save

Symptom: changes are visible in the builder, but disappear after the page is refreshed.

Make sure you saved the correct layer you were editing. Page layouts are saved with Save Layout, while theme settings are saved with Save in the customizer. Another possible cause is file permissions. The YOOtheme Pro documentation on file permission issues recommends correct directory and file permissions, because conflicts between web server and FTP client permissions can prevent settings from being saved.

What to fix

• Save the layout and theme settings separately if you changed both layers.
• Check file and directory permissions on the server.
• Disable aggressive caching while troubleshooting.
• Make sure you are editing the template style assigned to the current menu item.

The Module Does Not Appear on the Required Page

Symptom: the module is published, but visitors do not see it.

Check the position, published status, menu item assignment, and visibility in the Modules panel. If a sidebar module does not appear on a builder page, remember how YOOtheme Pro behaves: the sidebar position is not rendered on pages built with the Page Builder. Use a module element, a position element, or a builder module inside the layout instead.

What to fix

• Enable the view that shows only published and visible modules in the Modules panel if that helps filter the list.
• Check the Menu Assignment settings for the module.
• For more complex conditions, use Advanced Module Manager if it fits the project and has been installed intentionally.
• Do not rely on the sidebar where the builder page logic does not render it.

The Public Page Looks Different from the Preview

Symptom: everything looks fine in live preview, but a normal browser shows old styles, a different header, or missing images.

The cause may be caching, template style assignment, access permissions, lazy loading, a third-party optimizer conflict, or different menu items. Open the page in a private window, clear the Joomla cache, and check which menu item is actually serving the URL. If the link resolves to the wrong menu item, Joomla may apply a different template style.

What to fix

• Check the URL and the associated menu item.
• Clear the Joomla cache, the YOOtheme Pro image cache, and any third-party optimizer caches.
• Compare the template style assignment in Joomla and in the menu item.
• Check the public page while logged out of the administrator account.

Speaker Photos Are Cropped Badly

Symptom: speaker faces are cropped too aggressively, cards look inconsistent, or some images appear blurry.

YOOtheme Pro can resize and generate responsive images, but the source files still need to be prepared properly. Use images that are large enough, visually consistent, and check the width, height, focal point, and mobile result. If portraits come from different speakers, it is better to define file requirements in advance.

What to fix

• Replace images that are too small or overly stretched.
• Check the focal point for portraits.
• Clear the image cache after changing quality or format settings.
• Make sure an external optimizer is not compressing images too aggressively.

When YOOtheme Sonic Is the Right Choice

Sonic is worth using when you need a visually strong conference or event website on Joomla and are comfortable working within the YOOtheme Pro model: layouts, styles, live preview, modules, menus, dynamic content, and careful result validation. It is especially effective when the demo structure already closely matches your scenario: speakers, schedule, venue, partners, news, and registration.

Before launch, check three things. First, the technical foundation: Joomla, PHP, permissions, GD, limits, and a backup. Second, the content: real speakers, photos, program details, address, and links. Third, the user journey: a visitor should quickly understand the event and move to the next action.

If the template still fits after those checks, you can download the installation package, deploy it on a test copy, and work through the setup steps in this guide. Do not move the result to the live site until you have checked the menus, modules, responsive view, images, and registration button.

A good outcome for Sonic is not "the page looks like the demo." It is "the page helps a person decide to attend." If the visitor understands the event, sees strong participants, makes sense of the program, finds the venue, and reaches registration without errors, the template is configured correctly.