How to tweak blockquote html?

BrotherGlaucon

Hello, I am new here, but I am trying to tweak the appearance of quotes-within-quotes. I am using the Lavender theme in v3. Here are my before/after screenshots, but I don't know how to actually dig into the html to change it. Any help would be much appreciated!

Before:

After:

(P.S. The collapse/uncollapse blockquote handler doesn't seem to be working for Lavender in v3.)

BrotherGlaucon

Well I have a solution. I haven't written code in years and Javascript in a decade so there may be bugs!

A preliminary question: action:composer.loaded offers the containing element, which allows one to find the text area directly. I wasn't able to do such a thing with action:composer.addQuote. I am wondering if there is a way to access the element directly, such as by importing <a module> into the custom Javascript...?

Solution

Basically I am using Javascript to pretty up the quote structure when a post is being written. I simply dump it in the "Custom Javascript" part of the admin. Within the composer, it moves the quote attribution into the quote itself and adds a newline if there are no nested quotes. The code uses a delay to edit the text in the composer 150 ms after action:composer.addQuote fires. The delay is necessary because it is possible to add quotes to an already-existing composer, and there is no addQuote parallel to action:composer.loaded.

Editing the text within the composer allows previews to match what is seen on the site, but unfortunately this means that past posts will not be affected. There is also a function that removes nested quotes > 4-deep, which is only called on action:composer.loaded.

If anyone wants the Javascript file they are welcome to it. I guess we can't upload files here?

phenomlab

@BrotherGlaucon you can adjust the style of block quotes by targeting the CSS you need under

blockquote {
     margin-left: 10px;
}

Note that the CSS above is an example.

BrotherGlaucon

@phenomlab Thanks for the quick reply. I did figure that much out. I actually added those grey borders with the custom CSS/SASS tool in the Admin. Do you think it would be possible to make the before/after changes with styles, and not touch the html? My key goal here is to alter the quote attribution so it resides inside the blockquote element. The "after" image is a result of changing the html by hand in my client. I am new to Node.js, so I probably need to spend some time trying to learn it.

My related question is whether there is a way to do this without forking the project off. Probably not?

phenomlab

@BrotherGlaucon that would be possible, but it would require either a custom plugin or client side js. I wouldn't edit the templates directly.

However, if you don't mind getting your hands dirty with html which you clearly know well, you can use the nodebb-plugin-customize for this purpose as it allows you to change the templates and still have them remain intact when you upgrade.

BrotherGlaucon

@phenomlab Awesome, thank you! I will run off and give that nodebb-plugin-customize a try.

BrotherGlaucon

...after tinkering with this for awhile I think the best solution would be to change the first line of the onTranslated function within the <composer.js> file of nodebb-plugin-composer-default so that a chevron for the markup quotation (>) also gets prepended to the quote attribution before the quote.* But doing this and getting the revised plugin into my app may be difficult...?

I suppose I could also try to use posterior javascript to rearrange the DOM. Unless I am missing something the templates that nodebb-plugin-customize expose didn't seem to provide a solution, because the templates don't deal with the html structure of quotes.

* As in, line #3 gets changed to line #4:

# Markup for post

@admin said in [Welcome to your NodeBB!](/post/93990):
> @admin said in [Welcome to your NodeBB!](/post/93990):

# nodebb-plugin-composer-default/static/lib/composer.js

composer.posts[data.uuid].body = (prevText.length ? prevText + '\n\n' : '') + translated + data.body;
composer.posts[data.uuid].body = (prevText.length ? prevText + '\n\n' : '') + '> ' + translated + data.body;

phenomlab

@BrotherGlaucon Hmm. I'd do this with client side js I think in each topic load. It is possible to move elements around using the same process and if it failed to execute, at least the DOM elements would remain intact.

Even if your change the files in the plugin, they will still be overwritten in subsequent upgrades.

BrotherGlaucon

@phenomlab Okay, thanks for your advice. I will try to go that route.

BrotherGlaucon

Well I have a solution. I haven't written code in years and Javascript in a decade so there may be bugs!

A preliminary question: action:composer.loaded offers the containing element, which allows one to find the text area directly. I wasn't able to do such a thing with action:composer.addQuote. I am wondering if there is a way to access the element directly, such as by importing <a module> into the custom Javascript...?

Solution

Basically I am using Javascript to pretty up the quote structure when a post is being written. I simply dump it in the "Custom Javascript" part of the admin. Within the composer, it moves the quote attribution into the quote itself and adds a newline if there are no nested quotes. The code uses a delay to edit the text in the composer 150 ms after action:composer.addQuote fires. The delay is necessary because it is possible to add quotes to an already-existing composer, and there is no addQuote parallel to action:composer.loaded.

Editing the text within the composer allows previews to match what is seen on the site, but unfortunately this means that past posts will not be affected. There is also a function that removes nested quotes > 4-deep, which is only called on action:composer.loaded.

If anyone wants the Javascript file they are welcome to it. I guess we can't upload files here?