which .html to edit for additional code?

[TheGreyWizard]

I am trying to add a count down timer to my website, as you can see I have a free demo version on my main page that I added the iframe coding to a WYSIWYG block, ohiocannabis.com
I don't want to pay for the non demo version and someone from a coding forums has given me a HTML/CSS code to use instead.

 

But I need to add the following to a .html file - I'm just not sure which one? Could you please tell me which .html file I can/should edit for situations like this?

 

I know normally everything goes in the custom.css file, but apparently this piece of code needs to go in the .html file to work:

 

I was told to find & replace this piece of code:

<div class='ipsWidget_inner ipsPad'>
<p style="text-align: center;">
<iframe frameborder="0" height="349" src="https://w2.countingdownto.com/1441311" width="262"></iframe>
</p>
</div>

with this new piece of code:

<div class='ipsWidget_inner ipsPad'>
<div id="wrapper" class="hide">
 <h2 id="event">event</h2>
  <div id="timer">
   <div id="row1">
    <span id="days">00</span>
    <span id="hours">00</span>
    <span id="minutes">00</span>
    <span id="seconds">00</span>
   </div>
   <div id="row2">
    <span>DAYS</span>
    <span>HOURS</span>
    <span>MINUTES</span>
    <span>SECONDS</span>
   </div>
  </div>
 <h2 id="date">date</h2>
</div>
</div>

And then to add this piece of code to the closing of the body tag of the same .html file:

<script src="https://www.ohiocannabis.com/forums/uploads/scripts/countdown.js"></script>

the only .html file I easily found was the default.html file and not sure if that's the right one and if I needed to add it to a nested .html file within the theme template folder?

IPS support said it was most likely the global template I was looking for, but I looked through it and didn't see the countingdown timer code so I don't think that's it.

Can anyone help me pin point it?

Thank you!

 

 

Thank you!

[TheGreyWizard]

bump

[MADMAN32395]

Why not just do a WYSIWYG block and just toggle into source/HTML and add your script?

[TheGreyWizard]

I just tried that and it doesn't work

[MADMAN32395]

1 hour ago, TheGreyWizard said:

I just tried that and it doesn't work

odd  works for me.

what I did is went to pages>blocks>newblock>Type Custom, Manual HTML>type in the name you want to use as reference (end users wont see it)> click the content tab, and just put in 

<iframe frameborder="0" height="349" src="https://w2.countingdownto.com/1441311" width="262"></iframe>

then save. then just goto that sidebar editor thing, and just add the block from there. 

 

Screenshots

using your countdown - https://drive.google.com/file/d/0B0mBb9QuGv84SFI5QnJpQjUtX28/view?usp=drivesdk

using information from your countdown, but the free one. - https://drive.google.com/file/d/0B0mBb9QuGv84clVCbVZiRlJ0OVU/view?usp=drivesdk

 

if you want, you could hit me up on skype or discord, and I wouldnt mind showing you how to.

[TheGreyWizard]

I'm not home at the moment and will try that when I get home. I just tried it via the drag and drop WYSIWYG and didn't try it the way you mentioned. if I can't do it I will Skype you, PM me your name.

 

thank you. 

[TheGreyWizard]

OK so following your advice I was able to get the timer to populate and use the countdown.js file within the uploads folder I added and seems to be counting down.

But it's not seeing the CSS file that gives it the correct look, any ideas on how/why?

I tried adding the CSS code to the HTML block but that didn't work.

 

body {
    font: 1em/1.5em verdana,arial,helvetica,sans-serif;
    background: #ffffff;
 }

#wrapper {
    width: 16em;
    padding: 0.5em;
    margin: auto;
    border: 0.01em solid #999;
    border-radius: 0.5em;
    background-color: #99CC33;
    color: #ffffff;
    text-align: center;
 }

.hide {
    display: none;
 }

#wrapper h2 {
    font-size: 1em;
    font-weight: bold;
 }

#date {
    padding-top: 1em;
    margin-top: 0;
    border-top: 1px solid #ded;
 }

#timer {
    display: table;
    width: 100%;
    margin-bottom: 0;
    border-bottom: 1px solid #123;
 }

#timer div {
    display: table-row;
 }

#timer span {
    display: table-cell;
    width: 25%;
 }

#row1 span {
    font: bold  1.6em/0.9em 'courier new', monospace;
    color: #fff; 
    text-shadow: 0 0 0.1em #012;
 }

#row1 span:nth-child(1),
#row1 span:nth-child(2),
#row1 span:nth-child(3)  {
    border-right: 1px solid #fff;
 }

#row2 span {
    font-size: 0.6em;
 }

That's the CSS code I need this block to associate with so it looks like the free demo version

[TheGreyWizard]

I was missing the css header piece of code and now that I've added that everything seems to be working & looking great!  Thanks for the help!

 

<link rel="stylesheet" href="https://www.ohiocannabis.com/forums/uploads/css/screen.css" media="screen">

<div class='ipsWidget_inner ipsPad'>
<div id="wrapper" class="hide">
 <h2 id="event">event</h2>
  <div id="timer">
   <div id="row1">
    <span id="days">00</span>
    <span id="hours">00</span>
    <span id="minutes">00</span>
    <span id="seconds">00</span>
   </div>
   <div id="row2">
    <span>DAYS</span>
    <span>HOURS</span>
    <span>MINUTES</span>
    <span>SECONDS</span>
   </div>
  </div>
 <h2 id="date">date</h2>
</div>
</div>

<script src="https://www.ohiocannabis.com/forums/uploads/scripts/countdown.js"></script>

 

[TheGreyWizard]

So the guy who gave me the code for the free countdown timer and also helped walked me through most of the installation asked me:

Why have you not placed the items where I suggested that you put them?

Doing it that way, regardless of whether it works or not, is really poor coding methodology.

So is there any way to find the correct .html file and add this coding to it? 

The way things are they do work just fine, so I'm happy with the results, but if it is better to add them to the correct .html file I would like to investigate going that route in the end.

Thank you for the help!

[MADMAN32395]

not sure why you or the guy thats helping you are making it so difficult using custom css when you can just use the iframe that is provided by both the site youre using and these guys (http://www.timeanddate.com/clocks/freecountdown.html) 

even using your site's preference, i was able to make it look like the free one.