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.
Options

How to change the MeMenu

Hello,

I came over to style the MeMenu and I find it very hard. I'm pretty against using nested selectors, but somehow I can't see how to do it else.

Now my question: Is there a way to add some classes to it?
Inspecting the code which outputs the me block: no

But I saw, it is a view - so can I redirect the view to one of my themes views?
Actually, I it would be nice to be able to redesign complete panel.

Tagged:

Best Answers

  • Options
    hgtonighthgtonight ∞ · New Moderator
    Answer ✓

    You can override the view (and therefore the markup) by copying /application/dashboard/views/modules/me.php to /themes/YourTheme/views/modules/me.php and modifying to suit your needs.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

Answers

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    You do it using css every part of the module has a css rule. It is very easy you just need a web inspector to help you work it out.

    There is nothing to change in the controller me.php except possibly the order things appear in the array.

    Trust me I have totally styled the crap out of my mebox... css is the way to go

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    You also could copy the me.php and the class.memodule.php to your theme and call it something else and add it as a module kind of like a plugin.
    Essentially replacing the original with your own.

  • Options
    lumiolumio New
    edited May 2014

    Well, it would make my live so much easier, if the parent elements would have proper classes. But they only have ToggleFlyout
    So there is no way I can style the menu itself dependent on the type of button I have.

    The only classes which are identifying are on the icons/sprites itself.

    How can I include my own module as a plugin?

  • Options
    hgtonighthgtonight ∞ · New Moderator
    Answer ✓

    You can override the view (and therefore the markup) by copying /application/dashboard/views/modules/me.php to /themes/YourTheme/views/modules/me.php and modifying to suit your needs.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Options

    you can override but is an anti-pattern override views simply to add different classes.

    For instance the wrong way to do a boostrap theme is to override a bunch of views and put a bunch of boostrap classes in there.

    The right thing would be to merge boostrap classes into vanilla selectors using Sass/compass

    I'm trying to figure out what it is @lumio is unable to style conventionally.

    You are also dealing with dynamic content so you also have scripting it is a really big deal.

    grep is your friend.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    @lumio said:
    Well, it would make my live so much easier, if the parent elements would have proper classes. But they only have ToggleFlyout
    So there is no way I can style the menu itself dependent on the type of button I have.

    The only classes which are identifying are on the icons/sprites itself.

    How can I include my own module as a plugin?

    I am so sick of people saying that they can't do something when I just showed you and gave you the dam code !!!!

    Toggle Flyout, from where ? !!!!!

    is it the .MeMenu toggle flyout ?!!!

    or the Options Toggle Flyout ?!!!

    or is it the Profile options flyout ?!!!

    You can selectively add style to elements if you know how to pick their parent.

    I don't think you know what you want. Or you are incapable of following instructions and reading when people take time to post.

    I also explained how to clone a module. and add it. I also made a plugin to be able to ad to it any modules you make , it is called widgets, but nothing will work unless you read up on things.

    Either you can't see things logically or you are asking to do something you can't because you don't know how yet...

    @x00said: I'm trying to figure out what it is @lumio is unable to style conventionally.

    Apparently not much because he thinks you can't do it even though I just showed him how.

    When a person says to me it can't be styled, it just means they can't do it...

  • Options

    I’m very sorry guys I’m bothering you so much and to be fair, I didn’t give you enough informations. I thought it would be no big deal to just alter a modules view. Isn’t that even the biggest advantage of themes?

    Anyway - I was not able in the first place to style the new message link and I was looking all the time at the parent of the MeBox button .SpInbox which is indeed just ToggleFlyout. But then I saw the actual class .Conversations at the ul object of the Flyout menu.

    @vrijvlinder
    I’m sorry I didn’t respond in the right way. But I just was not satisfied with that answer. To be fair and as I said before, I could have given more informations. But I sure know how to style things with CSS. I just wanted to know how to add classes not how to style them. It was for sure meant well of you and I appreciate it, but it just was not what I asked.

    @x00
    Yes I found that out in the “hard way” - which is good :D now I know it and thanks for reminding me.

    @hgtonight
    Thanks for the straight forward answer. It was exactly what I needed!

  • Options

    Guys and gals keep it civil!

    grep is your friend.

  • Options

    By the way @vrijvlinder‌ ... I found your answer with the CSS code acutally really good for newcomers, so I accepted that one as well.

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    You can add classes, if something has no class or id you take the parents class as a selector.

    You can also add class using jquery

    $('ul.PopList.Conversations li.Item.Title a').addClass('your class')

    this targets the link for the new messages in the dropdown of the me box

    It is obviously up to you what you want to do. I just dislike it when someone says it can't be done , specially when even I have done and do it all the time.

    Because everything in Vanilla works in concert, you need to be careful how you alter things like modules and controllers in order not to break them.

Sign In or Register to comment.