Remark: Adding a header and footer to slide template

Created on 18 May 2015 · 6Comments · Source: gnab/remark

I was able to add a header to my slide design/layout by simple adding a

before the

. When trying to add a <div> AFTER, to create a footer, the div gets buried (overlayed) with all the divs of the slide content.</p>

<p>How should I add a footer and tell remark that the display area has been reduced?</p>

</div>
                        <div>
                                                        <span class="badge badge-primary">question</span>
                                                        <div class="float-right">
                                <a class="text-muted" href="https://www.github.com/gnab/remark/issues/229" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/4413670?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
                                <strong>utdrmac</strong>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="col-12 mb-4 best-comment">
                <div>
                    <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2>
                </div>
                <div class="card card-custom border-lg-success mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>You should never add stuff outside of the <code><textarea></code>. What you want to do is use the <code>layout</code> slide property to define an initial template slide that contains the common header that will be included in all following slides (until a new layout slide is defined, or the <code>layout: false</code> is used to deactivate it).</p>

<p><a rel="nofollow noopener" target="_blank" href="https://github.com/gnab/remark/wiki/Markdown#layout">https://github.com/gnab/remark/wiki/Markdown#layout</a></p>

<p>As for the footer the easiest is probably to add a <code><div class="footer">your footer text</div></code> in the layout slide, and use CSS like <code>.footer { position: absolute; bottom: 12px; left: 20px }</code> to position it correctly.</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/158686?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
                                <strong>gnab</strong>
                                <span class="text-muted ml-1">on 19 May 2015</span>
                            </div>
                            <div class="col text-right">
                                                                🎉<span class="ml-2 mr-3">3</span>
👍<span class="ml-2 mr-3">1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-12">
                <div class="mb-4">
                    <ins class="adsbygoogle"
                        style="display:block"
                        data-ad-client="ca-pub-3835332123789605"
                        data-ad-slot="9295564578"
                        data-ad-format="auto"
                        
                        data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>

<div class="col-12 d-flex align-items-center mb-4">
                                <h2>All 6 comments</h2>
                
                            </div>

<div class="col-12">
                                <div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>Need a better solution. My simple adding of a <code>div</code> before the <code>textarea</code> doesn't scale if you change to 4:3 ratio. What's a simple way of adding a permanent header and footer area as a style template to each slide?</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/4413670?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="utdrmac picture">
                                <strong>utdrmac</strong>
                                <span class="text-muted ml-1">on 19 May 2015</span>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>You should never add stuff outside of the <code><textarea></code>. What you want to do is use the <code>layout</code> slide property to define an initial template slide that contains the common header that will be included in all following slides (until a new layout slide is defined, or the <code>layout: false</code> is used to deactivate it).</p>

<p><a rel="nofollow noopener" target="_blank" href="https://github.com/gnab/remark/wiki/Markdown#layout">https://github.com/gnab/remark/wiki/Markdown#layout</a></p>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>Perfect! Thank you!</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/4413670?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="utdrmac picture">
                                <strong>utdrmac</strong>
                                <span class="text-muted ml-1">on 22 May 2015</span>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>I can't seem to figure out how to put an image in the footer.<br />
Could you maybe point me in the right direction?</p>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/289522?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="arioch picture">
                                <strong>arioch</strong>
                                <span class="text-muted ml-1">on 14 Oct 2015</span>
                            </div>
                            <div class="col text-right">
                                                                                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p><strong>@arioch</strong> This is what I have. It's an image in the header but I'm sure you can adjust to an image in the footer easily enough. There's a gradient from white to orange in my header.</p>

layout: true
<div class="my-header"><img src="images/logo_tiny.png" style="height: 30px;"/></div>
<div class="my-footer"><span>&copy; 2011 - 2015 My Company, Inc.</span></div>

---
class: center, middle

Title Page

---

## Table of Contents

Slide 2
</textarea>

==== CUT my-remark.css =====

/* Header/Footer stuff */
div.my-header {
    background-color: #F77A00;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffb76b), color-stop(0%,#ffa73d), color-stop(0%,#ffffff), color-stop(10%,#ffffff), color-stop(25%,#F77A00), color-stop(100%,#F77A00));
    position: fixed;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 100%;
    text-align: left;
}

div.my-footer {
    background-color: #F77A00;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 100%;
}

div.my-footer span {
    font-size: 10pt;
    position: absolute;
    left: 15px;
    bottom: 2px;
}
</code></pre>

</div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col">
                                <img src="https://avatars.githubusercontent.com/u/4413670?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="utdrmac picture">
                                <strong>utdrmac</strong>
                                <span class="text-muted ml-1">on 14 Oct 2015</span>
                            </div>
                            <div class="col text-right">
                                                                👍<span class="ml-2 mr-3">2</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown">
                        <p>That's pretty much what I was looking for, thanks!</p>

</div>

<div class="col-12">
                <div class="card card-custom mb-4">
                    <div class="card-body pt-3 pb-3 markdown text-center helpful">
                        <div class="title">Was this page helpful?</div>
                                                                                                    <div class="mt-1" onMouseLeave="rating(77745498, 0);">
                                                                                                                        <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(77745498, 1);" onclick="rate(77745498, 1);"></i>
                                                                <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(77745498, 2);" onclick="rate(77745498, 2);"></i>
                                                                <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(77745498, 3);" onclick="rate(77745498, 3);"></i>
                                                                <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(77745498, 4);" onclick="rate(77745498, 4);"></i>
                                                                <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(77745498, 5);" onclick="rate(77745498, 5);"></i>
                                                                                    </div>
                        <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div>
                    </div>
                </div>
                <div class="mb-4">                   
                    <ins class="adsbygoogle"
                        style="display:block"
                        data-ad-client="ca-pub-3835332123789605"
                        data-ad-slot="3452512275"
                        data-ad-format="auto"
                        
                        data-full-width-responsive="true"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">

<div class="card card-custom issue-box">
            <div class="card-body pt-3 pb-5">
                <h2 class="mb-4">Related issues</h2>
                                                <div>
                    <strong>
                        <a href="/remark/273183912/incremental-slides-with-left-right-columns">incremental slides with left/right columns</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/241843?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="stephentu picture">
                    <strong class="pr-1" dir="ltr">stephentu</strong>
                                         · 
                    <span class="px-1" dir="ltr">5</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/remark/53004659/remark-in-a-cdn">remark in a CDN</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/732415?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="juanpabloaj picture">
                    <strong class="pr-1" dir="ltr">juanpabloaj</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/remark/175586228/comparison-with-reveal-js">Comparison with reveal.js</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/150032?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="donquixote picture">
                    <strong class="pr-1" dir="ltr">donquixote</strong>
                                         · 
                    <span class="px-1" dir="ltr">5</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/remark/28264402/full-width-presentation">Full width presentation</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/10137?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ghost picture">
                    <strong class="pr-1" dir="ltr">ghost</strong>
                                         · 
                    <span class="px-1" dir="ltr">7</span><span>Comments</span>
                                    </div>
                 <hr />
                                                <div>
                    <strong>
                        <a href="/remark/801862039/math-rendering-problem">Math rendering problem</a>
                    </strong>
                </div>
                <div class="text-muted text-small mt-2">
                    <img src="https://avatars.githubusercontent.com/u/34507952?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="mathieuLacroix picture">
                    <strong class="pr-1" dir="ltr">mathieuLacroix</strong>
                                         · 
                    <span class="px-1" dir="ltr">3</span><span>Comments</span>
                                    </div>
                                
            </div>
        </div>
        
        <div class="sticky-top pt-4">
            <ins class="adsbygoogle"
                style="display:block"
                data-ad-client="ca-pub-3835332123789605"
                data-ad-slot="3919948963"
                data-ad-format="auto"
                
                data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

<div id="ph-below-related-2" class="mt-4">
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-3835332123789605"
                    data-ad-slot="3919948963"
                    data-ad-format="auto"
                    
                    data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        
    </div>

</div>
		<div class="skyscraper-container">
			<ins class="adsbygoogle"
				style="display:block"
				data-ad-client="ca-pub-3835332123789605"
				data-ad-slot="7879185320"
				data-ad-format="vertical"
				data-full-width-responsive="true"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</div>

<div class="mt-5 spacer"></div>
<footer class="mt-5 pb-2 py-4 text-center mt-auto">
    <div class="container">
        <a class="navbar-brand logo mr-5" href="/">
            <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo">
            bleeping<strong>coder</strong>
        </a>

<div class="mt-4">
            bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners.        </div>
                <div>
            Source for this page: <a href="https://www.github.com/gnab/remark/issues/229" rel="nofollow noreferrer" target="_blank">Source</a>
        </div>
            </div>

<div class="container">
        <div class="row">
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular programming languages</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/python" dir="ltr">Python</a>
                    </li>
                    <li class="mb-2">
                        <a href="/javascript" dir="ltr">JavaScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/typescript" dir="ltr">TypeScript</a>
                    </li>
                    <li class="mb-2">
                        <a href="/cpp" dir="ltr">C++</a>
                    </li>
                    <li class="mb-2">
                        <a href="/csharp" dir="ltr">C#</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-sm-0 mb-5">
                <strong>Popular GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/microsoft/vscode" dir="ltr">vscode</a>
                    </li>
                    <li class="mb-2">
                        <a href="/numpy/numpy" dir="ltr">numpy</a>
                    </li>
                    <li class="mb-2">
                        <a href="/ant-design/ant-design" dir="ltr">ant-design</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mui-org/material-ui" dir="ltr">material-ui</a>
                    </li>
                    <li class="mb-2">
                        <a href="/vercel/next-js" dir="ltr">next.js</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4 col-lg mb-0">
                <strong>More GitHub projects</strong>
                <ul class="list-unstyled mb-0 mt-2">
                    <li class="mb-2">
                        <a href="/rust-lang/rust" dir="ltr">rust</a>
                    </li>
                    <li class="mb-2">
                        <a href="/moment/moment" dir="ltr">moment</a>
                    </li>
                    <li class="mb-2">
                        <a href="/yarnpkg/yarn" dir="ltr">yarn</a>
                    </li>
                    <li class="mb-2">
                        <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a>
                    </li>
                    <li class="mb-2">
                        <a href="/JuliaLang/julia" dir="ltr">julia</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

<hr class="mb-5 mt-5">
    <div class="container text-muted">
        © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br />
        By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>.
    </div>
</footer>

</html>