# Blog Post Styling

**URL:** https://meta.discourse.org/t/blog-post-styling/110841
**Category:** Theme component
**Tags:** official
**Created:** [March 6, 2019, 11:10am UTC](https://meta.discourse.org/t/blog-post-styling/110841 "2019-03-06T11:10:58Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [August 2, 2021, 11:32pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/131 "2021-08-02T23:32:05Z")

</div>

Definitely following. Being able to add a rich visual experience, without losing the ‘to business’ functionality of a Discourse forum will greatly improve our user engagement.

Adding a tag to a post to set it to blog mode seems like a logical and simple way to go.

---

<div class="post-metadata">

### Author: ![ChanTallyagora](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chantallyagora/32/232817_2.png) [@ChanTallyagora](https://meta.discourse.org/u/ChanTallyagora)
#### Post date: [September 1, 2021, 2:54am UTC](https://meta.discourse.org/t/blog-post-styling/110841/132 "2021-09-01T02:54:41Z")

</div>

hi I met some problems, that our blog categaory is not blog-116 but blog/116, so I cannot apply this theme to my forum.  
How should i set this set problem?  
and this my forum link:[https://www.agora.io/cn/community/forum/c/blog/116](https://www.agora.io/cn/community/forum/c/blog/116)

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/c/dc38b6d51b95d6df5b032f30e96e6c9a50e28232.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 1, 2021, 3:22am UTC](https://meta.discourse.org/t/blog-post-styling/110841/133 "2021-09-01T03:22:08Z")

</div>

Have you tried just `blog` yet? That _should_ work.

We have a much better way of defining categories now in theme settings. I’ll get the setting updated at some point. Unfortunately, switching to the new method will disable the component until the setting is re-adjusted. I will make sure to warn everyone here when that change is coming.

---

<div class="post-metadata">

### Author: ![ChanTallyagora](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chantallyagora/32/232817_2.png) [@ChanTallyagora](https://meta.discourse.org/u/ChanTallyagora)
#### Post date: [September 1, 2021, 3:43am UTC](https://meta.discourse.org/t/blog-post-styling/110841/134 "2021-09-01T03:43:06Z")

</div>

Yeah I also tried `blog` but it still doesn’t work, quite strange. And now its blog but still doesn’t show the right one.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 1, 2021, 4:03am UTC](https://meta.discourse.org/t/blog-post-styling/110841/135 "2021-09-01T04:03:53Z")

</div>

That is strange. I just checked my test site and the component is working fine using the slug name. I wonder if it has to do with your subfolder setup. I haven’t ever tested the component in that environment.

Do you see any errors in your browser’s javascript console when you try to visit a topic in the category? You would want to check after setting the blog category theme setting to `blog`. And are you certain you have [added the component to your main theme](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)?

---

<div class="post-metadata">

### Author: ![ChanTallyagora](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chantallyagora/32/232817_2.png) [@ChanTallyagora](https://meta.discourse.org/u/ChanTallyagora)
#### Post date: [September 1, 2021, 4:19am UTC](https://meta.discourse.org/t/blog-post-styling/110841/136 "2021-09-01T04:19:50Z")

</div>

Yeah I’m pretty sure I have added the component to my main theme and settle `blog` already

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/2/923ed0ac5d0d29d1b8763e3721781f39cbb0aa98.png)

---

<div class="post-metadata">

### Author: ![JimPas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimpas/32/148179_2.png) [@JimPas](https://meta.discourse.org/u/JimPas)
#### Post date: [September 1, 2021, 7:38am UTC](https://meta.discourse.org/t/blog-post-styling/110841/137 "2021-09-01T07:38:44Z")

</div>

Does it work correctly if you set the slug to `blog`? When I dropped the `/116` off the URL, it does take me to `blog/116`.

Does it work if you disable this theme component? You have 2 theme components where neither one is working. 🤔

> [@Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602/180):
>
> hi I just set the blog category to use list categories, but it shows in every categories, have I did some wrong set step?

---

<div class="post-metadata">

### Author: ![sofi.pocketful](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sofi.pocketful/32/242196_2.png) [@sofi.pocketful](https://meta.discourse.org/u/sofi.pocketful)
#### Post date: [September 2, 2021, 3:36am UTC](https://meta.discourse.org/t/blog-post-styling/110841/138 "2021-09-02T03:36:14Z")

</div>

Hi Taylor!

Thank you for this lovely component! I love it.

I was just wondering if the tag component has been added yet?

Cheers

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 2, 2021, 3:51am UTC](https://meta.discourse.org/t/blog-post-styling/110841/139 "2021-09-02T03:51:39Z")

</div>

Hey! It has not, but I will bump it up in my priorities. I’ll make sure it gets added in the next couple weeks. I may even have a little time ~~tomorrow~~ next week 🤞

EDIT: I have tags working now on my local computer, but have found a few unrelated things I’d like to address before pushing the changes. Thanks for your patience 🙂

---

<div class="post-metadata">

### Author: ![rishi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rishi/32/233665_2.png) [@rishi](https://meta.discourse.org/u/rishi)
#### Post date: [September 10, 2021, 4:41am UTC](https://meta.discourse.org/t/blog-post-styling/110841/141 "2021-09-10T04:41:02Z")

</div>

You likely already found out a long ago, but it is extremely likely this one: [Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602)

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [September 11, 2021, 6:21pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/142 "2021-09-11T18:21:47Z")

</div>

> [@ohellno](#):
>
> I was just wondering if it would be at all possible to change this somehow to use a specific tag instead of a particular category?

Looking for the same here. We [post from our blog in all categories](https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963) and we can’t allow a category in order to display posts with blog style.

_That theme-component looks very solid and I hope that TAG feature could be finished soon 🕶_

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 15, 2021, 1:25am UTC](https://meta.discourse.org/t/blog-post-styling/110841/144 "2021-09-15T01:25:07Z")

</div>

# Update!

I just pushed a commit that adds Tag support and improves a few styling related things 🎉 Please let me know if you notice any issues after updating the component.

Small note - tags you use for blog posts must be visible to all users (not hidden through tag groups). You can alway hide the tag with CSS if absolutely necessary.

cc @Drew-ART @sofi.pocketful @satonotdead

[https://github.com/tshenry/discourse-blog-post-styling/commit/06298dee7859a4f2a2f60699ca74faae6eea0f01](https://github.com/tshenry/discourse-blog-post-styling/commit/06298dee7859a4f2a2f60699ca74faae6eea0f01)

---

<div class="post-metadata">

### Author: ![rishi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rishi/32/233665_2.png) [@rishi](https://meta.discourse.org/u/rishi)
#### Post date: [September 15, 2021, 6:38pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/145 "2021-09-15T18:38:12Z")

</div>

Nice!

On updating on the hosted instance with the default theme the following errors are popping up:

```bash
Error: Undefined variable: "$blog-tag". on line 80 of mobile.scss >> $values: $blog_tag; -----------^
Error: Undefined variable: "$blog-tag". on line 77 of desktop.scss >> $values: $blog_tag; ---------^

```

Doesn’t seem to have broken previous functionality though

Edit add: This went away after I added a tag, now the blog post styling is working but the image is not appearing, I earlier thought this was an issue with private tag groups, but doesn’t seem to be the case.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [September 15, 2021, 8:07pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/146 "2021-09-15T20:07:40Z")

</div>

> [@rishi](#):
>
> On updating on the hosted instance with the default theme the following errors are popping up:

This is an odd bug in core we’ve been meaning to look into. For some reason there seems to an issue where it’s expecting a `-` instead of an `_` in the variable name. The workaround at the moment is to make an adjustment to the theme settings as you figured out.

> [@rishi](#):
>
> the blog post styling is working but the image is not appearing, I earlier thought this was an issue with private tag groups, but doesn’t seem to be the case.

Thanks for reporting this! There was a flaw in the logic that was preventing the tags from being fully evaluated. It should be fixed if you update again.

---

<div class="post-metadata">

### Author: ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [September 23, 2021, 12:36pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/147 "2021-09-23T12:36:28Z")

</div>

Wow, that’s a very cool toy i’m going to spend today playing with. Thank you for your great work 🙂

---

<div class="post-metadata">

### Author: ![rishi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rishi/32/233665_2.png) [@rishi](https://meta.discourse.org/u/rishi)
#### Post date: [October 7, 2021, 2:16pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/148 "2021-10-07T14:16:06Z")

</div>

I spotted a bug where, if I use either the category or tag based system,  
If within a `<div align="center"></div>` tag there are uploaded images (not hotlinks, hotlinks work) then they are rendered in the preview but not after posting, sometimes they appear for a couple of seconds after posting but disappear soon after

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [October 7, 2021, 8:04pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/149 "2021-10-07T20:04:57Z")

</div>

That’s an interesting edge case! It should be fixed with:

[https://github.com/tshenry/discourse-blog-post-styling/commit/517a09eac6a5d1b401349f9712c405795bca0a93](https://github.com/tshenry/discourse-blog-post-styling/commit/517a09eac6a5d1b401349f9712c405795bca0a93)

Let me know if you happen to notice any issues after updating.

---

<div class="post-metadata">

### Author: ![rishi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rishi/32/233665_2.png) [@rishi](https://meta.discourse.org/u/rishi)
#### Post date: [October 8, 2021, 2:56am UTC](https://meta.discourse.org/t/blog-post-styling/110841/150 "2021-10-08T02:56:17Z")

</div>

Works, thanks a ton! Wishing you a great time!

---

<div class="post-metadata">

### Author: ![tmn](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tmn/32/267788_2.png) [@tmn](https://meta.discourse.org/u/tmn)
#### Post date: [August 4, 2022, 2:55pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/152 "2022-08-04T14:55:01Z")

</div>

When I enable at “no image”… I lost 1 image in my post.

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/6/8/2688422fc4fbef534429871ffdad9e6dff3bbec4.png)

---

<div class="post-metadata">

### Author: ![oshyan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oshyan/32/212644_2.png) [@oshyan](https://meta.discourse.org/u/oshyan)
#### Post date: [August 28, 2022, 6:46pm UTC](https://meta.discourse.org/t/blog-post-styling/110841/153 "2022-08-28T18:46:45Z")

</div>

It looks like this Theme Component isn’t being updated much these days, and the to-do list seems to perhaps include my problem (DiscoToC), but I thought I’d mention it anyway in the hopes it will inspire some updates here. 😁

It appears that Blog Post Styling and DiscoTOC are fundamentally incompatible, at least with the site width I have. The ToC overlaps the text and I haven’t found a clear way to address this with CSS alone (though I am far from a CSS expert!).

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/7/b/77b8c34afd521c63985be820c26354c7ace74562.jpeg)

I tried using the Default theme and removing my CSS customizations and it still happens. But as soon as I disable Blog Post Styling, it is resolved and the ToC appears in the right place. I would really love to be able to use both together though.

I have disabled DiscoToC for now, but you can see my site (with customized theme) here if that is helpful:  
[https://garden.oshyan.com/](https://garden.oshyan.com/)  
If it is helpful for me to re-enable DiscoToC so you can see this happening live, let me know.

[Previous page](https://meta.discourse.org/t/blog-post-styling/110841.md?page=2)

[Next page](https://meta.discourse.org/t/blog-post-styling/110841.md?page=4)
