Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

CSS Styling Roles for Discussions

I am trying to make it so that when my admins post their posts are highlighted a different color than others. I am trying to do this using css. I successfully did it before except it highlighted everyone's comment. Not just the admins. How can I do this?

I found this article and am using the plugin role titles:

http://blog.vanillaforums.com/help/how-to/differentiate-members-using-roles-ranks/

Because I am using the free vanilla software, I can't edit CSS without a plugin so the plugin I am using is, "CSS Editor"

And this is the css code that I used that didn't work. This is what the article says to use:

li.ItemComment.Role_Administrator {
background-color: #F5F8E8;
}

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2015

    @orangesmasher221

    This might give you a start:

    http://vanillaforums.org/addon/roletitle-plugin

    It is not true that you cannot edit css in the open source version; not only can you, it is positively encouraged! You just need to create a custom theme, which is very straightforward:

    Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
    Open the "about.php" file and edit the information to reflect your theme's information.
    Create an empty custom.css file in the "design" folder of your custom theme.
    Edit the custom.css file to your heart's content.
    Go to your Dashboard > Themes, and apply your new theme.

    Your custom.css file would hold any css changes you want to make.

  • @whu606 said:
    orangesmasher221

    This might give you a start:

    http://vanillaforums.org/addon/roletitle-plugin

    It is not true that you cannot edit css in the open source version; not only can you, it is positively encouraged! You just need to create a custom theme, which is very straightforward:

    Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
    Open the "about.php" file and edit the information to reflect your theme's information.
    Create an empty custom.css file in the "design" folder of your custom theme.
    Edit the custom.css file to your heart's content.
    Go to your Dashboard > Themes, and apply your new theme.

    Your custom.css file would hold any css changes you want to make.

    So I can't just use the plugin CSSEdit? Because due to restrictions of permissions that I currently have, I cannot access the FTP.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2015

    @orangesmasher221

    I haven't used that plugin, but can't see any reason why you shouldn't be able to.

    But you need to enable the Role Title plugin first, otherwise the relevant css class won't exist for you to change.

    From the link you provided:

    You will want to enable the “Roles Titles” plugin. This adds a role specific CSS class for you to target. In the following example, we can see, using Firebug (but use whatever dev tool you like), that a new class “Role_Administrator” is added for users of the administrator account.

  • If I go further down in the dev console, it shows the author info and such.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    Sorry, @orangesmasher221 but I'm not sure what that post is trying to show.

    Do you have the Role Title plugin enabled?

  • edited February 2015

    I do have the plugin enabled. It is trying to show the css that I used and how the dev tools aren't showing it. Knowing myself, it is probably a typo somewhere...

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited February 2015

    @orangesmasher221

    I've just downloaded the plugin on my local install and enabled it.

    This css in my custom.css file worked :

    .ItemComment.Role_Administrator {
    background: red !important;
    }

    You may need to add !important to whatever rule you are trying to create.

    css.GIF 70.9K
Sign In or Register to comment.