Documentation for Joomla 6

One of our customers asked how to make the OSMap HTML sitemap easier to read on mobile devices by increasing the font size of the sitemap items.

You can do this with a few custom CSS rules that apply only to narrow screens.

This is a two-step process:

1. Create or locate your template's custom CSS file.
2. Add CSS rules for the OSMap HTML sitemap.

Let's get started.

Step #1. Create your template's custom CSS file

Note: The name of the custom CSS file depends on your template. For example, Joomla's Cassiopeia template uses user.css. If you are using a different template, please check its documentation to find the correct custom CSS file.

Before editing any template files, we also recommend making a backup.

• In your Joomla administrator area, go to System > Site Templates.

• Click your active site template.

• Open the folder that contains your template's custom CSS file.
• If the file does not already exist, create it according to your template's documentation.

Once the custom CSS file is ready, you can add your own styles.

Step #2. Add the CSS for the HTML sitemap

• Open your template's custom CSS file.
• Add the following CSS:

@media (max-width: 600px) {

    #osmap .osmap-items {
        font-size: 1.125rem;
    }

    #osmap .osmap-items ul {
        margin: 10px 0 10px 25px;
    }

    #osmap .osmap-items li {
        padding: 6px 0;
    }

}

• Click Save or Save & Close.

The CSS above applies only when the browser window is 600 pixels wide or narrower.

If you would like larger or smaller text, simply change the 1.125rem value. You can also adjust the 600px breakpoint if you want the changes to apply to different screen sizes.

Step #3. Test the results

• Clear your Joomla and browser caches.
• Open your OSMap HTML sitemap on a mobile device, or resize your desktop browser window.
• Confirm that the sitemap is easier to read and that the spacing looks correct.

Your OSMap HTML sitemap will now be more readable on phones and other narrow-screen devices while keeping the desktop layout unchanged.

Documentation for Joomla 3

In some circumstances, you may want to increase the font size of your OSMap HTML sitemap for narrow devices.

This is a two-step process:

1. Create a custom.css file for your template
2. Add new CSS rules to this custom.css.

Let's take a look at this process in more detail.

Step #1. Create a custom.css file for your template

In my example, I will use the JS Alasse template.

• In your Joomla administrator panel, go to "Extensions" > "Templates" > "Templates":

• You will see the "Templates: Templates (Site)" screen, as shown in the next image. Click "Js_alasse Details and Files":

• You will be taken to the "Templates: Customize (Js_alasse) as you can see in the next image. Click "css":

• You will see the dropdown list of the sub-folders and files, contained inside the "css" folder of the JS Alasse template. Click "New File":

• This will bring up the "Create or Upload a New File" box. Click "css":

• Enter "custom" in the "File Name" box, select "css" from the "Select a file type" field and click "Create":

• You will see the "File created" message, confirming that you successfully created your custom.css file for JS Alasse custom CSS rules:

Good job! You are ready to move to the next step.

Step #2. Add new CSS rules to this custom.css

• Add to the newly created custom.css file the following CSS code:

@media only screen and (max-width: 600px) {

   .osmap-items ul {
      margin: 10px 0 10px 25px;
      font-size: larger;
     }

    .osmap-items li {
       padding: 10px;
     }
}

• Click "Save" or "Save & Close".