Menu
Webinars The Easy Art of Audio and Video
Help Center
back In this webinar I explain the steps to create two fun additions.

First I talked about the Automatic Yahoo Media Player. Yahoo has discontinued the Yahoo Media Player but we have a replacement the looks and functions nearly the same. We call it the ACC Media Player. 

Second, I talked about a fancy podcast bar. 

Automatic Media Player Instructions

Add the following code to the bottom of the template(s) before the </body></html> tags.

Audio Player Javascript Code
 
<script type="text/javascript" src="http://adventistchurchconnect.com/site/1/ACCMediaPlayer/ACC_WebPlayer.js"></script>

» Click here for more information and detailed instructions.
Fancy Podcast Bar Instruction



» Are you using a THEME? Click here for special code and instructions.

These are the files and written documentation to make the fancy podcast bar happen:
  1. Setup Podcast module
  2. Add a new podcast
  3. Download these files to your computer:
  4. Now upload these files to your "template" folder.
  5. Once uploaded, double click on "podcast_scripts.js" to edit it in the "Source Editor" and change the podcast channel to match your website addres typically: http://YourSchoolChurch22.adventistchurchconnect.org/podcast.php?channel=1 (replace "YourSchoolChurch" with your address).
  6. Copy, and paste the following CSS code to the bottom of your "Global CSS" (you can edit as needed)

Global CSS
 
/*   Begin Podcast Sermon Block   */
.clear {
    clear: both;
}
div.wrap {
    margin: 0 auto;
    /* Change width to the width of your content area */
    width: 948px;
}
.sermon_block {
    /* add HTML color code to color the new bar:  background: #4C99CB url('site/1/template/sermon_block_bg.png') repeat-x left top; */
    background: url('site/1/template/sermon_block_bg.png') repeat-x left top;
    /*   You can change the border-radius of the outer box here: */
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    height: 65px;
    /*   the next two lines add space above and below (respectivly) */
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}
span.sermon_block-news {
    /*   the text "Latest Sermon" color (currently a light grey) can be changed with the color option*/
    color: #D6D6D6;
    background: url("site/1/template/sermon_block_latest_bg.png") no-repeat scroll right top transparent;
    float: left;
    margin: 10px 14px 10px 0;
    padding: 16px 30px 17px 20px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}
h3.sermon_block-title {
    /*   the sermon title color (currently white) can be changed with the color option*/
    color: #FFFFFF;
    float: left;
    font-size: 16px;
    font-weight: bold;
    margin: 20px 8px 20px 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.sermon_block span.date {
    /*   the sermon title color (currently a light grey) can be changed with the color option*/
    color: #cccccc;
    float: left;
    margin: 25px 0;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}
span.date, span.sermon_block-news {
    font: bold 10px Verdana,Arial;
    text-transform: uppercase;
}
ul.sermon_block-buttons {
    /* add HTML color code to color the new bar: background: #D9E3C7 url("site/1/template/sermon_block_overlay_btn.png") repeat-x scroll left top transparent; */
    background: url("site/1/template/sermon_block_overlay_btn.png") repeat-x scroll left top transparent;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    float: right;
    list-style: none outside none;
    margin: 12px 20px 0 0;
    padding: 0;
}
ul.sermon_block-buttons li {
    background: url("site/1/template/sermon_block_separator_btn.png") no-repeat scroll right bottom transparent;
    float: left;
    margin: 0;
    padding: 9px 1px 10px 0;
}
ul.sermon_block-buttons li a.download {
    background: url("site/1/template/sermon_block_icons2.png") no-repeat scroll 12px -22px transparent;
}
ul.sermon_block-buttons li a.archive {
    background: url("site/1/template/sermon_block_icons2.png") no-repeat scroll 12px -54px transparent;
}
ul.sermon_block-buttons li a.listen {
    background: url("site/1/template/sermon_block_icons2.png") no-repeat scroll 12px 8px transparent;
}
ul.sermon_block-buttons li a {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 10px 15px 10px 34px;
}
ul.sermon_block-buttons li a, span.date, span.description, span.sermon_block-news {
    font: bold 10px Verdana,Arial;
    text-transform: uppercase;
}
/*   End Podcast Sermon Block   */
In this code we placed comments to help you edit the code if you wish and they always begin with /* and end with */
  1. Add the following code to the bottom of the template before the </body></html> tags. 

Bottom of Template Javascript Code
 
<script type="text/javascript" src="site/1/template/podcast_scripts.js"></script>
 
  1. Add the following code into the template where you wish th have the "Latest Sermon Bar" to display.

Head Code
 
<div id="Sermon_block" class="wrap"> <div class="sermon_block"> <span class="sermon_block-news">Latest Sermon</span> <h3 class="sermon_block-title">Loading...</h3>&nbsp;<span class="date"></span> <ul class="sermon_block-buttons"> <li><a href="podcast.php" class="listen">Subscribe</a></li> <li><a href="#" class="download">Download</a></li> <li><a href="podcastlist.php" class="archive">Archive</a></li> </ul> </div> </div>

» Click here for a newer responsive bar
 
  1. View in awe what God has created through you!