I’d like the customize the archive page to also include another page I have that is not just a category to be included in the links at the top. Is that possible?
And for that matter, how do I go about customizing an “automatic” page that MB creates (like Photos, for example, if I want to include a bit of custom CSS code for it?)
There’s a template default to all Micro.blogs if you scroll down called layouts/_default/list.archivehtml.html. Copy the content and recreate that file in your custom theme section and edit to your hearts content.
That’s it? Just basically re-create it with my own code? Too easy 
I know this is not exactly what I asked for:
following what you said above, I tried to play around with the photo page (I want to allow the photo grid to be wider than the other regular pages). What I did is to include a wider max width property in a custom photo page (layouts/list.photoshtml.html).
I first tried to add it directly to the grid chunk (at the end of the div class= line, right under {{ define "main" }}
{{ define "main" }}
<div class="photos-grid-container" style="display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 33% 33% 33%; max-width: 100%;">
{{- $list := where .Site.Pages ".Params.photos" "!=" nil -}}
{{- $len := (len $list) -}}
{{ range $index, $value := $list }}
<a href="{{ .Permalink }}">
{{ range first 1 .Params.photos }}
<img src="{{ . }}" width="300" height="300" style="border-radius: 5px; max-width: 100%; height: auto;" class="photos-grid-item" loading="lazy" />
{{ end }}
</a>
{{ end }}
</div>
{{ end }}
This didn’t seem to work, so I tried to just include the same inside <style> tags, first at the very first line (before {{ define "main" }}), then, thinking that define main creates the page maybe I could use it somewhere inside (I did right after {{ define "main" }}). I used article.post-content since that seems to be the most external div for the photo section (not including the title), which takes its default width from <body> (where it’s 40em):
{{ define "main" }}
<style>
article.post-content {
max-width: 70em;
}
</style>
<div class="photos-grid-container" style="display: grid; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 33% 33% 33%; max-width: 100%;">
{{- $list := where .Site.Pages ".Params.photos" "!=" nil -}}
{{- $len := (len $list) -}}
{{ range $index, $value := $list }}
<a href="{{ .Permalink }}">
{{ range first 1 .Params.photos }}
<img src="{{ . }}" width="300" height="300" style="border-radius: 5px; max-width: 100%; height: auto;" class="photos-grid-item" loading="lazy" />
{{ end }}
</a>
{{ end }}
</div>
{{ end }}
There are a few places where this can be implemented and also how, maybe you can help me out? This is on my test blog: https://jtr-test.micro.blog/, where it should affect both the “cats” and the “photos” (indicated by a camera emoji).
I know we talked about this before, but I don’t remember what I did exactly. By the way, (a most important thing to mention at the end, of course) I am now using TinyTheme, so this might be implemented differently.
Width on the linked to page is being set on the body tag, which means nothing is going to get wider on that page unless you remove that from body and put it on elements lower down the DOM stack as appropriate. You probably need to set the width and headers on the header element and then set a different set of width and margins on page-content.
I see. So they style tags should work, but the body’s CSS overwriting this.
I’d think that !important in that statement would fix it then, but it doesn’t. The solution would be to take it down from the body and then write it for each element separately if I understand what you’re saying correctly.
Correct. !important overrides the property coming from somewhere else. In this case, the container the element is in is already smaller, !important can’t override the surrounding container.
Back to the archive page, I figured it out, leaving this here as a note to others and future me perhaps 
First, I found layouts/_default/list.archivehtml.html and made a slight change (<p>is this thing on?</p> sort of thing) and I did not see changes in the archive page. I’m no Hugo expert, but the code also seemed too short and did not match what I saw in front of me for my Archive page, which includes categories at the top.
Then going through the template files, I realized TinyTheme, which I use, has its own archive page which is listed in the TinyTheme section under design. The code there matched what I was seeing in my archive page, obviously… duh. OK, so changes should come there.
But… even better:
Matt figured out people would like to explain their archive page a bit further, and added a microhook for archives (New - Tiny Theme 2.0 with Microhooks) which means that if all I want is to add something before the archive, I can use the hook instead as explained in the documentation. I could even throw in the new blogroll shortcode after that. (this doesn’t seem to work, actually)
Now, if on top of that I want to add certain style just for that page, I can go into TinyTheme’s layouts/_default/list.archivehtml.html and include <style> tags as long as they are after the {{ define "main" }}.
Also, if through the process you somehow manage to delete TinyTheme’s default Archive page (not that it happened to me, no no, not at all) you can get it from github. I’d think Microblog restores the default, and maybe it does, but in this case, we’re not using the default but TinyTheme’s, so it’s either copy-paste from Git Hub or re-install the plugin, I think.
Now the question I have is, how do I create a slightly different archive page, to change one header in it and its title?
So, instead of having “Archive” at the nav bar, I want to have “Archive Plus” as a title, for example.
Now, if I go ahead and copy the Hugo code as is from list.archivehtml.html, the new pages will show the code, literally: that is, I will see the Hugo code laid out in front of me. If I change this page and create a custom page under the theme, I have no way of changing the title since the default Hugo archive page will always be just “Archive”.
I guess this means I need to go into the main template part responsible for calling the pages, find where it calls “Archive,” and change that to “Archive plus.”
I didn’t have this problem with my About page because I went ahead and created a new About page with HTML code included; there’s no Hugo code in it. The archive page, however, is different.