Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding a header and footer to slide template #229

Closed
utdrmac opened this issue May 18, 2015 · 6 comments
Closed

Adding a header and footer to slide template #229

utdrmac opened this issue May 18, 2015 · 6 comments
Labels
question

Comments

@utdrmac
Copy link

utdrmac commented May 18, 2015

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

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

How should I add a footer and tell remark that the display area has been reduced?
@utdrmac
Copy link
Author

utdrmac commented May 19, 2015

Need a better solution. My simple adding of a div before the textarea 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?

@gnab
Copy link
Owner

gnab commented May 19, 2015

You should never add stuff outside of the <textarea>. What you want to do is use the layout 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 layout: false is used to deactivate it).

https://github.com/gnab/remark/wiki/Markdown#layout

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

@gnab gnab added the question label May 19, 2015
@utdrmac
Copy link
Author

utdrmac commented May 22, 2015

Perfect! Thank you!

@utdrmac utdrmac closed this as completed May 22, 2015
@arioch
Copy link

arioch commented Oct 14, 2015

I can't seem to figure out how to put an image in the footer.
Could you maybe point me in the right direction?

@utdrmac
Copy link
Author

utdrmac commented Oct 14, 2015

@arioch 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.

<link rel="stylesheet" type="text/css" href="my-remark.css"/>
<body>
    <textarea id="source">

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;
}

@arioch
Copy link

arioch commented Oct 14, 2015

That's pretty much what I was looking for, thanks!

@technopagan technopagan mentioned this issue May 18, 2016
Open
@yihui yihui mentioned this issue Jan 26, 2017
Closed
@drorata drorata mentioned this issue Jan 26, 2018
Open
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gnab @arioch @utdrmac