XF 2.2 Template modification in PAGE_CONTAINER on the navbar

[asprin]

Hi folks.

I'm attempting to replace the following in the PAGE_CONTAINER template at the specified location:

<a href="{{ link('account/alerts') }}"....
    </div>
    <!-- right here -->
</xf:if>

which would come and sit right beside the alert icon

I realized that it isn't efficient to use "Simple replacement" to do this and I've absolutely very little knowledge on regex. So I'm hoping someone might help me out here to put an icon there next to alert icon (which is basically a fa-gift icon)

Thanks...

 

[DevPunk]

TMS for PAGE_CONTAINER

regex
#(<div.*?data-href="{{ link\('account/alerts-popup'\) }}\".*?)(<\/xf:if>)#is

replace

$1
<a href=""
   class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--gift js-badge--gift"
   title="{{ phrase('conversations')|for_attr }}">
    <i aria-hidden="true"></i>

</a>
$2

extra.less
add

.p-navgroup-link
{
    &.p-navgroup-link--gift i:after
    {
        .m-faContent(@fa-var-gift);
    }
}

 

[asprin]

Gracious! Wish I could understand how it's doing it. Any chance you've a good video tutorial about regex?

 

[Nicolas FR]

This site is pretty good to learn regex:

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.

regex101.com

 

[asprin]

extra.less
add

Just on this, if I add anything to the extra.less file, will it overwrite the contents of other addon's classes (if they also have added something in this file)?

 

[Nicolas FR]

If the CSS code targets the same element, we can assume that it is.

If an add-on's template modification concerning the extra.less file puts its code at the end of the template then I think it is this code that should override your own CSS code. But maybe XF has planned something about this and it's still the code written manually in extra.less that takes precedence?

Anyway, good question, I'm curious about the definitive answer.