Link to quote

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
ssl
Registered User
Posts: 1987
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Link to quote

Post by ssl »

Everything is explained here in Talk19Zehn's message, the modification to be made modifies the arrow icon and add a phpBB language key "Citation"

If you prefer this rendering

Link.png


Download this extension which will allow you to create your own language keys.

In the file bbcode.html copy the modified line given by Talk19Zehn, this one:

Code: Select all

 <a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash"><i class="icon fa-mouse-pointer fa-fw" aria-hidden="true"></i>< xsl:value-of select="$L_QUOTE"/></a>
Instead of $L_QUOTE replace with $L_GOTOPOST, save and empty it hidden.

With the extension to download, open the file ./ext/caforum/language/language/fr/lang.php and add this:

Code: Select all

 'GOTOPOST' => 'Aller au message', 
Enjoy
You do not have the required permissions to view the files attached to this post.
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
Gumboots
Registered User
Posts: 800
Joined: Fri Oct 11, 2019 1:59 am

Re: Link to quote

Post by Gumboots »

Hervé wrote: Mon Aug 05, 2024 8:55 am I don't understand much of the last 2 messages.
It's all code junkies being helpful and assuming everyone knows what they know. :lol:

Ok, let's do it this way.
  1. What do you want it to look like?
    1. Do you want a different icon?
    2. Do you want descriptive text?
    3. Do you want both?
  2. Are you supporting multiple languages in the interface?
  3. Are you concerned about users who require a screen reader?
If 2 and 3 are not an issue for you, and code is confusing to you, I would suggest the simple CSS option (yes, I can explain it simply). It can handle everything else. It also has the advantage that it will be automatically applied to existing quotes.

If 2 and/or 3 are an issue for you, you will need a more comprehensive solution. That involves template editing and (possibly) defining a custom language string. One caveat is that doing it that way will only apply the changes to quotes made after the change. All previously existing quotes will have the old presentation locked into the database. It would be necessary to run a custom database query to apply the change to existing quotes.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

  1. What do you want it to look like?
    I don't know, if it was a question of replacing the current icon with something else, it would already be done;
    the question is "with what" so that it is more visible and more explicit ?
  2. Are you supporting multiple languages in the interface?
    phpBB and the extensions I use are multilingual but my board is french only so I don't need sophisticated language support.
  3. Are you concerned about users who require a screen reader?
    No
In /styles/prosilver/template/bbcode.html I have replaced
<a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash">&#8593;</a>
by
<a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash">⇒ message cité</a>
it does the job but I'm not happy with the result, I'm still looking for something more visible and explicit.
Thanks for trying to help.
User avatar
Gumboots
Registered User
Posts: 800
Joined: Fri Oct 11, 2019 1:59 am

Re: Link to quote

Post by Gumboots »

Ok, Always harder if you don't know what you want. :roll:

You could do this...

Example.jpg

That uses the same text that is used for the same purpose on the search results page (as shown in the bottom part of the composite screenshot) so it's good for interface consistency. You can style it as a button or as a plain link (ie: text and icon only, with no button background and border). It looks fine either way, IMO, and is what I am thinking of implementing on the site I run.

This can be done either by CSS only, or with the text and icon added in the template. You have already added text to your template, so I would suggest doing it that way. If you are happy with this look, or something close to it, I can give you code for it.
You do not have the required permissions to view the files attached to this post.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

Great idea the button 👍
in summary you place date and time, normally located on the right, on the left and the button on the right.
And the same button for "go to message" instead of the text "Aller au message >"
I would like the code, thank you.
User avatar
Gumboots
Registered User
Posts: 800
Joined: Fri Oct 11, 2019 1:59 am

Re: Link to quote

Post by Gumboots »

Ok, this needs a bit of CSS as well as the template edit.
Template first:

Code: Select all

				<xsl:if test="@post_url">
					<xsl:text> </xsl:text>
					<a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash">Aller au message</a>
				</xsl:if>
				<xsl:if test="@msg_url">
					<xsl:text> </xsl:text>
					<a href="{@msg_url}" data-msg-id="{@msg_id}">Aller au message</a>
				</xsl:if>
CSS:

Code: Select all

/*	----------------------	*/
/*	For the quote headers.	*/
/*	----------------------	*/
blockquote cite {
	display: flex;
	margin-bottom: 4px;
	padding-bottom: 4px;
	font-style: normal;
	border-bottom: 1px solid #bbb;
}
blockquote cite::before {
	content: none;
}
cite a:first-of-type {
	margin-inline-end: .25em;
}
cite a + a:link {
	order: 3;
	margin-inline: auto 0;
	padding-inline: .3em;
	background: #ECEDEE;
	text-decoration: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px #1b8ae4;
}
cite a + a::after {
	padding-inline: .25em 0;
	color:  #1363a4;
	content: '\27a4';
}
cite a + a:hover::after,
cite a + a:focus::after {
	color:  inherit;
}
.rtl cite a + a::after {
	padding-inline: 0 .25em;
	transform: scaleX(-1);
}
cite > span {
	margin-inline: .25em;
}
/*	----------------------	*/
/*	For the search results.	*/
/*	----------------------	*/
.searchresults .arrow-right {
	margin-bottom: 4px;
	padding: .3em;
	background: #ECEDEE;
	font-weight: 700;
	border: 1px solid #1b8ae4;
	border-radius: 3px;
}
.searchresults .arrow-right .icon {
	display: none;
}
.searchresults .arrow-right::after {
	padding-inline: .25em 0;
	color: #1363a4;
	content: '\27a4';
}
.searchresults .arrow-right:hover,
.searchresults .arrow-right:focus {
	color: #D31141;
	border-color: currentColor;
}
.searchresults .arrow-right:hover::after,
.searchresults .arrow-right:focus::after {
	color: inherit;
}
.rtl .searchresults .arrow-right::after {
	padding-inline: 0 .25em;
	transform: scaleX(-1);
}
I assume you are using Prosilver, so I matched the look to that. I separated the code for the two buttons so you can tweak them individually if you want to. The CSS can go at the end of any handy CSS file. I recommend using a file from an extension that will not need to be updated often, and is easy to keep track of. Adding a bit of custom code to one of those is easy on the brain (but keep a backup, of course).
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

Sorry, I had some days off 😊
I have my own style based on SE_Square itself based on Prosilver so I guess I should place the CSS in my own CSS that is /styles/LeForumRecifal/theme/LeForumRecifal.css.
Where am I supposed to place the code ?
In /styles/prosilver/template/bbcode.html or in an html file in /styles/LeForumRecifal/template/ ?
User avatar
danieltj
Infrastructure Team Member
Infrastructure Team Member
Posts: 536
Joined: Thu May 03, 2018 9:32 pm
Location: United Kingdom
Name: Daniel James

Re: Link to quote

Post by danieltj »

Hervé wrote: Sat Aug 10, 2024 7:12 am Where am I supposed to place the code ?
In /styles/prosilver/template/bbcode.html or in an html file in /styles/LeForumRecifal/template/ ?
You need to update BBcode.html to change the quote markup. There’s two locations in that file but they’re next to each other. Just look for the arrow Unicode to find both places.
Awesome Payments extension now available!
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

OK, it works fine both for quote and search, thanks a lot.
User avatar
ssl
Registered User
Posts: 1987
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Link to quote

Post by ssl »

danieltj wrote: Sat Aug 10, 2024 7:21 am
Hervé wrote: Sat Aug 10, 2024 7:12 am Where am I supposed to place the code ?
In /styles/prosilver/template/bbcode.html or in an html file in /styles/LeForumRecifal/template/ ?
You need to update BBcode.html to change the quote markup. There’s two locations in that file but they’re next to each other. Just look for the arrow Unicode to find both places.
No Daniel we do not modify the prosilver template files when we use a child style inherited from prosilver. Simply copy the template file bbcode.html into the ./template directory of the child style, and modify it from the child style. This is so as not to redo the modification each time phpBB is updated.
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

I have already some html files in my style template :
mcp_topic.html
navbar_header.html
overall_footer.html
overall_header.html
posting_editor.html
simple_header.html
viewtopic_body.html
so I have also copied bbcode.html from Prosilver Template, it works as well.
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

Is it possible to format the 2 buttons the same way as the "Preview" and "Send" buttons Image ?
I think the CSS is button1 or 2 here under defined in \styles\prosilver\theme\colours.css
but I don't know how to use it in bbcode.html <a href="{@msg_url}" data-msg-id="{@msg_id}">Aller au message</a>

Code: Select all

a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: #000;
	background-color: #EFEFEF; /* Old browsers */ /* FF3.6+ */
	background-image: -webkit-linear-gradient(top, #D2D2D2 0%, #EFEFEF 100%);
	background-image: linear-gradient(to bottom, #D2D2D2 0%,#EFEFEF 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2D2D2', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */
}
a.button1, input.button1 {
	border-color: #666666;
}
input.button3 {
	background-image: none;
}
/* Alternative button */
a.button2, input.button2, input.button3 {
	border-color: #666666;
}
/* <a> button in the style of the form buttons */
a.button1, a.button2 {
	color: #000000;
}
/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	border-color: #D31141;
	color: #D31141;
	background-color: #D2D2D2; /* Old browsers */ /* FF3.6+ */
	background-image: -webkit-linear-gradient(top, #EFEFEF 0%, #D2D2D2 100%);
	background-image: linear-gradient(to bottom, #EFEFEF 0%,#D2D2D2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFEFEF', endColorstr='#D2D2D2',GradientType=0 ); /* IE6-9 */
}
/* Focus states */
input.button1:focus, input.button2:focus, input.button3:focus {
	border-color: #11A3EA;
	color: #0F4987;
}
User avatar
Gumboots
Registered User
Posts: 800
Joined: Fri Oct 11, 2019 1:59 am

Re: Link to quote

Post by Gumboots »

Sure, you can do anything you like with the presentation. I just picked something I thought looked decent with Prosilver, but it's easy to change.

If you want that look, the easiest way to get it would be to ditch some of the custom CSS I gave you and just add the button1 class to the template.

Code: Select all

				<xsl:if test="@post_url">
					<xsl:text> </xsl:text>
					<a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash" class="button1">Aller au message</a>
				</xsl:if>
				<xsl:if test="@msg_url">
					<xsl:text> </xsl:text>
					<a href="{@msg_url}" data-msg-id="{@msg_id}" class="button1">Aller au message</a>
				</xsl:if>

Then for the CSS you would just have this:

Code: Select all

blockquote cite {
	display: flex;
	margin-bottom: 4px;
	padding-bottom: 4px;
	font-style: normal;
	border-bottom: 1px solid #bbb;
}
blockquote cite::before {
	content: none;
}
cite a:first-of-type {
	margin-inline-end: .25em;
}
cite a + a:link {
	order: 3;
	margin-inline: auto 0;
	padding-inline: .3em;
}
cite a + a::after {
	padding-inline: .25em 0;
	content: '\27a4';
}
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
Hervé
Registered User
Posts: 571
Joined: Tue Jun 04, 2019 7:51 am
Location: Belgium
Name: Rudy

Re: Link to quote

Post by Hervé »

Thanks,
as there was no class in your html I didn't know that it was simply to add it.
On the other hand, as "inspect" proves, the "Preview" and "Go to message" buttons now have the same class button1
<a href="./viewtopic.php?p=51058#p51058" data-post-id="51058" onclick="if(document.getElementById(hash.substr(1)))href=hash" class="button1">Aller au message</a>
<input type="submit" tabindex="5" name="preview" value="Aperçu" class="button1" onclick="document.getElementById('postform').action += '#preview';">
but not the same appearance (composite screenshot) :
Image
User avatar
Gumboots
Registered User
Posts: 800
Joined: Fri Oct 11, 2019 1:59 am

Re: Link to quote

Post by Gumboots »

That is because you have left all of the CSS I originally gave you, which was for a different look. If you replace it with the updated CSS I gave you in my previous post, it will match the other phpBB buttons.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦

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