Joomla Templates Club 406,261 posts

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#182893

Hi everyone, I am hoping for some help adding this code to the top position of the template, I would like the position to be like this site (http://www.lifechurch.tv/watch). If you see on the top there is a black header and on the right it says “ and there is a countdown.

This is the code for this script and I would like to add to JA Mendozite template. How can i achieve this, the template positions top.header but the countdown dows no show up.

Can someone help me me to show it like in the site listed above, with black background?

<!-- PLACE THIS CODE IN THE HEAD TAG OF THE PAGE --><style type="text/css">
#churchonline_counter { overflow: auto; width: 200px; padding: 10px; display: none; }
#churchonline_counter .description, #churchonline_counter .time li .label { font-size: 0.8em; }
#churchonline_counter .time { list-style: none; padding: 0; margin: 10px 0 0 0; }
#churchonline_counter .time li { float: left; padding: 0 10px; text-align: center; }
#churchonline_counter .time li:first-child { padding-left: 0; }
#churchonline_counter .time li span { font-size: 1.2em; }
#churchonline_counter .live { display: none; font-weight: bold; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//<!]>
</script>
<!-- END: PLACE THIS CODE IN THE HEAD TAG OF THE PAGE -->

<!-- PLACE THIS CODE IN THE BODY OF THE PAGE -->
<div id="churchonline_counter">
<div class="live">Live Now</div>
<div class="info">
<div class="title"></div>
<div class="description"></div>
</div>
<ul class="time">
<li><span class="days"></span> <br /><span class="label">days</span></li>
<li><span class="hours"></span> <br /><span class="label">hrs</span></li>
<li><span class="minutes"></span> <br /><span class="label">mins</span></li>
<li><span class="seconds"></span> <br /><span class="label">secs</span></li>
</ul>
</div>
<!-- END: PLACE THIS CODE IN THE BODY OF THE PAGE -->

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#475532

Hello Magtaf,

Top.header is a name of block, not position. In order to make the your module appears on header, you can use postion ‘jalogin’ or go to:

templatesja_mendoziteblocksheader.php

Paste these lines in any place you want:

<?php if($this->countModules('name_position')) : ?>
<div id="ja-login">
<jdoc:include type="modules" name="name_position" />
</div>
<?php endif; ?>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#475533

Hi magtaf,

I have added this script into jalogin position on JA Mendozite Template. But this code doesn’t work.

I tried to copy it and make alone page running with that but it doesn’t work either. Please check this code above again.

Regards

[magtaf Friend magtafJoin date: April 2006Posts: 78Downloads:27Uploads:29 Thanks: 16 Thanked: 1 times in 1 posts]

#475577

I managed to get the script to load in ja-login, but I need this position to have no formatting and the width seems to be set somewhere in the css.

How can I have ja-position stripped of its formatting or create a position?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#475661

You can change CSS code for this JA Login module in this file:

<blockquote>templates/ja_mendozite/css/mod_jalogin.css</blockquote>

#ja-login {
float: right;
margin-top: 8px;
}

#ja-login > ul {
position: relative;
}

#ja-login > ul > li {
display: inline-block;
float: left;
}

#ja-login > ul > li > a {
color: #222
font-size: 92%;
padding: 0 10px 0 30px;
height: 25px;
line-height: 25px;
background: #fff no-repeat 10px center;
border: 1px solid #fff
display: inline-block;
z-index: 1;
}

#ja-login > ul > li > a:hover,
#ja-login > ul > li > a:focus,
#ja-login > ul > li > a:active {
border-color: #e2e2e2
background-color: #fff
}

#ja-login > ul > li > a.show {
border-color: #e2e2e2
border-bottom-color: #fff
background-color: #fff
z-index: 3;
}

#ja-login > ul > li > a.login-switch {
background-image: url(../images/icons/icon-login.png);
}

#ja-login > ul > li > a.register-switch {
background-image: url(../images/icons/icon-register.png);
}

#ja-user-login ul li a:link, #ja-user-login ul li a:visited {
padding: 0 !important;
}

About creating a new position in JA template, pls check out this userguide for more information:
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Default_Layout

[Author]

Posts