Best practices for creating custom CSS styles for sections of posts?

Dev
1

Preamble

As I have been setting up and customizing my community’s Discourse instance, I have been looking at ways to harness the incredible power of the platform to increase my own happiness as well as that of my users.

One of the things I would like to do would be to add a custom signature to private messages I send, and “sign” them. I don’t want to use an image; but rather, my name in a Google font.

Getting this working will help me understand how to offer snippets and such to my community for their use while composing posts, so the knowledge is general, even if the question is specific.

My reason for asking the question is that before I spend time creating these blocks for use, I’d like to make sure it’s the best way to go about this. Because if I come up with some clever ideas, I’m thinking of sharing some examples to start a discussion so I can glean even more clever ideas from others smarter than me. :slight_smile:

The Question: How to put text in a post into a block that can be targeted via CSS?

What I found so far

I ran across the following topic:

[ Custom css inside a post / adding custom classes](Custom css inside a post / adding custom classes)

From that topic, I gleaned this answer:

This does appear to work, but I’m curious to know if it is currently considered the best practice/method for this.

While I’m here, a specific question slightly off-topic while being on-topic:

I’m “abusing” a customization to make my signature idea work, only it’s not working, and I’m curious if anyone has any insight offhand.

I am loading custom google fonts using a plugin I know works because my entire forum is successfully using those fonts. I used that to force-load “Playwrite USA Traditional”.

I have the following CSS in my theme:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

My div in my sample post is indeed right-aligned, but it is using Arial or similar, not my theme’s font, nor Playwrite.

Am I missing something stupid in my setup, or is there something else you can think of I’m missing? This is not a Discourse question.

Also, is there a better way to load a Google font for use in my site?

2

I’d recommend looking at Generic bbcode wrapper for theme components

Can’t think of anything based on what you’ve shared here. If you’re able to share a link to the live forum, that’ll make it easier for us to help you find the problem.

1 Like
3

Checking the embed code from Google Fonts, it looks like it should be "Playwrite US Trad"

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
1 Like
4

Ooh, that looks pretty spiff. Thank you for the pointer!

Really all I was hoping for. I didn’t want to waste time, but in case there was anything really obvious. lol.

I… silly Google… ugh. I got caught up on the component’s direction to make sure I got the name correct including caps that I didn’t even think to check the ACTUAL name Google might be using. d’oh.

For the record, loading the correct font name and referencing the correct font name yields the originally expected results.

And now I can “sign” my posts:

712×532 40 KB

Thank you :slight_smile:

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.