PHPBB3-15086 Replace quote.gif with fontawesome icon

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB. Current releases are 3.2/Rhea and 3.3/Proteus.
User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

This one seemed simple to me. Change styles/prosilver/template/bbcode.html and change the lines containing quote_username_open and quote_open to add the font awesome icon syntax and remove the css entry that provides quote.gif.

But I must be missing something, because no matter what changes to this file I make, even after flushing the cache, the changes aren't applied. I'm left to wonder if the template file bbcode.html is still used or is this now being handled in the s9e parser?

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by hanakin »

this is better handled via a base64 svg in the css than using font-awsome. but yes there are issues with the bbcode somewhere https://area51.phpbb.com/phpBB/viewtopi ... 26&t=50486
Donations welcome via Paypal Image

User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

hanakin wrote: Thu Feb 23, 2017 1:52 am this is better handled via a base64 svg in the css than using font-awsome. but yes there are issues with the bbcode somewhere https://area51.phpbb.com/phpBB/viewtopi ... 26&t=50486
Thanks. Still haven't solved why bbcode.html isn't being used, but you've given me the necessary clues about using CSS. There are a couple of other places where FontAwesome icons are specified, so I can see how to make the required changes.

Follow-up question. styles/prosilver/theme/colours.css contains the current use of quote.gif

Code: Select all

/* quote block */
blockquote {
	background-color: #ebeadd;
	background-image: url('./images/quote.gif');
	border-color: #dbdbce;
}

.rtl blockquote {
	background-image: url('./images/quote_rtl.gif');
}
I believe the fix is to remove

Code: Select all

	background-image: url('./images/quote.gif');
and add the font-awesome icon to the cite element in content.css.

Code: Select all

blockquote cite:before {
       content: '\f10d';
       font-family: FontAwesome;
       padding: 5px;
}
I cannot find any guidelines on what to do with the RTL case. Are there coding guidelines for RTL in templates and/or CSS?
Last edited by P_I on Thu Feb 23, 2017 5:36 am, edited 1 time in total.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by hanakin »

its a core issue I believe something with bbcode.php
Donations welcome via Paypal Image

User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

P_I wrote: Thu Feb 23, 2017 5:05 am I cannot find any guidelines on what to do with the RTL case. Are there coding guidelines for RTL in templates and/or CSS?
As I try to come up to speed on contributing to the project, there remain a few mysteries. This is one of them.

I think I've found the code in bidi.css and can follow the example of what's already in the file. I would appreciate help understanding how to make RTL changes, who is responsible for the changes, the developer or localization team, and how to test the changes. Thanks in advance.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by hanakin »

any/everyone is responsible for the changes... best way I have found to test them is in your browser change the class on the body from ltr to rtl, then on the html element change the dir to rtl as well. you will have to manually add the bidi.css file to your header...

Otherwise if you can then install an rtl lang pack and change the lang, but I find this slower personally.

411 the new version of FA includes both quote-left and quote-right icons
Donations welcome via Paypal Image

User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

hanakin wrote: Thu Feb 23, 2017 6:44 pm 411 the new version of FA includes both quote-left and quote-right icons
Thanks. I caught that and used quote-right for RTL as it was already using quote_rtl.gif.

User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

hanakin wrote: Thu Feb 23, 2017 6:44 pm any/everyone is responsible for the changes... best way I have found to test them is in your browser change the class on the body from ltr to rtl, then on the html element change the dir to rtl as well. you will have to manually add the bidi.css file to your header...
Thanks, that's very useful to test RTL.
411 the new version of FA includes both quote-left and quote-right icons
I've uncovered a consistency problem if the FA quote-right is being used for RTL support. The posting buttons only use the quote-left icon. I've tested this on phpbb.com and here using the method described above.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by hanakin »

not really sure if that is an issue. Its an indicator for an action not an actual quote.
Donations welcome via Paypal Image

User avatar
P_I
Community Team
Community Team
Posts: 134
Joined: Fri Oct 31, 2014 4:56 am

Re: PHPBB3-15086 Replace quote.gif with fontawesome icon

Post by P_I »

I sure have learned a lot from this initial effort to contribute to phpBB and the comments/reviews that I've been given on the pull request have been very educational. Thanks to hanakin and vinny for sharing their knowledge, it has been much appreciated.

However, as a newcomer, I've struggled to understand some of the more nuanced comments related to which file should be used for what purpose/content. Other than Rhea coding guidelines document and the comments in specific files, it seems to this newcomer that there are gaps in the documentation that would help guide a newcomer to understand all the conventions. Am I missing something in the basic tool chest that a newcomer to phpBB coding should read and follow?

For example, there are 17 CSS files in styles/prosilver/theme/ and while most of the filenames give clues to their function, making what seems like a simple coding change has now involved four of CSS files, which wasn't immediately obvious from any of the documentation and code that I've read so far. I got some ideas from How to create a Style [Basics] which states
Finding the right class to edit can be really hard. Especially with phpBB, because all classes have multiple subclasses.
When you need a class, you first need to look what it is you want to change. Is it a color from a link or a header text, or something else?
I thought it would be helpful to share this experience in the hope that it might generate further documentation or reference material that would be helpful to newcomers who want to contribute to phpBB.

Post Reply