Simplify Your Web Documentation

These are the steps to follow specifically for the SYW Bare Responsive template to experience the smoothest migration possible.

Under Joomla 3.10

There is no specific action to take.

You should not have any issue warnings.

The SimplifyYourWeb Extensions Library will be updated automatically. Ignore warnings about the library, if any.

Prior to the move to Joomla 4

Download the template for Joomla 4.

Under Joomla 4

Go to System -> Install section. Click on Extensions.

Install the template's package for Joomla 4.

At that point, the front end of the site will not show properly. That's because between Joomla 3 and 4, the stylesheets and scripts are no longer located in the same files.

During install

You will not lose any of the custom work created under Joomla 3 for the template. A copy of the old template will be available at /templates/j3_sywbareresponsive. This will allow you to transfer customized styles and scripts later on.

After install

The template's structure has been modified in Joomla 4. From now on, stylesheets, scripts and images are found under media/templates/site/sywbareresponsive.

There was a notion of themes under Joomla 3. There are no selectable themes in Joomla 4 any longer. The theme is created in the template's parameters through the change of colors, mainly. Therefore, styles found under /css, like theme_original.css, for instance, should now be placed in the media ... /css folder of the template as user.css. In the same way, scripts found under /js, like template_original.js should now be placed in the media ... /js folder of the template as user.js.

user.css and user.js can be added directly from the Joomla administrator console.

If you had created specific themes with distinct styles and scripts under Joomla 3, I suggest you now create child templates for each theme you had created previously. Each child template will have its own user.css and user.js files.

Logo images

There is now only one selectable image for the logo. It should be the largest image at normal resolution that will be used in the template.

Let's say the image you select is logo.png. All other images, for all different breakpoints, should be present in the same folder.
If you have a breakpoint at 640px, for instance, the logo will need to be named logo_640.png. That image will be used on viewports smaller than 640 pixels.

If you need to use high resolution images, you need extra images: [email protected] and [email protected], which are twice the size of their counterpart.

If you want to use webp or avif images, you still need the png ones as fallbacks. Just select logo.webp, for instance, as the main image.

Favicons

All favicon images need to be moved to media/templates/site/sywbareresponsive/images.

Fonts

All font files need to be moved to media/templates/site/sywbareresponsive/fonts.