Page 1 of 1

Woud love some help! Customizing phpBB: Colored Usernames, Font Styles, and Rounded Corners

Posted: 13 Oct 2024, 06:26
by Reziem
Hey everyone,

I’m really like how some elements of this forum are set up, and I’d love to incorporate similar features into the phpBB forum we use at my job. We’ve been using phpBB as a makeshift support/ticket system, and it’s been working great for us.

I’m curious about and would appreciate any tips on how to implement the following:
  • Colored Usernames: I really like how usernames are color-coded here. I assume it’s tied to group permissions or roles, but I’m not entirely sure. This would be sweet to have on our support forum to distinguish different departments.
  • Color red for unread posts: I love this and makes it easy to see what needs attention.
  • Shadow and Bold Font in Titles: The forum titles here have a nice shadow and boldness that make them stand out and easier to read. I’d love to replicate that effect.
  • Rounded Corners in Theme: I was told this theme is based on se_square_left. It looks fantastic, but how do I achieve the same rounded corners for my forum’s theme?
Also, how can I donate to gain access to the donor section? 😎

Thank you for all the help!

Re: Woud love some help! Customizing phpBB: Colored Usernames, Font Styles, and Rounded Corners

Posted: 16 Oct 2024, 04:38
by dremuler
All can be performed by css

for example on phpbb 3.3

this code will add neon effect and color in an user name regardless the group or permission.

Code: Select all

.username-coloured ,a.u2{
color: #902dff !important;
text-shadow: 0px 0px 5px #ac98ff4f!important;
}
where: .u2 is the id of the user that can be founded on the url of his profile

you can try do the same for new topics, but im not sure, the only thing that i already tested is the code shared above.

rounded corners its related with the forum tables and border-radius css property.

on phpbb3
this code for example round some borders on prosilver theme

Code: Select all

.forabg, .forumbg {
    border-radius: 10px 10px 10px 10px;
}
of course wont do all the job you need open the developer mode on the browser and check which areas to apply and test it.
where each 10 value, control a single corner.

resereach a little bit about this css property.

ihope my comment help you out