ioslides presentation is black after knitting in RStudio

Question

I am preparing an ioslides presentation in RStudio.

So far, I was converting the ioslides into HTML by using Knitr successfully.

However, although now I convert it into HTML, I see black the ioslides.

Technical details:

• I am running Linux Mint Cinnamon 20.
• RStudio 2022.07.1 Build 554
• knitr version 1.40
• markdown version 1.1

The YAML I am using is:

---
title: "Caminante, no hay camino, se hace camino al andar"
subtitle: "Tras los pasos migratorios de nuestros antepasados"
author: "Mario Modesto-Mata"
date: "23 de septiembre de 2022. FICCS"
output:
  ioslides_presentation:
    css: estilos.css
    logo: Figuras/FICCS.PNG
    smaller: yes
    transition: slower
    widescreen: no
---

This is how I see now the presentation:

It is important to mention that no error seems to be happening when knitting it.

Any idea?

UPDATE

I include here the files:

• FICCS.png

• estilos.css

.gdbar img {
  width: 333px !important;
  height: 89px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 400px !important;
  height: 105px !important;
}

.colortextofondo {
  background-color: #FFFFFF;
  opacity: 0.6;
}

slides > slide:not(.nobackground):before {
  width: 150px;
  height: 40px;
  background-size: 150px 40px;
}

/*Esto es para las propiedades de las imágenes*/
img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  vertical-align: middle;
  horizontal: middle;
}

/******************************************************************/
/*AJUSTES DE LA PORTADA********************************************/
/*slide.title-slide************************************************/
/******************************************************************/

/* Esto es para la imagen de fondo de la PORTADA*/
slides > slide.title-slide{
  background-image:url("Figuras/portada.png");
  background-size: 100% 100%;
}

/*Esto cambia el color del título y portada*/
slides > slide.title-slide hgroup h1 {  
  color: black;
  font-size: 60px;
  letter-spacing: 10;
}

/*Esto cambia el color del subtítulo*/
slides > slide.title-slide hgroup h2 {  
  color: #292929;
  font-size: 30px;
  letter-spacing: 5;
}

/*Esto cambia el color de autor y día en el título*/ 
slides > slide.title-slide p {
  color: #7e3131;
}

/******************************************************************/
/*AJUSTES DE LA PORTADA********************************************/
/*slide.title-slide************************************************/
/******************************************************************/

/*Esto cambia el color de los grandes títulos encabezados # o h2*/
slides > slide.dark > hgroup h2 {
  color: #ff9999;
  background-color: red;
  font-size: 60px;
  letter-spacing: 10;
}

/*Esto cambia el color de los grandes títulos encabezados ## o h3*/
slides > slide.dark > hgroup h3 {
  color: #ff9999;
  font-size: 30px;
  letter-spacing: 10;
}

/*Esto cambia el color de los grandes títulos encabezados ### o h4*/
slides > slide.dark > hgroup h4 {
  color: #500000;
  font-size: 30px;
  letter-spacing: 10;
}



/*Color del texto del cuerpo de las diapositivas*/
body p {
  color: #000000;
}

/*Característica títulos diapositivas finales*/
slides > slide > hgroup h2 {
  color: white;
  background-color: black;
  background: rgba(0,0,0,0.5);
  font-size: 50px;
  letter-spacing: 10;
}

Answer 1

I had the same problem. Update all the packages and, if you still have problems, install again "htmltools" and "xfun" via: install.packages("xfun") and install.packages("htmltools").