• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Countdown Timer Cliptheapex.com

Status
Not open for further replies.

EQnoble

Well-known member
Thank you for this useful function, EQnoble! :) a .XML file would be great for me though! ;)
Explain for me if you could xml file. I mean the addon comes with an xml to install it so what could you possibly want another xml for. I am confused....what's new? :)
 

Lilybet

Member
@EQnoble, my bad, it is indeed a product...was just looking at the template edits in a few posts which drew me to the wrong conclusion, as I dislike the hassle of edits, but nice add-on anyway; much appreciated! :)
 

Diana

Active member
I stole your idea for my site :whistle:

I now put the flag of the current Grand Prix as a background image :)

http://cliptheapex.com/

And I stole your idea for the background.:p

But now I'm stumped trying to align the countdown, as you can see here:

countdown.png

I'm trying to align it where the ad banner is:

advertise.png

I'm guessing there's something I need to change in the page_container template, but since I'm clueless about CSS I don't know what or where.

Code for ad banner:

Code:
<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
            <div id="advert_bar_l">
              <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if></div>
                  <div id="advert_bar_r">
                    <div id="top-advert">
                      <div id="top-advert">
                        <a href="@topBanner"><img src='@imagePath/xenforo/style/sample_ad.png' alt='' border='0' /></a></div>

This is how I have it in the page_container:

Code:
<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
            <div id="advert_bar_l">
              <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if></div>
                  <div id="advert_bar_r">
                    <div id="top-advert">
                      <div id="top-advert">
                        <xen:include template="countdown" /></div>

Or maybe the change has to be made in the CSS for the advert_bar?:

Code:
#advert_bar_l
{
      background-image: url('@imagePath/xenforo/style/advertising_bar_l.png');
      background-repeat: none;
      float: left;
      margin: 15px 0 5px 0;
      height: 118px;
      width: 325px;

Banging my head against the keyboard.
 

Renada

Active member
I've done mine inline as I will need to update it for each GP so as I'll be updating the counter details anyway, it's easier to keep it all in the same template.

View attachment 16511

I also had to modify some of the CSS to change the digit background to transparent or none, and also make the H3 heading and dividers darker.

Hi Brogan,

How did you get your text to stay dark while the image kept the opacity?

Regards,
Renada :)
 

EQnoble

Well-known member
Code:
<div id="content" class="{$contentTemplate}">
    <div class="pageWidth">
            <div id="advert_bar_l">
              <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if></div>
                  <div id="advert_bar_r">
                    <div id="top-advert">
                      <div id="top-advert">
                        <xen:include template="countdown" /></div>

Code:
#advert_bar_l
{
      background-image: url('@imagePath/xenforo/style/advertising_bar_l.png');
      background-repeat: none;
      float: left;
      margin: 15px 0 5px 0;
      height: 118px;
      width: 325px;

Banging my head against the keyboard.

Try this...i think it is what you wanted to do.

In that styles templates...

go to:

cta_countdown_main

find:
Code:
.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 0px;
font-family: Arial, sans-serif;
font-size: 9px;
color: @mutedTextColor;
text-transform: uppercase;
letter-spacing: 0px;
}
and add this right after it..
Code:
.bellCountdown {
margin-left:45px;
margin-top:-23px;
width:361px;

______

Now go to:
cta-countdown_sidebar

add this as the first line- <div class="bellCountdown">
and and a </div> at the end of the template

lemme know if this works for you.
 

Carlos

Well-known member
So, this is what everyone's using as a countdown timer, eh? Installing this tomorrow.

I wish I knew which wordpress hack does this, I have a MW3 blog I have in mind.
 

Diana

Active member
EQnoble,

Ok, I'm starting over.

Actually I was using Brogan's template until I found that I can't follow your directions without installing your addon.

So...

I've uploaded the contents of the UPLOAD folder to to the XenForo install directory but when I try to install the xml file I get this error:

Please enter a valid callback method

Where have I gone wrong?
 

Diana

Active member
Ok, had to install from the server, like so:

library/CTA/addon-cta_cdtimer_sidebar.xml

It's an improvement, but still needs centering, etc.

countdown2.png
I'll play around with it a bit, see if I can make it work.
 

Mikey

Well-known member
Hi All.

This should eliminate your template edits once and for all. Was an easy process for me to just throw in the options. Ant, if you want me to demonstrate how for you some time let me know via PC and we'll set something up.

Hope it's okay for me to upload these modified files. Of course if it isn't okay, please feel free to remove this message.. the changes I made to the add-on itself were just to add some pretty simple options is all, and in the code I just made params available to the template, you're free to use them with zero attribution to myself of course.

Enjoy :D

cliptheapex-countdown-xenoptions.png
 

Attachments

  • CTA_countdown_sidebar_v1.0.1_.zip
    5.3 KB · Views: 9

Brogan

XenForo moderator
Staff member
Nice work guys, this is a useful little add-on now.

I may even use it myself instead of the template edit I still have in place :D

P.S. I can see a few typos in the screenshot above: "donth of the year" for month and "day of the year" for year.
 
Status
Not open for further replies.
Top