Legend icons phpbb 3.3.11

[MortallCsAl3x]

Hello, I would like if someone could help me to add some icons to the legend on phpbb 3.3.11.
I leave you a picture below so you can understand what it is about. Please, I've been looking for an answer for a long time and I haven't found it yet.

[HiFiKabin]

Mis read the question, answer deleted

[MortallCsAl3x]

Bro i know this!! I need how to put the icon!

[danieltj]

I don’t think I’ve seen any extensions that do this to add an icon next to a group name. You might need to make an extension request.

[Madalin10]

If you only want to add icons to the legend (but not the usernames aswell), you can do this via css easily by targeting the <a> element and using :before or :after.

This is just an example, you can even use font awesome / google material icons etc..
-> https://jsfiddle.net/hteoya23/

[MortallCsAl3x]

If you only want to add icons to the legend (but not the usernames aswell), you can do this via css easily by targeting the <a> element and using :before or :after.

This is just an example, you can even use font awesome / google material icons etc..
-> https://jsfiddle.net/hteoya23/

Do you think you can help me with a tutorial where exactly to add those codes?

[MortallCsAl3x]

@up

[ssl]

Can you check this: https://phpbb-forum.ovh/ssl/viewtopic.php?p=786#p786

[cabot]

Hello,

Do you think you can help me with a tutorial where exactly to add those codes?

At the end of colours.css or in a separate file, so that you can find them easily.

Proposal using FontAwesome icons:

Code: Select all

/* Common properties on the href attributes that link a group page. */
[href^="./memberlist.php?mode=group&g="]::before {
	display: inline-block;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 1.2em;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-right: 3px;
}

/* Group ID 4  */
[href^="./memberlist.php?mode=group&g=4"]::before {
	content: "\f0e3";
}

/* Group ID 5 */
[href^="./memberlist.php?mode=group&g=5"]::before {
	content: "\f013";
}

The first rule déclare common properties on the href attributes that link a group page.

The others relate to each group.
Simply change the group ID in the attribute selector and the icon code.


Some screenshots:

legend.png

breadcrumb_group_page.png

team_page.png

ucp_memberships.png

[ssl]

Much more complete solution than the one proposed above

[Mannix_]

Using group id as a selector is much more reliable since you won't have to adjust anything if you decide to change group color

[MortallCsAl3x]

Hello

It works perfectly, but I want the icon to appear here too when someone posts don't nuai in the caption! look where I mean, I'll leave you a screenshot!

Image:

[cabot]

This is not what you originally asked for and, imho, it will overload the display in the forum list.

The solution I've given you won't work and you'll have to use the colour of the "style" attribute, as Madalin10 suggested, to declare properties on the elements to which you want to add an icon.

And it won't be very intuitive because properties are not declared in the same way for groups or users (spacing/no spacing after colon) and you need to respect the format returned by the HTML.
Otherwise extrapolate and consider that the colour can only be the one declared on the color property, something like that:

Code: Select all

[href^="./memberlist.php?mode=group&g="]::before,
.username-coloured::before {
	display: inline-block;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 1.1em;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-right: 3px;
}

/* Group/User color #00AA00 */
[href^="./memberlist.php?mode=group&g="][style*="#00AA00"]::before,
.forums .username-coloured[style*="#00AA00"]::before {
	content: "\f0e3";
}

/* Group/User color #AA0000 */
[href^="./memberlist.php?mode=group&g="][style*="#AA0000"]::before,
.forums .username-coloured[style*="#AA0000"]::before {
	content: "\f013";
}

It goes without saying that the cleanest solution would be to create an extension that adds classes (group-group-id and user-group-id) in addition to the existing style attribute.