Menu
Knowledge Base Responsive Podcast Bar
Help Center
back With the addition of resopnsive themes comes the need for responsive content. The Podcast Bar is no exception. Here we provide all of the code so you can add a podcast to any page of your website.

If you are using either the Rainbow or Seashore theme then you will need to add the following code to the "config" section of "theme.conf".  If this is the last item in the config area, the last comma will need to be removed:

theme.conf
 
"accent-color": {
	"title": "Accent Color",
	"type": "color",
	"value": "#2263f6"
},

Create a "New File" (using the "New File" button and name it "PodcastBox.less" and select the "/style" selector in the box to the right of the title box). Copy and paste the following into the new file:

PodcastBox.less
 
/*   Begin Podcast Sermon Block   */
@sermon-font-color: lighten(@config-accent-color, 40%);
@sermon-date-color: lighten(@config-accent-color, 20%);
@arrow-box-color: lighten(@config-accent-color, 10%);
@sermon-accent-color: darken(@config-accent-color, 5%);


.clear {
    clear: both;
}
div.wrap {
    margin: 0 auto;
    max-width: 100% !important;
}
.sermon_block {
    background: @sermon-accent-color;
    background-size: 100% 100%;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    height: 100px;
    width: 100%;
    max-width: 100% !important;
}
/*  Arrow Box */
.arrow_box {
	position: relative;
	background: @arrow-box-color;
	text-align: center;
	margin-bottom: 20px;
	padding: 10px;
}
.arrow_box:after, .arrow_box:before {
	left: 50%;
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box:after {
	border-top-color: @arrow-box-color;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-top-color: @arrow-box-color;
	border-width: 11px;
	margin-left: -11px;
}
/* End Arrow Box */
.sermon_block-news {
    color: @sermon-font-color !important;
    float: left;
    margin: 10px 15px 14px 15px;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}
.sermon_block-title-box {
	float: left;
	padding: 12px 30px 17px 20px;
}
h3.sermon_block-title {
    color: @sermon-font-color !important;
    font-size: 16px;
    font-weight: bold;
    clear: both;
    text-align: center;
    position: relative;
    top: 10%;
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%);
    margin: 10px 15px 10px 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.sermon_block span.date {
    color: @sermon-date-color !important;
    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 {
    background: url("http://help.adventistchurchconnect.com/site/1/podcast_bar/sermon_block_overlay_btn.png") 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("http://help.adventistchurchconnect.com/site/1/podcast_bar/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("http://help.adventistchurchconnect.com/site/1/podcast_bar/sermon_block_icons2.png") no-repeat scroll 12px -22px transparent;
    color: @sermon-font-color !important;
}
ul.sermon_block-buttons li a.archive {
    background: url("http://help.adventistchurchconnect.com/site/1/podcast_bar/sermon_block_icons2.png") no-repeat scroll 12px -54px transparent;
    color: @sermon-font-color !important;
}
ul.sermon_block-buttons li a.listen {
    background: url("http://help.adventistchurchconnect.com/site/1/podcast_bar/sermon_block_icons2.png") no-repeat scroll 12px 8px transparent;
    color: @sermon-font-color !important;
}
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;
}
@media screen and (max-width: 1199px) {
    .sermon_block {
        height: 350px;
        background-size: 100% 100%;
        text-align: center;
    }
    .sermon_block-news {
        background: @sermon-accent-color;
        background-size: 100% 100%;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        color: @sermon-font-color !important;
        padding: 16px 16px 16px 16px;
        float: none;
        display: inline-block;
    }
    ul.sermon_block-buttons {
        content:"\a";
        float: none;
        background: none;
        display: inline;
    }
    ul.sermon_block-buttons li {
        float: none;
        background: @sermon-accent-color;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
    h3.sermon_block-title {
        position: relative;
        top: auto;
        -webkit-transform: translateY(auto);
        -ms-transform: translateY(auto);
        transform: translateY(auto);
        margin: 10px 15px 10px 15px;
    }
}
/*   End Podcast Sermon Block   */


In "global.less" add the following line of code:

global.less
 
@import "PodcastBox.less";
 
Finally, add this code into the place on any page where you want the Podcast Bar to show:

Your Page HTML Code
 
<!-- Podcast Bar Begins Here -->
<script type="text/javascript" src="http://help.adventistchurchconnect.com/site/1/podcast_bar/podcast_scripts.js"></script>
<div class="wrap" id="Sermon_block">
<div class="sermon_block">
<div class="sermon_block-news">
<div class="arrow_box"><strong>Latest Podcast</strong></div>
</div>
<ul class="sermon_block-buttons">
	<li><a class="download" href="http://test.adventistchurchconnect.com/site/1/podcast/Test.mp3" target="_blank">Download</a></li>
	<li><a class="archive" href="podcastlist.php?preview_theme=SUThemeSpruce">Archive</a></li>
	<li><a class="listen" href="podcast.php?preview_theme=SUThemeSpruce" target="_blank">Subscribe</a></li>
</ul>
<div class="sermon_block-title-box">
<h3 class="sermon_block-title">My New Title</h3>
</div>
</div>
</div>
<!-- Podcast Bar Ends Here -->