Custom Post Header Style
What this is
Every post on the forum has a
header bar at the top. That is the strip with your name, avatar, title, and post info. The theme draws that bar the same way for everyone.
This feature lets
you change that bar on
your posts. It does not add a second header or wrap the post in a new box. It only restyles the bar that is already there.
Think of it as a personal look for the top of your posts: a different background, a motto next to your name, hiding the default avatar and putting your own image there, and so on.
Why you would use it
So your posts are easy to recognize without changing how the rest of the forum works.
People use it to:
- Give their header a background color, gradient, or image
- Add a short line of text (quote, motto, display name)
- Hide parts of the default header they do not want
- Add extra class names if they already have custom styling
Your settings apply to
your posts. Other members keep the normal theme header.
Where to find it
- User Control Panel > Appearance > Post Header Style
The form, field by field
Check
Enable my custom header style or nothing you save will show.
Then use only the fields you need. Empty fields are fine.
Extra CSS class(es)
Extra names added onto the header bar's existing class list.
Use this when you already have CSS that looks for those names, or when staff told you to use a certain class.
Allowed characters: letters, numbers, dash, underscore, and spaces.
Example:
Custom id
Optional. Gives that header bar its own id.
Most people can leave this blank. It must start with a letter. If you only need color or extra content, you do not need an id.
Inner HTML (optional)
A small piece of content placed
inside the existing header bar — not under the post, and not as a new block beside it.
Good uses:
- A motto or tagline
- A small image
- A styled name
Keep it short. This is a header strip, not a second post. Scripts and a number of unsafe tags are removed.
CSS
This is what actually changes the look.
You can write it two ways.
Plain properties (no { or })
These style the header bar itself.
Code:
background: #1a1a1a;
color: #eee;
border-bottom: 2px solid gold;
Full rules (with { and })
These target pieces of your post and stay limited to your post, so you do not restyle other people's headers.
Code:
.userHeader {
background: url('https://example.com/my-banner.png') no-repeat center / contain;
}
.userName, .userAvatar {
display: none;
}
The exact class names (.userHeader, .userName, and so on) depend on your forum's theme. If a rule does nothing, the name in the theme is probably different. Staff can tell you the right names, or you can look at a post with the browser inspector.
There is a maximum length for CSS, classes, id, and HTML. If you paste a huge block and part of it disappears after save, you hit that limit.
How to try it the first time
- Enable the style.
- Put one simple line in CSS, such as
- Save.
- Open a thread and look at one of your posts.
If the header picks up the color, everything is working. Then add classes, HTML, or more CSS.
If nothing changes:
- Confirm Enable is checked and you clicked Save
- Confirm you are looking at your own post, not someone else's
- If it still does nothing, staff may need to point the plugin at the correct header bar for this theme
Good habits- Change one thing at a time so you can see what worked.
- Do not replace the whole header with a giant image or a wall of text.
- Leave Custom id empty unless you have a reason.
- If you hide the default name or avatar, put something readable in Inner HTML so people still know who posted.
That is the whole feature: enable it, style the existing header bar, save, and it follows you on your posts.