Is there a way to change the width page of a html post in blogdown/hugo?

Question

I'm building a post using blogdown with the theme hugo-tranquilpeak-theme. Is there a way which I can change the width of the rendered page ?

I have an example here:

It seems me too narrow. Could I do it larger ?

I wish I could set it as a default behavior for all posts of the blog.

Chairwoman

Answer 1

The width is determined by your theme. I only looked at an example site provided here but in this particular case, the element you need to deal with appears to be main-content-wrap. I came to this conclusion by right clicking on my browser and picking "Inspect Element" (firefox) or "Inspect" (chrome) which gives you information about which elements are present and how are they effected by existing CSS. From here you can see that it has a default max-width of 750px. You need to create a CSS file to overwrite this property. The file only has to contain

.main-content-wrap{
    max-width: [insertYourDesiredWidthHere]px
}

Save this file somewhere under your static directory. Ideally in a folder called css for convention's sake

The way to actually get this file in use is also theme dependent. Typically this is controlled by the customCSS parameter in the config.toml

Looking at the example site at the theme repository I can see commented out lines that are describing how to do this.

So just add

[[params.customCSS]]
 href = "pathToFileUnderStatic"

Halfwitted

do you know where the config.toml starts looking? I think I'm specifying the path wrong. I set it up as you suggested and use href = "static/css/MyWidth.css" but nothing changes – Swallowtailed

See: bookdown.org/yihui/blogdown/css.html#css: "For some themes (i.e., the hugo-anatole theme), you have the option of linking to a custom CSS, which you can use to further customize the visual style of your site." If your theme doesn't have this option you need to place your CSS in a file (ex. /static/css/custom.css) add link in the layout. Add or edit /layout/partials/head_custom.html and write in: <link rel="stylesheet" href="/css/custom.css">. See also: #65329702 – Unwashed

Answer 2

That's what worked for me:

Find the .css that your theme is using (themes/hugo-lithium/static/css/main.css) and edit the .content bellow, changing the max-width property:

.content {
  max-width: 700px;
  margin: 40px auto 10px;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

Source: https://bookdown.org/yihui/blogdown/css.html

Sunroom

I understand it's not recommended to edit directly the files under /themes/ (See bookdown.org/yihui/blogdown/custom-layouts.html#custom-layouts for layouts but also applicable to CSS). – Unwashed