phpBB Topic Prefixes

[How to] Colored topic prefix - phpBB Topic Prefixes

[How to] Colored topic prefix

by Anișor » Sun Jan 01, 2023 9:40 am

Hi yall
We can use a simple jquery code to look for the prefix and add some style to it.
Here is an example of a colored topic prefix on my test board.
Screenshot_5.png
Screenshot_1.png
In overall_footer.html below:
{$SCRIPTS}

Add:

Code: Select all

<script>
$('#wrap-body > div > div:nth-child(3) > div > ul.topiclist.topics > li:nth-child(1) > dl > dt > div > a.topictitle, #subhead-title > h2 > a').each(function() {
    var text = $(this).text();
    $(this).html(text.replace('[Important]', '<strong><span class="accordion">[Important]</span></strong>')); 
});
</script>
In the css file of the style add:

Code: Select all

.accordion {
    background-color: #2daae9;
    padding: 0px 3px 0px 3px;
    border-radius: 4px;
    border: 1px solid #6cf;
    color: #FFF;
    font-weight: 600;
}
User avatar
Anișor
Translator
Posts: 361
Joined: Tue Jan 08, 2013 9:36 pm
Location: Angus, Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿

Re: [How to] Colored topic prefix

by SuperFedya » Wed Oct 25, 2023 5:15 pm

Do we talk about?
/forum/styles/mystyle/template/overall_footer.html

What CCS exactly? There is many of them.

The script above doesn't works for me.
SuperFedya
Registered User
Posts: 253
Joined: Sun Jul 14, 2002 9:14 pm

Re: [How to] Colored topic prefix

by hhbp » Fri Mar 22, 2024 4:01 am

I don't know which one it is css?
Not successful
Can you tell me? Thank you
hhbp
Registered User
Posts: 16
Joined: Tue Apr 27, 2021 1:54 am

Re: [How to] Colored topic prefix

by DJ Thommy » Sat Mar 23, 2024 10:46 am

Warum nicht ordentlich zu Ende gebracht?
DJ Thommy
Registered User
Posts: 5
Joined: Tue Jan 23, 2024 11:00 pm

Re: [How to] Colored topic prefix

by KleineHexe » Mon Aug 12, 2024 1:32 pm

Sorry

it dosen`t work. Can you help me please?
KleineHexe
Registered User
Posts: 7
Joined: Sat Apr 17, 2021 3:46 pm

Re: [How to] Colored topic prefix

by Paquele » Wed Jan 08, 2025 11:07 pm

Hi,
after trying the workaround above and it didn't work for me, I found the solution on the French PHPBB forum.


In overall_footer.html below:
{$SCRIPTS}

Code: Select all

<script>
$(".topic-title, .topictitle, .lastsubject").html(function(i, tags){
    return tags.replace(/\[+([^\][]+)] +/g, '<span class="tags-space">$1</span>');
});
</script>
In the css file of the style add:
.tags {
color: #fff;
background: none repeat scroll 0% 0% rgb(240 67 67);
border: 1px solid #a3a3a3;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-size: 90%;
bottom: 1px;
position: relative;
font-variant: small-caps;
margin-right: 2px;
}

That would be with a red background and white text.
You can change the colors.
Paquele
Registered User
Posts: 1
Joined: Wed Jan 08, 2025 10:56 pm