How to modify "downcute" CSS from rmdformats, to have author as in "readthedown"

user_6090141 0
Viewed 117

My understanding of CSS is less than basic. I have a vague idea of what some elements do, and I manage to customize for example their colour or font size. But I really don't understand how to achieve the following.

I like very much the downcute CSS style from the rmdformats collection (here's an example).

But I prefer the position of author & date in the bottom-left corner, under the TOC, as in the readthedown CSS (here's an example).

I tried to achieve this by adding a custom CSS, copying in it some elements (for example, "#postamble") of readthedown.css that seem to achieve this. But it doesn't work – it's just beyond me.

Is what I'd like to do possible to achieve in a simple way, by adding a custom CSS on top of the downcute css, for example? I'd appreciate any suggestions, mechanical instructions, or explanations of how elements like "#postamble" or ".Content p.authors, .Content p.date" work.

(The HTML page is created from these templates in R with knitr)

rmdformats r-markdown r css html
1 Answers

You asked about this quite a while ago, but I've only found your question today. I've got two options for you. In the first one, it just moves the author over to the bottom of the sidebar. In the second option, you get the contrasting background (along with the author's name moved).

You'll declare the author in the YAML of the downcute RMD, like you would normally. Then add this javascript chunk anywhere in your RMD. If you try to run a JS chunk inline, it won't do anything. You have to knit for it to do its thing. In this example, the author's name is literally downcute.

enter image description here

Option 1

```{r listenOrElse,results="asis",engine="js",echo=F}

setTimeout(function(){
  au = document.querySelector("p.authors");
  ah = au.clientHeight; // get height of author element
  sb = document.querySelector("div.Sidebar");
  sh = sb.clientHeight; // get height of sidebar
  
  anh = sh - ah; // calculate the top position of moved author element

  $(au).appendTo(sb);  // move the author
  $(au).css({top: anh + 'px', left: '5px', position: 'absolute'}); // set placement
}, 400); // in case of delayed build

```

Option 2

```{r OrElse,results="asis",engine="js",echo=F}
// alternative with contrast background
setTimeout(function(){
  au = document.querySelector("p.authors");
  ah = au.clientHeight; // get height of author element
  sb = document.querySelector("div.Sidebar");
  sh = sb.clientHeight; // get height of sidebar
  dnh = sh - (ah*2); // calculate the top position of moved author element
  dv = document.createElement("div");
  $(dv).appendTo(sb);
  $(dv).css({top: dnh + 'px', left: 0, width: '100%',
             height: ah * 2 + 'px',
             position: 'absolute', display: 'block', 
             background: '#7B7B7B'});
  $(au).appendTo(dv);  // move the author
  $(au).css({top: ah * .5 + 'px', left: '5px', position: 'absolute', 
             color: '#F7F7F7', fontWeight: 'bold'}); // set placement
}, 400); // in case of delayed build

```
user_53290730
Related