How to Present a Radio Station Live Stream with Shack Toolbox

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:

final result

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 new

  • Click "Shack Toolbox Pro":

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":

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.

set url width an height of iframe

  • Click the "Locations & Effects" tab:

click the locations and effects tab

  • For the "Before opening" tab, click "Module Position" and type in "Listen Now" in the fields underneath it:

click moduel position

  • Click "After opening" and click "Accordeon":

click after opening and click accordeon

  • Click the "Theme" tab:

click the theme tab

You will see the "Choose theme" tab with thumbnails of the available themes:

you will see the choose theme tab

  • 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":

find elastica and click choose these theme

  • Click "Theme customizer":

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:

Common

  • Display rounded corners: No
  • Display shadow: No
  • Choose design: Flat

Popupbox size

  • Popupbox width (px): 150
  • Popupbox height (px): 50

Popupbox text

  • Color of popupbox text: #666666
  • Popupbox font size: left empty
  • Popupbox font family: left empty

Background

  • Color of popupbox background: #ec534d
  • Opacity of popupbox background: 1
  • Popupbox padding: left "Disabled"
  • Padding value (px): left empty

Background image

  • 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 size

  • Toggler width (px): 120
  • Toggler height (px): 40

Accordion

  • 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.