Title size on Quiet Habits Theme

Hi. I just tried the Quiet Habits theme. The date is showing up too large, not like in the theme example. Could you let me know why this might be? Here is the link: https://write.as/thewritedirt/. – Thank you.

Hi @writedirt! This is happening because you have no title for this post. For the “blog” display format, if a post has no title it will show the date instead. For Write.as to recognize a title, it has to be at the top of the post like so:

# Title

Body of a post.

That way, when you look at the post from your blog’s home page, will show the title similarly to the Quiet Habits example. Hope that helps!

Thank you, that did it. : )

One other question. Can I do anything to make a short headline look centered like the data? Right now a short headline ends up off to the left. Here is what it looks like: https://write.as/kissofdirt/

Could you fix the link so we can see what it looks like @writedirt ?

And by short headline, do you subheaders like this?

# Title
## Short Headline

Body of a post

If that’s what you mean, then all it takes is some custom CSS to center those. Just want to clarify that this is what you were referring to though.

cjeller1592, thanks. I just meant a title for the blog. I fixed the link: https://write.as/kissofdirt/.

I tried to figure a way to center it using code you showed in other thread, but it just ended up under the date again. So I’ll see what you think.

Hope this makes sense. Thank you!

Matt, I would love to know if I can control adding bold and/or size of text when using markdown to center text.

This markdown “string” works great for centering:
< div style=“text-align:center;width:100%;”>insert text here < / div >

But it doesn’t allow for making text bold and/or larger. I’ve tried…

Any advice is appreciated.

That’s a combination of an HTML <div> with inline CSS, not markdown. To modify it for bold text and different font size, you could do this, e.g.:

<div style=“text-align:center;width:100%;font-size:30px;font-weight:bold;”>insert text here</div >

Followup Note: the above statement does not center the text. See this followup post that does center the text.

bugbuster, thank you. Your suggestion worked – except not centered. I tried to work with it, but no luck. This is how it looks if you care to take a look: https://write.as/thewritedirt/the-write-dirt

Sorry, I think I got carried away asking this question here – since I also asked in a previous thread – (cjeller1592 gave me the string I asked you about).

I did not realize the code is not markdown. I don’t know the codes, so I’m hacking my way through. Thanks for any other thought.

Aha, yes, I forgot something, try this. Note the margin-left:auto; margin-right:auto; after the text-align:center

<div style="text-align:center; margin-left:auto; margin-right:auto; width:100%; font-size:30px; font-weight:bold;">insert text here</div>

See it displayed in this post

I created a new topic @writedirt and @bugbuster. That way we could focus on the issue in one dedicated topic rather than two!

Is this the result you want here?

For titles, you have to enter it at the top of the post like the above example. Otherwise it will show up uncentered below the title. The CSS for the Quiet Habits theme only centers the title of posts if you have entered in a title like so:

# Title

Body...

So you actually don’t need any code beyond that if this is what you want. Now if you want to include centered headers inside a post beside the title, then the code mentioned by @bugbuster and I will work.

Hope that helps!

Thank you, bugbuster. That works great. But now a new problem crops up. The code shows up in the “menu” at the top (instead of the words in the headline). Do you see what I mean here? https://write.as/thewritedirt/the-write-dirt

Thanks, cjeller1592! : ) That’s really nice of you to combine the posts. Thanks, so much, for smoothing out my confusion. : )

Just to be clear, I am using the # Title format.

Yes, the title does look correct at the link you provided. I see that now.

But, – that same title does not show up centered on the main blog page.: – https://write.as/kissofdirt/.

Does that make sense? Thank you, again.

The catch here is that Write.as is not registering a title for the post. You need to replace the code with the # Title format like we’ve discussed before. Since the CSS for the Quiet Habits Theme centers the title, it will do the work of @bugbuster’s code for you as well as show the words in the headline up top.

The title looks centered from the link you gave. Just make sure to use the # Title format and the headlines should always center for you.

Thanks, cjeller1592. I do understand I need to just use the # Title format. – But it is odd that when I first clicked on the link just now, the title showed up centered. Then, when I clicked again, the title showed up to the left, not centered. And when I enter that same link into the search engine, the title shows up to the left, as well. – https://write.as/kissofdirt/,

But the title is consistently centered when I go to the specific blog page – like here: https://write.as/kissofdirt/f-asdklfjs-dkljfsd-lkfjsd-kflj.

So I’m expecting that the main blog page will always show titles to the left, while each blog viewed separately will always show a title centered. I’m fine with that realizing the format is designed for simplicity. – I do think it’s odd that the title was showing up 2 different ways for me for the main link. Maybe it was a glitch.

I hope my explanation is clear enough. Thank you, for all the help.

It also just clicked in my mind that the Random Notes theme is not designed to center titles. (I was trying Random Notes for one of my blogs.) This is why I’m not a coder. (Eye roll.) Thanks for the help.

You can make the Random Notes theme center titles by adding some CSS code from the Quiet Habits theme.

Go to the CSS and scroll down to find the following:

h2, h2.post-title {
font-family: sans-serif;}

Change it to this:

h2, h2.post-title {
font-family: sans-serif;
text-align:center;
}

Then scroll down to the bottom of the theme and append the following.

#post header {
text-align:center;}

.dt-published {text-align:center;}

#wrapper {max-width:60em}

This should make everything centered.

If you save the changes and look at the blog, you’ll notice that the title is a lot bigger than the date. If you don’t like this and want to change it, go into your CSS and delete the following:

h1 {
font-size: 2.5em;
}

h2 {
font-size: 2em;
}

h3 {
font-size: 1.5em;
}

This will return the font to normal size. The end result will look something like this. Hope that helps!

1 Like

cjeller1592, thank you. I just meant that I hadn’t realized how the themes were set up. But thanks for showing me how I can change it. That’s great. Appreciate it.

1 Like