Trouble adding a new section/block to Edition homepage

Themes
1

I’m close here, I can feel it!

I’m trying to add a new homepage section between the “cover” and “featured posts” section, instead of creating a brand new homepage from scratch.

The new section is going to just be a simple “countdown” widget for fundraising that looks like this:

Screenshot from 2023-05-11 11-04-33
Screenshot from 2023-05-11 11-04-33837×212 5.42 KB

I’ve got a new file in partials area of my file manager with the following code:


<section class="counter">
    <div id=countdown-wrap>
        <div id="goal">$300k Goal</div>
        <div id="glass">
            <div id="progress">
            </div>
        </div>
        <div class="goal-stat">
            <span class="goal-number">17%</span>
            <span class="goal-label">Funded</span>
        </div>
        <div class="goal-stat">
            <span class="goal-number">$51k</span>
            <span class="goal-label">Raised</span>
        </div>
        <div class="goal-stat">
            <span class="goal-number"><div id="countdown"></div></span>
            <span class="goal-label">Days to Go</span>
        </div>
        <div class="goal-stat">
            <span class="goal-number">3</span>
            <span class="goal-label">Company Sponsors</span>
        </div>
    </div>
</section>

Step 2 was adding the css in the “misc” folder like this:

	.counter {
	font-family: "Modern", sans-serif;
	box-sizing: border-box;
}

.counter {
	background-color: #fff;
}
	
	#countdown-wrap {
		font-family: "Modern", sans-serif;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		height: 300px;
		/* border: 1px solid black; */
		padding: 20px;
		max-width: 650px;
		margin: 50px auto 50px;
	}

	#goal {
		font-size: 48px;
		text-align: right;
		color: #333333;
	}

	@media only screen and (max-width: 640px) {
		#goal {
			text-align: center;
		}
	}

	#glass {
		width: 100%;
		height: 20px;
		background: #c7c7c7;
		border-radius: 10px;
		float: left;
		overflow: hidden;
	}

	#progress {
		float: left;
		width: 17%;
		height: 20px;
		background: #ffbc2e;
		z-index: 333;
		/* border-radius: 5px; */
	}

	.goal-stat {
		width: 25%;
		padding: 10px;
		float: left;
		margin: 0;
		color: #333333;
	}

	@media only screen and (max-width: 640px) {
		.goal-stat {
			width: 50%;
			text-align: center;
		}
	}

	.goal-number,
	.goal-label {
		display: block;
	}

	.goal-number {
		font-weight: bold;
	}

And finally dropped in the js in a new file in “lib” folder:

    var counter = "counter";

    CountDownTimer('8/1/2023 10:1 AM', 'countdown');
    CountDownTimer('5/1/2023 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer)};
                document.getElementById(id).innerHTML = '0';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days /*+ ' days'*/;
            //document.getElementById(id).innerHTML += hours + 'hrs ';
            //document.getElementById(id).innerHTML += minutes + 'mins ';
            //document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }
</script>

Now I’m stumped. The html is rendering when I insert the new partial template block in my default.hbs, but no css and no js to be found!! Here’s some options I think might be the problem:

  1. I’m hoping I just screwed up some references (all the files are counter.hbs, counter.css and counter.js)
  2. I didn’t put the files in the correct folders to be picked up properly… maybe I should add the .js code into the main.js file??
  3. Who knows?

Any help is much appreciated! I really think this could be a great use case/explainer eventually for others as an easy way to drop in a new homepage section, but I’m not an expert coder by any means. THANK YOU

2

Which theme are you adding this to? For Ghost official themes, there’s a build step you need to do for the JS and CSS to be bundled for production (which sounds like might be the issue here).

Alternatively, you can sidestep that process by dropping your CSS and JS into Code Injection. You’ll need to wrap the CSS in a <style> tag and the JS in a <script> tag. The CSS should go in the Site header and JS in the Site footer.

3

Thanks!

I’m using the Edition theme. I’m not super adept at utilizing gulp and building gulp files so it looks like the second option may work.

I didn’t mention it in the original post, but I did do a sort of “stage deployment” inside a draft page, dropping a HTML section in and adding the css and js into the page code injection and it worked well-ish.

Only problem I’m concerned about - I had the background color applied to “body” and it affected the entire page [see code below]. I definitely don’t want to mess up any other page backgrounds by applying it globally. Should I designate something else or just delete the first “body” css snippet?

body * {
	font-family: "Modern", sans-serif;
	box-sizing: border-box;
}

body {
	background-color: #fff;
}

#countdown-wrap {
	width: 100%;
	height: 300px;
	//border: 1px solid black;
	padding: 20px;
	font-family: Modern sans-serif;
	max-width: 650px;
	margin: 50px auto 50px;
}

#goal {
	font-size: 48px;
	text-align: right;
	color: #333333;
	@media only screen and (max-width: 640px) {
		text-align: center;
	}
}

#glass {
	width: 100%;
	height: 20px;
	background: #c7c7c7;
	border-radius: 10px;
	float: left;
	overflow: hidden;
}

#progress {
	float: left;
	width: 17%;
	height: 20px;
	background: #ffbc2e;
	z-index: 333;
	//border-radius: 5px;
}

.goal-stat {
	width: 25%;
	//height: 30px;
	padding: 10px;
	float: left;
	margin: 0;
	color: #333333;

	@media only screen and (max-width: 640px) {
		width: 50%;
		text-align: center;
	}
}

.goal-number,
.goal-label {
	display: block;
}

.goal-number {
	font-weight: bold;
}

</style>
4

Yes, I’d change the body * and body declarations.

It’s likely possible to do this:

.counter {
  font-family: "Modern", sans-serif;
  background-color: #fff;
}

(The box-sizing declaration is probably already set somewhere else in your CSS.) Also, if you’re not loading the Modern font somewhere else, that font family declaration won’t work here.