Add a CSS class only to the first quote

[edu81]

Hi, I need to add a CSS class to the first quote in posts.

any idea? , thank you!

Group 1 (1).png

[danieltj]

Add this CSS to the colours.css file in your style and edit to suit your needs.

Code: Select all

.post blockquote:first-child {
	background: red;
}

That should target all block quote elements that are inside the a post block that are the first instance of a quote. I haven't properly tested this though so I'm only like 90% sure this will work...

edit: after some quick testing, this should work fine as long as there's only one set of nested quotes in a post. So for example if you've got multiple blocks of nested quotes it'll only target the first instance of nested quotes.

[edu81]

Yes, your code works, but I need to do it adding a class into the <blockquote> tag.

I tried to edit bbcode.html, but if I add a class on line 15, it's repeats in all blockquotes.

unnamed.png

Thank you!

[Talk19Zehn]

You want more, if I have understood you correctly(!). Unfortunately, your goal is not specified and the exact destination is unfortunately a bit vague in the start topic.

Try perhaps:
https://reyno41.bplaced.net/phpbb/viewt ... le=1&t=141

or write your own first own Quotation-Example: Perhaps a first aid Nesting is untested in this case.

HTML:

Code: Select all

[quote=Topic by Marc, Thu Aug 29, 2024 on phpBB.com]
...(...)... We are pleased to announce the release of phpBB 3.3.13 “Bertie & Ted”. This version is a maintenance release of the 3.3.x branch which introduces a number of improvements aimed at enhancing the user experience and overall stability of the software and resolves some issues noticed in previous releases.
...(...)... 
Quotation source: https://www.phpbb.com/community/viewtopic.php?t=2656048[/quote]

Result:

...(...)... We are pleased to announce the release of phpBB 3.3.13 “Bertie & Ted”. This version is a maintenance release of the 3.3.x branch which introduces a number of improvements aimed at enhancing the user experience and overall stability of the software and resolves some issues noticed in previous releases.
...(...)...
Quotation source: viewtopic.php?t=2656048

I am probably mistaken about your aim ...

Kind regards

[danieltj]

Yes, your code works, but I need to do it adding a class into the <blockquote> tag.

I tried to edit bbcode.html, but if I add a class on line 15, it's repeats in all blockquotes.

unnamed.png

Thank you!

That's because that code is used to render each individual quote for both the top level quote and any subsequent quotes nested inside it as it repeats down the list of nested quotes. You won't be able to add a class to the first quote via code due to how it's structured.

You'll need to use JavaScript (specifically jQuery in this instance) to add the CSS class on page load.

[edu81]

Thanks danieltj, I will try with javascript, and thanks also Talk19Zehn for your reply.

[Gumboots]

This will not target nested quotes at all. It will only target the first quote that is also a direct child of .content.

Code: Select all

.post .content > blockquote:first-of-type {
	background: red;
}