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 any other 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
Create a weebly blog page called News and Events
Create a weebly page called DO NOT WIPE PAGES BELOW
- select Hide from Navigation
- Advanced > select Hide from search engines
- drag the following pages under this page so they are inset
Create a weebly page called Amrap Helper:
- Drag an EMBED CODE widget onto page and paste in code
ENTER CODE
- select Hide from Navigation
- Advanced > select Hide from search engines
Create a weebly page called Audio Player:
- Drag an EMBED CODE widget onto page and paste in RWS Widget Code code with EMBED POSITION = amrap-live-stream-strip
- select Hide from Navigation
- Advanced > select Hide from search engines
Create a weebly page called Images
- select Hide from Navigation
- Advanced > select Hide from search engines
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 any other 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
Create a weebly blog page called News and Events
Create a weebly page called DO NOT WIPE PAGES BELOW
- select Hide from Navigation
- Advanced > select Hide from search engines
- drag the following pages under this page so they are inset
Create a weebly page called Amrap Helper:
- Drag an EMBED CODE widget onto page and paste in code
ENTER CODE
- select Hide from Navigation
- Advanced > select Hide from search engines
Create a weebly page called Audio Player:
- Drag an EMBED CODE widget onto page and paste in RWS Widget Code code with EMBED POSITION = amrap-live-stream-strip
- select Hide from Navigation
- Advanced > select Hide from search engines
Create a weebly page called Images
- select Hide from Navigation
- Advanced > select Hide from search engines
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
EMBEDDING RWS WIDGETS INTO WEBSITE
Most Widgets are already placed on existing station weebly websites so just copy a site to bring across these configurations. However here's how it's setup if you need to start from scratch
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-sidebar (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 altered to include Amrap Pages search through the following code edits done by an Amrap Developer:
Search is embedded into Weebly THEME >Edit HTML/CSS > 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>
In the left side bar below header.tpl select +results
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>
Most Widgets are already placed on existing station weebly websites so just copy a site to bring across these configurations. However here's how it's setup if you need to start from scratch
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-sidebar (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 altered to include Amrap Pages search through the following code edits done by an Amrap Developer:
Search is embedded into Weebly THEME >Edit HTML/CSS > 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>
In the left side bar below header.tpl select +results
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 SITE FROM COPIED TEMPLATE
SEO Site Description
Add site description to SETTINGS > SEO > Header Code
Station Name - frequency - Town, State, Country
Add Meta Data on Programs page
Change the header background
- Save the current station logo to the station's folder in Y:\Radio Website Services RWS\RWS Premium Stations
- Open the logo in paint
- File > Properties
- Change to pixels - Width = 20 Height = 20
- Save image in same location as [callsign] Header Background Image for Website [colour]
- Select 'Continue' on transparency message
- Go into Weebly
- Theme > Change Background > Change Image > Upload Image
- Select the [callsign] Header Background Image for Website [colour] image
Check and add:
- Social icon links
- Email survey results are sent to
- Store settings - station details
- Fallback images on Image page
SEO Site Description
Add site description to SETTINGS > SEO > Header Code
Station Name - frequency - Town, State, Country
Add Meta Data on Programs page
Change the header background
- Save the current station logo to the station's folder in Y:\Radio Website Services RWS\RWS Premium Stations
- Open the logo in paint
- File > Properties
- Change to pixels - Width = 20 Height = 20
- Save image in same location as [callsign] Header Background Image for Website [colour]
- Select 'Continue' on transparency message
- Go into Weebly
- Theme > Change Background > Change Image > Upload Image
- Select the [callsign] Header Background Image for Website [colour] image
Check and add:
- Social icon links
- Email survey results are sent to
- Store settings - station details
- Fallback images on Image page