Mtt
Mtt

Bayou Theme has been updated to version 1.2. Included in this version is the option to define how many microposts and longform posts are shown on the homepage, change the categories for microposts and longform posts, set the site language (en, de, es, fi, fr, it, pt, ru), and change the date format.

|
Embed
Progress spinner
Mtt
Mtt

@Mtt I'm open to adding support for additional languages upon request.

|
Embed
Progress spinner
marcos
marcos

@Mtt Thank you! Obrigado!

|
Embed
Progress spinner
iChris
iChris

@Mtt Ah sweet! The ability to choose how many of each style of post appeared was holding me back from giving it a try. Nice update!

|
Embed
Progress spinner
Mtt
Mtt

@iChris More coming soon too!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Oh! Fantastic :) I already set the code mod version for post count, but I'm all in for more :) Thanks!

|
Embed
Progress spinner
robertbreen
robertbreen

@tylerknowsnothing Your website looks amazing! Great work!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt I tried to update the date format, but whatever I tried wasn't working. Such as (string -> result):

Monday, January 2, 2006 -> Monday, January 2, 2025

It worked when I made it the following:

Mon Jan 2 2006 -> Tue Feb 18 2025

I couldn't find anything in the docs that made sense about illegal characters, but commas seem to break it. Also, if I change the post count settings after having added the custom code, do I need to remove it first or will it override? Thanks!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@robertbreen Thanks, Robert! It's all due to @Mtt's work, though :)

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing I would suggest removing the custom code if the only thing you changed was the post count. That keeps it more compatible with this and any future updates. There's a good chance that fixes the comma issue for you too. With a clean install, I am able to get it to work with commas. That means it's something in your customizations causing the conflict. My guess is it's that specific code block.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Will do. Thanks!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt I deleted the partial template that had the custom code to define the micro post count, let it refresh, confirmed that it was back to default, changed the settings, and it's not picking it up. I also went into Logs and rebuilt the site and no change. I've checked the Github code to make sure it wasn't a required template and it's not. Thoughts?

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing Is everything else in the settings working as expected?

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt The only other thing I changed was the date format and I haven't tried changing that yet after you suggested it could be a conflict in formatting with the code to defne the micropost count (included below):

{{ range first 5 (where .Site.RegularPages.ByDate.Reverse "Params.categories" "intersect" (slice "Microposts")) }} <div class="post-preview h-entry micropost"> <div class="e-content"> {{ .Content }} <span class="post-date-wrapper"> <time class="dt-published" datetime="{{ .Date.Format "2006-01-02 15:04:05 -0700" }}"> <a href="{{ .Permalink }}">{{ partial "dateformat/short" . }}</a> | <a href="{{ "categories/microposts/" | relURL }}">{{ T "View all" }} →</a> </time> </span> </div> </div> {{ end }}

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Awww. It looked fantastic in the editor! :(

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing 2 Possibilities I can think of off the top of my head. I am currently on mobile, so I can’t really dive in to have a deep look.

  1. You have a custom config.json that has conflicts with the new settings.
  2. There is a conflict with a custom theme.

In both cases, you could do a quick check by removing the custom theme and seeing if things work when that happens. If it does work, it’s something in the custom theme.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt I switched to None and it's working. I'll create a new one and rebuilt my sidebar (which is just copy > paste LOLZ) and it should work just peachy :) I'll update again after that to let you know.

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing Good deal. Let me know if you need any help working out anything as you add stuff back.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Nope :) Thanks, though. All good. All I needed to do was make the new custom theme, create the sidebar partials file, and paste in my code. Now it's back to looking like it did before and has the correct number of posts showing. Excellent [rubs hands together]...

Any notes you could offer on putting a header on the Microposts and changing Fresh Off the Press would be nice, but when you get home or tomorrow or what have you :) No rush :D

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing I can get you that tomorrow, no problem.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt 🍻💯

|
Embed
Progress spinner
davidmarsden
davidmarsden

@tylerknowsnothing I changed my "Fresh Off The Press" but for the life of me I can't remember how!

EDITED: It looks like it should be in layouts/index.html but that still says "Fresh Off The Press" and not "Recent explorations" as it says on my site. 🤔

It's in i18n/en.json as @Mtt explained below.

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing @davidmarsden There are multiple ways to do this, but this is probably the best. Open your custom them then create a template called i18n/en.json (can do with other languages as well). Add this as the content:

{
    "Archive": "Archive",
    "Categories": "Categories",
    "Full post list": "Full Post List",
    "Recent replies": "Recent Replies",
    "Replying to": "Replying to",
    "Replying to post by": "Replying to post by",
    "Read more": "Read More",
    "Fresh off the press": "Fresh Off the Press",
    "View all": "View All",
    "Archive text": "You are viewing all posts from this category, beginning with the most recent.",
    "Quick update": "Quick Update",
    "Older": "Older",
    "Newer": "Newer",
    "Powered by": "Powered by",
    "Designed by": "Designed by"
}

Do not delete anything, but you can modify the content on the right to say whatever you'd like.

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing As for "header on the Microposts," do you mean just having something like "fresh off the press" is for Longform?

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Ha! I hadn't thought to look in the language strings files! LOLZ. Really starting to love these custom themes. Even a no-code schlub like me can do stuff :D

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@davidmarsden I had tried that before, as well, and mildly borked it. LOLZ Thanks!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Yes. Just like that :)

|
Embed
Progress spinner
robertbreen
robertbreen

@tylerknowsnothing Yes! @Mtt has been doing some amazing work! 👏

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing This one is a little more advances and goes back to modifying theme files. Within your custom theme, create a new template called layouts/partials/microhook-category-microposts.html. Within that template, paste in the following:

Code snippet for adding a header about microposts in Bayou Theme Copy Code Here

If you don't modify anything else in that code (other than the header line), it should still work with your existing settings. This isn't a mod I've done for anyone yet, so let me know if any issues pop up and I'll work through them. If anything major happens, you can just delete that template file and it'll revert immediately.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Gotcha. Will report back soon. Our running an errand, but will do it soon. Thanks!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Performs as expected. I created the template, saved it blank, let it update, pasted in the code, changed the text where specified, saved it, let it update, then checked it and it showed up :) Looks great! I'm pleased by simple things.

LOLZ

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing Awesome!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Oh, and I checked the logs and zero errors of any kind. Looks super clean :) Thanks so much!!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Was adding some additional tweaks to the site and I think I found a small issue. I was first trying to add a shortcode to keep the current year updated in the footer, but that didn't work. It kept throwing errors, so I moved onto adding a Written by a Human badge to the intro, but it seems to be taking the dimensions as an aspect ratio. I added px to the dimensions, but when I look in the DOM inspector, what I see is in the image attached. Thoughts? Thanks!

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing This is a tricky issue to design a theme for. Basically, I have to choose the most common scenario for images and style for that particular scenario. For that, the theme will take all images and scale them to the width of their container.

The fix is on a per image basis where you can do something like this within the img tag, independent of the height and width parameters you’ve already set:

style="max-width: 100px; height: auto;"

Let me know if that helps!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt That did it. Thanks! At first it was throwing an error, but I'd left an extra quote mark LOLZ.

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing Been there!

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt One last question (for now :)... How do I add a blockquote block around the Intro section? I tried adding a div and calling the selector, but it doesn't do anything.

&lt;div class="blockquote"&gt;<img align="left" padding=0 10px 0 0 src="https://tylerknowsnothing.com/uploads/2025/writtenbyahuman-07.png" style="max-width: 140px; height: auto;" alt="A smiling face emoji is next to the text written by a human on a blue background."> &lt;strong&gt;Tyler Knows Nothing, aka TKN, is, and always will be, written by me... Tyler K. Nothing, a human.&lt;/strong&gt;&lt;/div&gt;
|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@tylerknowsnothing Grr. It's in a code block!? Why does it bork the code? Sorry about that. Also, I'm going to be removing the padding options since they don't seem to work.

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing Unless I'm misunderstanding what you're asking, you should be able to use &lt;blockquote&gt;&lt;/blockquote&gt;.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Here's a screenshot. I was using div tags. Sorry for the confusion. Funny thing is that code appears correctly in the new Microsocial app :)

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing You shouldn't need the div and can just use a straight blockquote tag. However, I can add support for that in the next update. Out of curiosity, is there a specific reason you're using divs for this? Just want to make sure I cover the correct use case.

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt No particular reason other than I thought I needed to use the div to apply the style. I'm not great with all this stuff :D So, any HTML tag will fallback to the CSS style defined in the stylesheet without needing to be called in a class? See! It seems like I know this stuff, but it's just the threat I pose that comes from too much exposure and not enough basic skill LOLZ :D

|
Embed
Progress spinner
Mtt
Mtt

@tylerknowsnothing It is confusing, I know. Basically, the theme will support all common html tags such as h1 - h6, lists, blockquotes, paragraphs, pre/code, bold, italics, and links.

If you use the correct tag, it will always default to the themes prescribed styling. However, you can override that default styling by using your own css (either inline or in custom css). Anything YOU add via CSS will override what's in the theme. You can do that globally (such as changing all links everywhere) or target a specific item (only change this link).

|
Embed
Progress spinner
tylerknowsnothing
tylerknowsnothing

@Mtt Ah! Had I ever done anything other than go to the "School of Learning HTML & CSS By Force Whilst Trying To Make Wordpress Act As Desired" I likely would have learned this :D 'Tis the result of being a professional writer working on dozens of computer books for two decades 👀

|
Embed
Progress spinner
In reply to
robertbreen
robertbreen

@Mtt I took the plunge to create a dark mode in Bayou. Everything worked great except for the little text box at the end of posts for readers to sign in to Microblog/Bluesky/Mastodon to add a comment. Is there CSS to conform this text box to dark mode?

|
Embed
Progress spinner
Mtt
Mtt

@robertbreen By default, the background color of that element is the variable --secondary and the border is --tertiary. If you need specific colors other than those for that element, you'd targe form.microblog_reply_form and apply a background, text, and border color independently of the variables.

|
Embed
Progress spinner
robertbreen
robertbreen

@Mtt That worked! Thank you!

|
Embed
Progress spinner
marcos
marcos

@Mtt Hi Matt; I do not know how many Portuguese-speaking users have adopted Bayou and I wonder if they all would agree with my suggestion, but the translation of "Fresh of the Press" to "Recém Saído" in Portuguese is not a good one - my suggestion for it is "Recém Publicado" (Recently Published). Thank you.

|
Embed
Progress spinner
Mtt
Mtt

@Marcos Thanks! If you're familiar with Github, you can contribute that change to the project here. If you're not a Github user, let me know and I'll make the change myself. Just wanted to give you the opportunity for credit on the repo.

|
Embed
Progress spinner