3

I'm modifiying the first slide of my deck.

I was able to use an image as background, but I have problems putting the "yalm text: title, subtitle, and author" to the right of the slide (it conflicts with my image background).

I've tried modifiying the CSS called "slidify", as I did for the background.

But I don't get the expected result, instead all the text get crushed on the bottom left corner:

enter image description here

HTML PART:

<!-- LOGO SLIDE -->
        <slide class="title-slide segue nobackground">
  <hgroup class="auto-fadein">
    <h1>Tottus</h1>
    <h2>Apertura Molicentro</h2>
    <p>author<br/></p>
  </hgroup>
  <article></article>  
</slide>

CSS PART:

.title-slide {
  background-color: #FFFFFF; /* #EDE0CF; ; #CA9F9D*/
  /*background-image:url(D:\\presentaciones\\star-bg.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; 
  position:relative;  

  /* background-image:url(http://goo.gl/EpXln); */
}



.title-slide hgroup > h1, 
.title-slide hgroup > h2 {
  color: black ;  /* ; #EF5150*/
  position:absolute;
  right: 0;
}

UPDATE 1:

thanks to @LGSon, I've made some advances. See:

enter image description here

Issues:

1.- I've used the .title-slide hgroup to only affect the hgroup on the Title Slide, and used background grey on it. But the text is all messed up.

2.- When using_ top: 300, there is a block that covers the text. See 2nd image.

2nd Image:

enter image description here

Complete HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Main Text</title>
  <meta charset="utf-8">
  <meta name="description" content="Main Text">
  <meta name="author" content="author">
  <meta name="generator" content="slidify" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <link rel="stylesheet" href="libraries/frameworks/io2012/css/default.css" media="all" >
  <link rel="stylesheet" href="libraries/frameworks/io2012/css/phone.css" 
    media="only screen and (max-device-width: 480px)" >
  <link rel="stylesheet" href="libraries/frameworks/io2012/css/slidify.css" >
  <link rel="stylesheet" href="libraries/highlighters/highlight.js/css/tomorrow.css" />
  <base target="_blank"> <!-- This amazingness opens all links in a new tab. -->  <link rel=stylesheet href="./assets/css/ribbons.css"></link>

  
  <!-- Grab CDN jQuery, fall back to local if offline -->
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
  <script>window.jQuery || document.write('<script src="libraries/widgets/quiz/js/jquery.js"><\/script>')</script> 
  <script data-main="libraries/frameworks/io2012/js/slides" 
    src="libraries/frameworks/io2012/js/require-1.0.8.min.js">
  </script>
  
  

</head>
<body style="opacity: 0">
  <slides class="layout-widescreen">
    
    <!-- LOGO SLIDE -->
        <slide class="title-slide segue nobackground">
  <hgroup class="auto-fadein">
    <h1>Main Text</h1>
    <h2>Sub Text</h2>
    <p>author<br/></p>
  </hgroup>
  <article></article>  
</slide>
    

    <!-- SLIDES -->
    <slide class="" id="slide-1" style="background:;">
  <hgroup>
    <h2>Read-And-Delete</h2>
  </hgroup>
  <article data-timings="">
    <ol>
<li>Edit YAML front matter</li>
<li>Write using R Markdown</li>
<li>Use an empty line followed by three dashes to separate slides!</li>
</ol>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="class" id="id" style="background:;">
  <hgroup>
    <h2>Introduction</h2>
  </hgroup>
  <article data-timings="">
    <p>This dashboard pretend to be of help to people analizing Google Analytics data. </p>

<p>I happen to do a lot of web analytics, and this dashboard is going to be of great help to autmotize a lot of task, and, furthermore, to allow users to manipulate the data to solve their own questions.</p>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-3" style="background:;">
  <hgroup>
    <h2>The data</h2>
  </hgroup>
  <article data-timings="">
    <p>The data was extracted from the Google Analytics API with the RGA Package. </p>

<p>This package allow us to extract the data automatically and gives us more freedom to do combination of dimensions and metrics.</p>

<p>To do a correct combination of dimensions and metrics I recommend to use <a href="https://ga-dev-tools.appspot.com/query-explorer/">Google Analytics Query Builder</a>.</p>

<p><img class='center' width=300 height=100 src = 'D:\\RCoursera\\DataProducts\\pitch\\assets\\img\\ga.png'></img></p>

  </article>
  <!-- Presenter Notes -->
</slide>

<slide class="" id="slide-4" style="background:;">
  <hgroup>
    <h2>Graphs</h2>
  </hgroup>
  <article data-timings="">
    <p>The Dashboard will contain general and specific information about the interactions of the visitors with a particular web site. You&#39;ll find bar plots, scatterplots, and other interesting graphs into it.</p>

<pre><code class="r"> require(rCharts)
 qplot(wt, mpg, data = mtcars)
</code></pre>

<pre><code>## Error in eval(expr, envir, enclos): could not find function &quot;qplot&quot;
</code></pre>

  </article>
  <!-- Presenter Notes -->
</slide>

    <slide class="backdrop"></slide>
  </slides>
  <div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
    <ul>
      <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=1 title='Read-And-Delete'>
         1
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=2 title='Introduction'>
         2
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=3 title='The data'>
         3
      </a>
    </li>
    <li>
      <a href="#" target="_self" rel='tooltip' 
        data-slide=4 title='Graphs'>
         4
      </a>
    </li>
  </ul>
  </div>  <!--[if IE]>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">  
    </script>
    <script>CFInstall.check({mode: 'overlay'});</script>
  <![endif]-->
</body>
  <!-- Load Javascripts for Widgets -->
  
  <!-- LOAD HIGHLIGHTER JS FILES -->
  <script src="libraries/highlighters/highlight.js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- DONE LOADING HIGHLIGHTER JS FILES -->
   
  </html>

CSS PART:

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Source+Code+Pro:500|Open+Sans|Oswald);

/* Styles for Table of Contents */
#io2012-toc {
  position: absolute;
  top:0;
  left:10px;
  z-index: 999;
}
#io2012-toc a{
  border-bottom: none;
}

#io2012-toc .nav-pills > .active > a{
  background-color: darkslategray;
  color: yellow;
}
#io2012-toc li {
  margin-bottom: 0em;
}

#io2012-toc li.current {
  background-color: yellow;
}

.license {
  font-size: 14px;
  color: #a9a9a9;
  position: absolute;
  bottom: 30px;
  left: 60px;
}


/* Styles for Title Slide */
.title-slide hgroup > h1{
  font-family: 'Oswald', sans-serif;
}

.title-slide hgroup > h2{
  font-family: 'Oswald', 'Calibri', sans-serif;
}

/* Fonts and Spacing */
article p, article li, article li.build, section p, section li{
  font-family: 'Open Sans','Helvetica', 'Crimson Text', 'Garamond',  'Palatino', sans-serif;
  text-align: justify;
  font-size:22px;
  line-height: 1.5em;
  color: #444;
}

slide:not(.segue) h2{
  font-family: 'Calibri', Arial, sans-serif;
  font-size: 52px;
  font-style: normal;
  font-weight: bold;
  text-transform: normal;
  letter-spacing: -2px;
  line-height: 1.2em;
/*  color: #193441;*/
/*  color: #02574D;*/
  color: #CC2904;
}

/* Reduce Space between Title and Body */
slides > slide > hgroup + article {
  margin-top: 15px;
}

/* Remove Border, Margins and Padding from iframe */
iframe {
  border: none;
  margin: 0;
  padding: 0;
}

/* Knitr Images */
.rimage.left {
  text-align: left;
}
.rimage.right {
  text-align: right;
}
.rimage.center {
  text-align: center;
}

/* Quotes and Shout (for io2012, custom) */
article q {
  font-family: 'Crimson Text', sans-serif;
}

q {
  display: block;
  font-size: 44px;
  line-height: 56px;
  margin-left: 50px;
  margin-top: 100px;
  margin-right: 150px;
}

q::before {
  content: '“';
  position: absolute;
  display: inline-block;
  margin-left: -2.1em;
  width: 2em;
  text-align: right;
  font-size: 90px;
  color: silver;
}

q::after {
  content: '”';
  position: absolute;
  margin-left: .1em;
  font-size: 90px;
  color: silver;
}

div.author {
  text-align: right;
  font-size: 40px;
  margin-top: 20px;
  margin-right: 150px;
}

div.author::before {
  content: '—';
}

q.shout:before {
  content: '';
  position: absolute;
  margin-left: -0.5em;
}

q.shout:after {
  content: '';
  position: absolute;
  margin-left: 0.1em;
}

/* Tables */
table caption{
  margin-top: 20pt;
  font-weight: normal;
  font-family: "Trebuchet MS", Garuda, sans-serif;
}

table th {
  text-transform: capitalize;
}

/* Tables */

table {
  border: none;
  width: 100%;
  border-collapse: collapse;
  font-size: 24px;
  line-height: 32px;
  font-family: 'Trebuchet MS';
  font-weight: bolder;
  color: rgb(102, 102, 102);
}
table thead {
  border-top: 1px solid #BFBEAD;
  border-bottom: 1px solid #BFBEAD;
}
table th, table td, table caption {
  margin: 0;
  padding: 2pt 6pt;
  text-align: left;
  vertical-align: top;
}
table th {
  background: #CFCEBD;
  color: #575400;
  text-transform: uppercase;
}
table td {
  border-bottom: 1px solid #CFCEBD;
}
table tr:nth-child(2n+1) {
/*  background: #E8F2FF; */
  background: #EFEEDD;
}

/* Styling for Ordered Lists (only for io2012) */

ol {
  margin-left: 1.2em;
  margin-bottom: 1em;
  postion: relative;
}

ol li {
  margin-bottom: 0.5em;
  font-family: "Open Sans";
}

ol li ol {
  margin-left: 0.5em;
  margin-bottom: 0;
}

ol, ul {
  margin-top: .5em;
}

ol {
  list-style-type: decimal;
}

/*Github Ribbon Test*/
/* Source: https://github.com/dciccale/css3-github-ribbon */
/* Define classes for example, definition, problem etc. */
/* Choose meaningful colors for background and text */

.example {
  background-color: #121621;
  top: 1.2em;
  right: -3.2em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  -moz-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  color: #FF0;
  display: block;
  padding: .6em 3.5em;
  position: absolute;
  font: bold .82em sans-serif;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px -1px 8px rgba(0,0,0,0.60);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.definition {
  background-color: #a00;
  top: 1.2em;
  right: -3.2em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  -moz-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  color: #FFF;
  display: block;
  padding: .6em 3.5em;
  position: absolute;
  font: bold .82em sans-serif;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px -1px 8px rgba(0,0,0,0.60);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}


/* Pasted from Custom.css */
aside.gbar img {
  width: 175px;
}


div.modal-body pre{
  width: 95%;
  left: 0px;
}

.pagination {
  position: absolute;
  bottom: -5px;
  left:110px;
}

.pagination ul li:before {
  content: "";
}

body {
  font-family: "Open Sans";
  color: #444;
}

p {
  text-align: justify;
  line-height: 1.5em;
}
/* Place Video on Top Right */
/* FIXME: Move CSS to css/popcorn.css */
section.video {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}


/* Smaller code fonts in modal popup */
.modal pre code {
  font-size: 16px;
}

img.center {
  display: block;
  margin: auto auto;
}

body {
  background-color: #000;
}
.quiz-option label{
  display: inline;
  font-size: 1em;
}
slide.segue h2{
 font-family: "Open Sans Condensed";
 font-weight: 700;
}
slide:not(.segue)  h2{
 font-family: "Open Sans Condensed";
 font-weight: 700;
 color: darkslategray;
}
article p {
  font-family: "Open Sans"
}

code {
  font-size: 100%;
  font-family: "Source Code Pro", monospace;
  color: darkred;
}
pre code {
  font-weight: 500;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#glimmer iframe {
  width: 100%;
}

.title-slide {
  background-color: white;
  /*background-image:url(D:\\presentaciones\\star-bg.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; 
  width: 100%;
  height: 300px;
  /*display: block;*/
}

.title-slide hgroup {
  position: relative;
  width: 100%;
  height: 100%;
  right: 0;
  top: 100;
  background-color: grey;
}


.title-slide hgroup > h1, 
.title-slide hgroup > h2,
.title-slide hgroup > p {
  color: black;
  position: absolute;
  right: 0;
  
}


.title-slide hgroup > h1, 
.title-slide hgroup > h2,
.title-slide hgroup > p {
  top: 300px;
}
Omar Gonzales
  • 3,806
  • 10
  • 56
  • 120
  • Is the `position:relative;` supposed to be set on `title-slide`? ... It appears to be one more element between, the `hgroup`. – Asons Feb 06 '16 at 20:09
  • I think it would be good if you posted the markup as well. – Asons Feb 06 '16 at 20:12
  • @LGSon I've added the HTML corresponding to that Slide. Thanks – Omar Gonzales Feb 06 '16 at 22:45
  • Could you post the fully generated html file's content. The trouble seems to be the classic, where your slide's natural height doesn't fill full height, as absolute positioned element don't increase it as they are taken out of flow. – Asons Feb 07 '16 at 01:09
  • @LGSon I've posted the complete HTML code. When removing position:absolut the texts goes to the upper left corner, and is not crunched anymore. – Omar Gonzales Feb 07 '16 at 01:20

1 Answers1

3

Update

The main issue here, is when one use position: absolute, one need to set a unique position on each item or else they end up on top of each other.

Another way would be to set position: absolute on hgroup and let the h1,h2 and p flow normal inside it.

html, body { margin: 0; height: 100%; }    /* needed in my demo, should not be needed in yours  */


.title-slide {
  background-color: white;
  /*background-image:url(D:\\presentaciones\\star-bg.png); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; 
  position: relative;
}

.title-slide hgroup {
  position: absolute;
  width: auto;
  height: auto;
  right: 10px;
  bottom: 10px;
}

.title-slide hgroup > h1, 
.title-slide hgroup > h2,
.title-slide hgroup > p {
  margin: 0;
  color: black;
  text-align: right;
}
<!-- LOGO SLIDE -->
<slide class="title-slide segue nobackground">
  <hgroup class="auto-fadein">
    <h1>Main Text</h1>
    <h2>Sub Text</h2>
    <p>author<br/></p>
  </hgroup>
  <article></article>  
</slide>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Did you test this in an HTML file produce by slidify(index.Rmd)? This does have weird behaviour on my slides. `hgroup { position: relative; width: 100%; height: 100%; background: gray; }` makes all the inner part of the slides gray, not only the first slide. – Omar Gonzales Feb 06 '16 at 23:39
  • @OmarGonzales No I didn't ... I added the "gray" part only to make hgroup visible when i tested it, just remove it – Asons Feb 06 '16 at 23:41
  • thanks for your help, but it's confusing. Also you put `background-color: black;` to the `.title-slide` class, making the text _not visible_. – Omar Gonzales Feb 06 '16 at 23:54
  • @OmarGonzales I updated my answer and took all those background colors out. They were mainly there when I made my tests and didn't expect them to cause any issue. – Asons Feb 06 '16 at 23:57
  • your new code positions the text to the right, but on top. I've tried `top: 300` without success. What should I do? I also see that you've used `position:relative` and not `position:absolute`, would you explain why? – Omar Gonzales Feb 08 '16 at 00:51
  • @OmarGonzales You asked to get it to the right, I thought the "top" you used was to make them not crushed on top of each other. Now I updated again, using `position:absolute`, but I did that on the `hgroup` instead. This way the text don't crush, it stay seperated. – Asons Feb 08 '16 at 06:44
  • Yes, thanks so much. But I've made some modifications to make it 100% functional: `/*width: 100%; height: 100%; display: block;*/`. This part was not necesarry, so I've commented it. And It was modifying the height of the entire page. That was It. If you update your answer all give to you all the points. Could you please help me out also with this question: http://stackoverflow.com/questions/35280879/slidify-how-to-call-image-as-background-from-assets-img-folder? – Omar Gonzales Feb 09 '16 at 15:13