Add a CSS class only to the first quote

For support and discussion related to templates and themes in phpBB 3.3.
edu81
Registered User
Posts: 37
Joined: Sun Jun 21, 2009 6:18 pm
Location: Spain

Add a CSS class only to the first quote

Post by edu81 »

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

any idea? , thank you!

Group 1 (1).png
You do not have the required permissions to view the files attached to this post.
Last edited by danieltj on Mon Nov 11, 2024 11:26 pm, edited 1 time in total.
Reason: Moved to style support section.
User avatar
danieltj
Infrastructure Team Member
Infrastructure Team Member
Posts: 618
Joined: Thu May 03, 2018 9:32 pm
Location: United Kingdom
Name: Daniel James

Re: Add a CSS class only to the first quote

Post by 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.
Last edited by danieltj on Mon Nov 11, 2024 11:33 pm, edited 1 time in total.
edu81
Registered User
Posts: 37
Joined: Sun Jun 21, 2009 6:18 pm
Location: Spain

Re: Add a CSS class only to the first quote

Post by 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!
You do not have the required permissions to view the files attached to this post.
User avatar
Talk19Zehn
Registered User
Posts: 912
Joined: Tue Aug 09, 2011 1:10 pm

Re: Add a CSS class only to the first quote

Post by 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:
Topic by Marc, Thu Aug 29, 2024 on phpBB.com wrote: ...(...)... 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
User avatar
danieltj
Infrastructure Team Member
Infrastructure Team Member
Posts: 618
Joined: Thu May 03, 2018 9:32 pm
Location: United Kingdom
Name: Daniel James

Re: Add a CSS class only to the first quote

Post by danieltj »

edu81 wrote: Tue Nov 12, 2024 10:37 am 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
Registered User
Posts: 37
Joined: Sun Jun 21, 2009 6:18 pm
Location: Spain

Re: Add a CSS class only to the first quote

Post by edu81 »

Thanks danieltj, I will try with javascript, and thanks also Talk19Zehn for your reply.
User avatar
Gumboots
Registered User
Posts: 801
Joined: Fri Oct 11, 2019 1:59 am

Re: Add a CSS class only to the first quote

Post by 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;
}
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦

Return to “[3.3.x] Styles Support & Discussion”