Adjusting the position of the author and date in distill

I know this is a rather easy question, but I have no idea how to achieve this. Screen Shot 2020-12-01 at 1.17.40 PM

I'm using distill to build a blog, and I trying to figure out how to put the published date next to the author, for example like this.

I have searched on the distill website and check the source code on the example above, still get the same result.

Any advice or suggestion would be much appreciated. Thanks!

Andrew

Hi @boringstuff,

Depending on your comfort with HTML and CSS, I think you should be able to achieve this by overriding the CSS style for the d-byline tag, described here.

This CSS is relevant to the HTML here.

I think, changing:

d-byline .byline {
  grid-template-columns: 2fr 2fr;
}

to

d-byline .byline {
  grid-template-columns: 1fr;
}

Should do it. You would need to define this CSS in a file and pass it to your distill Rmd file when rendering.

1 Like

Hi @mattwarkentin,

Thanks for answering, so I tried setting up a CSS file using create_theme(), and create adjusted

d-byline .byline {
  grid-template-columns: 1fr;
}

and pass it to _site.yml as theme: theme.css, and still not working.

For sure I did something wrong since I have no knowledge of CSS or HTML. I'm not even entirely sure how to do what you suggested...

I'm using the basic template from the distill package, I am able to apply different themes, the following is the section where I can play around with the size of the author and date in my welcome page, I'm guessing this is the section where I can adjust their position?

d-byline {
  --heading-size:    0.6rem;
  --heading-color:   rgba(0, 0, 0, 0.5);
  --body-size:       0.8rem;
  --body-color:      rgba(0, 0, 0, 0.8);
}

Thanks again.

I may have misunderstood your question slightly. What format are you ultimately trying to achieve?

Hi @mattwarkentin. I tried this by adding the new syntax below the "Additional custom styles" section in the css file I generated with create_theme() (this css file works fine for other theme changes).

The following did not seem to work for me:

d-byline .byline {
  grid-template-columns: 1fr;
}

Could you clarify what output format you are trying to achieve? My advice may not have been in line with what you are looking for.

Hi @mattwarkentin, sorry for the late reply was caught up with work.
So I created my blog by selecting the new project and then Distill Blog in Rstudio, it will produce a basic framework of what the blog would look like.

From the basic frame, the welcome post in the blog looks like this.

Instead of arranging author, published, and affiliation in 2 rows, what I'm trying to achieve is to get my author, published, and affiliation aligned in one line, like the following image.

Thanks again,

Andrew

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.