CBAA support configuration notes:
RWS WIDGETS EMBED AND CONFIGURATION
All RWS Widgets use this code with the Embed Position changed to match their widget name so they appear in the right place:
RWS Widget Embed Position Code:
<script src="http://airnet.org.au/widget/placeholder.js.php" async></script>
<div class="amrap-placeholder" style="display:none">[An On Air Now widget supplied by Amrap is inserted here]</div><div id="ENTER EMBED POSITION HERE"></div>
­
TABLE: RWS Widget Name = Embed Position (Weebly Page they're usually displayed on)
Standard Widgets (added to weebly pages using Weebly Embed Code widget)
Guide = amrapguide (Program Guide)
Pages = amrappage (Programs)
Upcoming shows, profile sidebar = amrap-upcoming (Programs)
On air now banner = amrap-onairnow-banner (Home)
Weebly RSS Feed = amrap-rss (Home, usually under On Air Now Banner)
Optional Widgets:
On air now carousel = amrap-onairnow-carousel (Optional HomePage instead of Banner)
Carousel = amrap-carousel (Home)
What song is that search widget = amrap-whatsongisthat-widget (Home)
The Live Player Strip is embedded by Amrap Developer:
Live Stream Strip = amrap-live-stream-strip (Site header code in design > html)
The Weebly Search Box is adtered to include Amrap Pages search through the following code edits done by an Amrap Developer:
Search is embedded into Weebly THEME >Edit Theme > On edit theme > hmtl > Search
Code pasted into the file called header.tpl =
{{!
On a search results page, the area at the top that contains the search box.
}}
<div id="wsite-search-header" class="clearfix">
<!-- <h2>{{#tl}}Search{{/tl}}</h2>
<div id="wsite-search-form-container">
{{{text_input_html}}}
</div> -->
</div>
<div id="amrap-search"></div>
<br>
<h2>Station news, events, articles and services:</h2>
Code pasted into the file called empty.tpl =
<li class="no-results">
<p>{{#tl}}No other results found for <strong>{{query}}</strong>.{{/tl}}</p>
</li>
RWS WIDGETS EMBED AND CONFIGURATION
All RWS Widgets use this code with the Embed Position changed to match their widget name so they appear in the right place:
RWS Widget Embed Position Code:
<script src="http://airnet.org.au/widget/placeholder.js.php" async></script>
<div class="amrap-placeholder" style="display:none">[An On Air Now widget supplied by Amrap is inserted here]</div><div id="ENTER EMBED POSITION HERE"></div>
­
TABLE: RWS Widget Name = Embed Position (Weebly Page they're usually displayed on)
Standard Widgets (added to weebly pages using Weebly Embed Code widget)
Guide = amrapguide (Program Guide)
Pages = amrappage (Programs)
Upcoming shows, profile sidebar = amrap-upcoming (Programs)
On air now banner = amrap-onairnow-banner (Home)
Weebly RSS Feed = amrap-rss (Home, usually under On Air Now Banner)
Optional Widgets:
On air now carousel = amrap-onairnow-carousel (Optional HomePage instead of Banner)
Carousel = amrap-carousel (Home)
What song is that search widget = amrap-whatsongisthat-widget (Home)
The Live Player Strip is embedded by Amrap Developer:
Live Stream Strip = amrap-live-stream-strip (Site header code in design > html)
The Weebly Search Box is adtered to include Amrap Pages search through the following code edits done by an Amrap Developer:
Search is embedded into Weebly THEME >Edit Theme > On edit theme > hmtl > Search
Code pasted into the file called header.tpl =
{{!
On a search results page, the area at the top that contains the search box.
}}
<div id="wsite-search-header" class="clearfix">
<!-- <h2>{{#tl}}Search{{/tl}}</h2>
<div id="wsite-search-form-container">
{{{text_input_html}}}
</div> -->
</div>
<div id="amrap-search"></div>
<br>
<h2>Station news, events, articles and services:</h2>
Code pasted into the file called empty.tpl =
<li class="no-results">
<p>{{#tl}}No other results found for <strong>{{query}}</strong>.{{/tl}}</p>
</li>
BUILDING A WEEBLY STATION WEBSITE FROM SCRATCH
(ROUGH NOTES ONLY TO BE COMPLETED)
Generally we should copy an existing weebly station site so we don't have to build a website from scratch. But below are the tech notes for configuring a site from scratch
On Weebly menu go to Design > Change Theme. Default theme we start with = Clean Lines
Add Custom Layout to Design
On Weebly menu to to Design > Edit Design
- Rename the 'No Header' type to = Standard-Page. You will use that on the majority of the site's web pages.
- On that Header Types HTML file paste the below code into the body section of the html. This is so the audio player strip will appear at the top of the standard web pages:
<div id="amrap-onairnow-header"></div>
Also paste that into the HTML on anyother Header Layout that you may use on the site. For example if you want to use Tall Header on some pages paste the code into the body so that the audio player strip appears at the top of those pages.
- On the Sidebar Create a New Header type called Blank-Page and delete it's HTML and replace with:
<!DOCTYPE html>
<html>
<head>
</head>
<body ' wsite-theme-light'>
<div 'display:none'>{title}</div>
<div 'display:none'>{menu}</div>
{content}
<div 'padding: 20px; width:100%; text-align:center; display:none;'>{footer}</div>
</body>
</html>
- Still in the design editor on Weebly select the 'main-style' CSS file on the ASSETS sidebar. Paste this into at bottom of that main-style css file:
/* Custom Amrap CSS */
#amrap-onairnow-header {
position: absolute;
top: 10px;
margin: 0 auto;
width: 400px;
left: 50%;
margin-left: -200px;
}
- SAVE the design changes.
On Weebly go to blue menu bar SETTINGS> SEO
- On Header box paste the following code so the audio player strip will activate:
<script src="http://airnet.org.au/program/include.js" async></script>
Create Webpages:
On Weebly menu go to Pages > Add> Standard Page. Select 'Header Type' of page to = Standard Page
Creat the following Weebly Pages, then drag the weebly EMBED CODE widget into them and add the Widget Code below with the relevant Widget div id/position:
RWS Widget Code:
<script src="http://airnet.org.au/widget/placeholder.js.php" async></script>
<div class="amrap-placeholder" style="display:none">[An On Air Now widget supplied by Amrap is inserted here]</div><div id="ENTER EMBED POSITION HERE"></div>
­
Create a weebly page called Home:
To display On Air Now/Next/Later Banner
Drag Weebly Embed widget into top of page
Paste RWS Widget Code and replace 'EMBED POSITION' with = amrap-onairnow-banner
To display Weebly blog latest news feed:
Drag a 2nd Weebly Embed widget under the on air now banner
Paste RWS Widget Code and replace 'EMBED POSITION' with = amrap-rss
Create a weebly page called Program Guide:
- Drag a TITLE widget onto page and write 'Program Guide'
- Drag an EMBED CODE widget underneath and paste in RWS Widget code with EMBED POSITION = amrapguide
Create a weebly page called Programs
- Drag an EMBED CODE widget to top of page and paste in RWS Widget code with EMBED POSITION = amrappage
- Drag an EMBED CODE widget TO THE RIGHT of the Amrap Page Embed code and paste the RWS Widget with EMBED POSITION = amrap-upcoming
OTHER WIDGETS AND THEIR EMBED POSITION DIV IDs:
Live Stream Strip = amrap-live-stream-strip
On air now carousel = amrap-onairnow-carousel
Carousel = amrap-carousel
Search results = amrap-search
What song is that search widget = amrap-whatsongisthat-widget
(ROUGH NOTES ONLY TO BE COMPLETED)
Generally we should copy an existing weebly station site so we don't have to build a website from scratch. But below are the tech notes for configuring a site from scratch
On Weebly menu go to Design > Change Theme. Default theme we start with = Clean Lines
Add Custom Layout to Design
On Weebly menu to to Design > Edit Design
- Rename the 'No Header' type to = Standard-Page. You will use that on the majority of the site's web pages.
- On that Header Types HTML file paste the below code into the body section of the html. This is so the audio player strip will appear at the top of the standard web pages:
<div id="amrap-onairnow-header"></div>
Also paste that into the HTML on anyother Header Layout that you may use on the site. For example if you want to use Tall Header on some pages paste the code into the body so that the audio player strip appears at the top of those pages.
- On the Sidebar Create a New Header type called Blank-Page and delete it's HTML and replace with:
<!DOCTYPE html>
<html>
<head>
</head>
<body ' wsite-theme-light'>
<div 'display:none'>{title}</div>
<div 'display:none'>{menu}</div>
{content}
<div 'padding: 20px; width:100%; text-align:center; display:none;'>{footer}</div>
</body>
</html>
- Still in the design editor on Weebly select the 'main-style' CSS file on the ASSETS sidebar. Paste this into at bottom of that main-style css file:
/* Custom Amrap CSS */
#amrap-onairnow-header {
position: absolute;
top: 10px;
margin: 0 auto;
width: 400px;
left: 50%;
margin-left: -200px;
}
- SAVE the design changes.
On Weebly go to blue menu bar SETTINGS> SEO
- On Header box paste the following code so the audio player strip will activate:
<script src="http://airnet.org.au/program/include.js" async></script>
Create Webpages:
On Weebly menu go to Pages > Add> Standard Page. Select 'Header Type' of page to = Standard Page
Creat the following Weebly Pages, then drag the weebly EMBED CODE widget into them and add the Widget Code below with the relevant Widget div id/position:
RWS Widget Code:
<script src="http://airnet.org.au/widget/placeholder.js.php" async></script>
<div class="amrap-placeholder" style="display:none">[An On Air Now widget supplied by Amrap is inserted here]</div><div id="ENTER EMBED POSITION HERE"></div>
­
Create a weebly page called Home:
To display On Air Now/Next/Later Banner
Drag Weebly Embed widget into top of page
Paste RWS Widget Code and replace 'EMBED POSITION' with = amrap-onairnow-banner
To display Weebly blog latest news feed:
Drag a 2nd Weebly Embed widget under the on air now banner
Paste RWS Widget Code and replace 'EMBED POSITION' with = amrap-rss
Create a weebly page called Program Guide:
- Drag a TITLE widget onto page and write 'Program Guide'
- Drag an EMBED CODE widget underneath and paste in RWS Widget code with EMBED POSITION = amrapguide
Create a weebly page called Programs
- Drag an EMBED CODE widget to top of page and paste in RWS Widget code with EMBED POSITION = amrappage
- Drag an EMBED CODE widget TO THE RIGHT of the Amrap Page Embed code and paste the RWS Widget with EMBED POSITION = amrap-upcoming
OTHER WIDGETS AND THEIR EMBED POSITION DIV IDs:
Live Stream Strip = amrap-live-stream-strip
On air now carousel = amrap-onairnow-carousel
Carousel = amrap-carousel
Search results = amrap-search
What song is that search widget = amrap-whatsongisthat-widget