slidify - How to create slide layouts

Question

I'm working on a customized slidify presentation for a conference I have to do in a few weeks in a university (PhD level). I would like to create DRY layouts in assets/layouts directory to simplify slide design and keep things DRY : title-only, plan, sub-title-only, title-and-body, sub-title-and-two-cols, title, sub-title-and-body, caption, blank.

I visited the ramnathv github repository and specific slidify Website page to customize layouts.

I have also checked the several questions asked on slidify specific subject.

I have successfully create a slide.cssfile in assets/css, and add an logo in assets/imgto customize the aspect and the css attributes for my presentation (customizing the tilte-slide & slide).

I would like to create an htmlfile in assets/layoutsfor each of my presentation slide type : title-only.html, plan.html, sub-title.htmll, title-and-body.html, sub-title-and-two-cols.html, title.html, sub-title-and-body.html, caption.html, blank.html.

I have found a useful question answered by ramnathv here to create my sub-title-and-two-cols.html file in the Layouts with Parameterspart.

I need now to transfer my css attributes created in my 'slide.cssfile in theassets/css` directory.

For example, I would like to create a plan.html file. Here is the code I would like to compute from the slide.cssfile for the plan.html file :

Modify the font:

@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT');

Modify the title slide attributes:

/* slide h2 css modification = for page title left - blue */
slide:not(.segue) h2{
font-family:'Old Standard TT', sans-serif;
font-size: 36px;
font-style: normal;
font-weight: lighter;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
text-align: left;
color: #0000ff;
}

modify the text content attributes:

 /* slide article & section css modification = normal lighter darkgrey */
 article p, article li, article li.build, section p, section li{
 font-family: 'Old Standard TT', sans-serif;
 font-size:22px;
 font-style: normal;
 font-weight: lighter;
 text-transform: normal;
 text-align: left ;
 letter-spacing: 1px;
 line-height: 1.5em;
 color: #4c4c4c;
 }

I would like to know how can I transfer this css attributes in my plan.html file:

    ---
    layout: slide
    ---
    {{{ content }}}  
    ...
    ...

And then, for the 'plan' slide, I will mark them like this:

    --- &plan

    ### a header

    some text

Which should get the css attributes specified just before.

slidify - How to create slide layouts

0 Answers0