search

seankross / postcards

💌 Create simple, beautiful personal websites and landing pages using only R Markdown.
Other
534 stars 78 forks source link

Questions on how to modify trestles style #54

Open agila5 opened 2 years ago

agila5 commented 2 years ago

Dear authors, first of all, thank you very much for working on this project.

I just started developing my website using distill and postcards, and I have several problems customising my webpage. I use the trestles style. I add here some questions in case you can help me:

  1. Is it possible to adjust the width/height of the image included in the YAML template?
  2. Is it possible to adjust the size of the text that is included on the right part of the page? I successfully changed the font size in the header using .distill-site-header {--text-size: 25px;} in a CSS file, but I'm not sure how to replicate the same behaviour for the main text.
  3. Is it possible to remove the scrolling bar on the right side of the page?

Could you also suggest any guide to learn how to modify the style of the pages using CSS? Thanks.

csqsiew commented 2 years ago

wanted to upvote this as it would be great to be able to modify the CSS and tweak these awesome templates. thanks for your work!

rbcavanaugh commented 2 years ago

I had the same question and solved it by adding a css chunk at the top of the index.html file in your distill website or the separate CSS file as you note. You may have to use the !important modifier.

For example, I wanted the background of the solana template to be white on my website, so I added this chunk after the YAML header.

```{css, echo = FALSE} body { background-color: #ffffff!important; } ```

I was also able to include body text in a \

or \ element, which you can style in-line or separately. Example:

```{css, echo = FALSE} .smaller-text { font-size: 0.8rem; } ```

\

Your body text here \