BUILDING A WEEBLY STATION WEBSITE FROM SCRATCH
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 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>
- 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
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
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