Dismiss Notice
Alien Soup is a free community for fans of science-fiction, horror, & fantasy! Everybody is welcome here.

XenForo Modify First Post in Thread via CSS 1.0.3

Easily modify the CSS of just the first post in specified forums.

  1. Kevin
    Visible Branding:
    No
    This allows you to easily change the CSS of the first post in a thread for specific forums.

    The origin of this was a request from a XenForo user on another site about how to remove the user avatar & information from the first post of the thread in a specific forum. This led to a conversation about the best ways of doing it. The easiest way, really, would be to manually modify the 'message' template to add a few conditionals to it but then you still need to add in some CSS to change the left margin of the messageInfo content. This led to another conversation about whether it could be done via an add-on. The answer is, yes, it can be done via an add-on to easily allow any user to apply CSS to the first post of a thread in a specified forum. :D

    After installing the add-on XML you will find a new option in the ACP. In the text box you can add a list of the forum IDs that should be modified. You can enter either a single ID or a list of IDs with a comma between them.

    CinVin - Modify First Post in Thread via CSS - ACP.JPG

    After that modify the template "cinvin_modifyfirstpost.css" with the CSS that you want to apply to the specified forums. Add ".cinvinFirstPost" as the class identifier to make your changes.

    In the example started it all, of removing the user info entirely from the first post, the CSS that is included by default is to hide the messageUserInfo area and change the left margin of the messageInfo content.
    Code (Text):
    .cinvinFirstPost .messageUserInfo {
        display: none !important;
    }

    .cinvinFirstPost .messageInfo {
        margin-left: 0px !important;
    }
    This will result in your threads in the forum to not display any user information in the first post.

    CinVin - Modify First Post in Thread via CSS - Example.JPG

    And there you have it. In the end it turned out to be pretty simple but getting there took some trial & error and bouncing ideas of of people.

    If you can think of anything you might like added, let me know, and the next time I am working on mental exercise I'll check it out.