Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Questions on how to modify trestles style #54

Open
agila5 opened this issue Feb 3, 2022 · 2 comments
Open

Questions on how to modify trestles style #54

agila5 opened this issue Feb 3, 2022 · 2 comments

Comments

@agila5
Copy link

agila5 commented Feb 3, 2022

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
Copy link

csqsiew commented Apr 1, 2022

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
Copy link

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 <div> or <span> element, which you can style in-line or separately. Example:

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

<div class="smaller-text">
Your body text here
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants