I have made some changes to the CSS in order to customize the title slide. My goal is to incorporate a background image, adjust the positioning of the title, and modify the font colors for both the title and author/date text.
---
title: "Mechanical Rebar Couplers in<br>Column Plastic Hinge Zones"
author: "Maral Dorri"
date: "February 16, 2021"
output:
ioslides_presentation:
incremental: true
widescreen: true
smaller: true
slide_level: 1
fig_caption: true
self_contained: true
transition: "faster"
---
<style>
body {
text-align: justify}
h2 {
color: #427cb3;
text-decoration: underline}
h3 {
color: #427cb3;
slides > slide {
background: linear-gradient(#ffffff, #ffffff 85%, #ffffff);
background-color: white;
color: #4a4a54}
slides > slide.title-slide hgroup h1 {
font-weight: bold;
font-size: 40pt;
color: white;
text-align: right;
top: 50%}
slides > slide.title-slide {
text-align: left;
color: #4a4a54;
font-weight: bold;
font-size: 16pt;
background-image: url(TFHRC.jpg);
background-size: 100% 100%}
</style>
The formatting changed when I added the background image, causing issues like those shown in the picture:
https://i.sstatic.net/yS6hZ.png
UPDATE:
I managed to fix the color scheme and justification by tweaking the YAML settings. However, I still face difficulties with properly aligning the title on the slide. The top: 50%; property seems to have no effect!
---
title: "<right>Mechanical Rebar Couplers in<br>Column Plastic Hinge Zones</right>"
author: "Maral Dorri"
date: "February 16, 2021"
output:
ioslides_presentation:
incremental: true
widescreen: true
smaller: true
slide_level: 1
fig_caption: true
self_contained: true
transition: "faster"
---
<style>
slides > slide {
background: linear-gradient(#ffffff, #ffffff 85%, #ffffff);
background-color: white;
color: #000000;
text-align: justify;
font-size: 20pt;}
slides > slide hgroup h2 {
color: #427cb3;
font-weight: bold}
slides > slide.title-slide {
background-image: url('TFHRC.jpg');
background-size: 100% 100%}
slides > slide.title-slide hgroup h1 {
font-weight: bold;
font-size: 35pt;
color: black;
text-align: right;}
slides > slide.title-slide p {
color: black;
font-weight: bold;}
</style>