In some use cases, you may want to present a radio station live stream to the visitors of your Joomla site. You want them to listen to the radio station live stream without leaving your site.
A visitor comes to your Joomla site, clicks the "Listen Now" button and a small radio player opens up for them there and then to listen to the radio station. You have a URL of the required live stream.
You can meet such requirements with the "iFrame" plugin of the Shack Toolbox Pro module.
Here is, for example, how such a module would look like when placed inside the "sidebar2" position of the Joomlashack Novitas template:
Let's get started.
- In your Joomla administrator template, go to "Extensions" > "Modules".
- You will be taken to the "Modules (Site)" screen. Click the "New" button:
- Click "Shack Toolbox Pro":
- This will bring you to the "Modules: Shack Toolbox Pro" screen, as you can see in the next image. Click "Iframe":
You will see the "Module: Shack Toolbox Pro - iFrame" screen.
- Create the title in the "Title" field.
- Paste the URL of your required live stream into the "iFrame custom URL" field.
- Tentatively set the iFrame width and height in the corresponding fields. You will be able to adjust it later.
- Set the menu position.
- Click the "Locations & Effects" tab:
- For the "Before opening" tab, click "Module Position" and type in "Listen Now" in the fields underneath it:
- Click "After opening" and click "Accordeon":
- Click the "Theme" tab:
You will see the "Choose theme" tab with thumbnails of the available themes:
- Use the "Previous" and "Next" buttons to position the "Elastica" theme in the middle of the screen, as you can see in the next image.
- Click the "Choose this theme" button. You will then see the "Elastica" theme at the top. You will also notice, that the name of the top tab has changed from the "Choose theme" to "Elastica settings":
- Click "Theme customizer":
Now you will be able to set the look and feel of the module box and its toggler button. To create the module you saw at the top of this tutorial, I used the following settings:
- Display rounded corners: No
- Display shadow: No
- Choose design: Flat
- Popupbox width (px): 150
- Popupbox height (px): 50
- Color of popupbox text: #666666
- Popupbox font size: left empty
- Popupbox font family: left empty
- Color of popupbox background: #ec534d
- Opacity of popupbox background: 1
- Popupbox padding: left "Disabled"
- Padding value (px): left empty
- Background image: no image selected
- Background image alignment: left "Use Default"
- Background repeat: left "None Selected"
- Background scale: left "Use Default"
Toggler Button and Tab
- Color of Toggler: #ec534d
- Color of Toggler text: #ffffff
- Toggler icon: IcoMoon
- IcoMoon: selected the down arrow icon
- Toggler image: left "Disabled"
- Toggler font size: left empty
- Toggler font family: left empty
- Slide Toggler Tab with box: left "No"
Vertical Toggler Tab
- Vertical Toggler Tab: left "No"
- Toggler width (px): 120
- Toggler height (px): 40
- Show accordion box with arrow: left "No".
Good job! At this point, you are done with setting the feel and look of your "Listen Now" module opening up the radio live stream. Time to save your work.
- Click "Save" or "Save & Close".
When you check the frontend of your site now, you should see a picture similar to the one displayed in the image at the top of this tutorial.