How to change the MeMenu

lumio · May 2014

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.

vrijvlinder · May 2014

This is most of the code for the me box That I used, so you get an idea. I also have in there other things I wanted the same style applied , like the pager, just ignore that..

.MeMenu .ToggleFlyout, .MeBox .PhotoWrap,.Pager a, .Pager span {
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background: url(images/woodnav.png);
background-repeat: repeat-x;
border: 1px solid #222;
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
margin: 0 0 10px;
padding: 3px 6px;
text-align: center;
text-shadow: 0 1px 0 #000;
}
.MeMenu .ToggleFlyout:hover, .MeBox .PhotoWrap:hover,.Pager a:hover, .Pager span:hover {
-moz-box-shadow:0 0 5px #aaa;
-webkit-box-shadow:0 0 5px #aaa;
background:url(images/parquet.jpg);
border:1px solid #222;
box-shadow:0 0 5px #aaa;
color:lime;
font-size: 14px;
}
.MeBox .ProfilePhotoMedium {
height: 25px;
width: 25px;
}
.MeBox .Flyout, .MenuItems {
-moz-border-radius: 5px;
-moz-box-shadow: 0 0 2px #999;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
background: url(images/transparent2.png);
border: 2px solid #222;
border-radius: 5px;
box-shadow: 0 0 2px #999;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 25px;
min-width: 130px;
width: 100%;
}
.MeBox-SignIn {
display: none!important;
}
.UserBox, .MeBox {
margin: 10px 0;
display: inline-block;
width: 100%;
}
.UserBox .PhotoWrap, .MeBox .PhotoWrap {
float: left;
top:0;
position: relative;
line-height: 1;
}
.MeBox .Username{
    display:none;
}
.Flyout .Author .PhotoWrap img {
margin: 0!important;
width: 25px!important;
height: 25px!important;
}
.Flyout .Author .PhotoWrap img:hover {
margin: 0!important;
width: 25px!important;
height: 25px!important;
}
.Profile .MeBox {
display: block;
}
.ProfilePhotoLarge {
width: 98%;
}
.Sprite16 {
background: url(images/sprites.png) 0 0 no-repeat;
display: inline-block;
height: 17px;
width: 17px;
vertical-align: top;
}
.SpNotifications, .SpGlobe {
background-position: -32px -84px;
}
.SpNotifications:hover,.SpGlobe:hover{
background-position: -32px -84px;
background-color:lime;
border-radius:17px;
}
.SpInbox, .SpEnvelope {
background-position: 1px -99px;
}
.SpInbox:hover, .SpEnvelope:hover {
background-position: 1px -99px;
background-color:lime;
border-radius:0px;
}
.SpBookmarks, .SpStar {
background-position: -80px -116px;
}
.SpBookmarks:hover, .SpStar:hover {
background-position: -80px -116px;
background-color:lime;
border-radius:17px;
}
.SpDashboard, .SpOptions, .SpCog {
background-position: 1px -83px;
}
.SpDashboard:hover, .SpOptions:hover, .SpCog:hover {
background-position: 1px -83px;
background-color:lime;
border-radius:17px;
}

hgtonight · May 2014

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.

vrijvlinder · May 2014

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

vrijvlinder · May 2014

This is most of the code for the me box That I used, so you get an idea. I also have in there other things I wanted the same style applied , like the pager, just ignore that..

.MeMenu .ToggleFlyout, .MeBox .PhotoWrap,.Pager a, .Pager span {
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
background: url(images/woodnav.png);
background-repeat: repeat-x;
border: 1px solid #222;
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
margin: 0 0 10px;
padding: 3px 6px;
text-align: center;
text-shadow: 0 1px 0 #000;
}
.MeMenu .ToggleFlyout:hover, .MeBox .PhotoWrap:hover,.Pager a:hover, .Pager span:hover {
-moz-box-shadow:0 0 5px #aaa;
-webkit-box-shadow:0 0 5px #aaa;
background:url(images/parquet.jpg);
border:1px solid #222;
box-shadow:0 0 5px #aaa;
color:lime;
font-size: 14px;
}
.MeBox .ProfilePhotoMedium {
height: 25px;
width: 25px;
}
.MeBox .Flyout, .MenuItems {
-moz-border-radius: 5px;
-moz-box-shadow: 0 0 2px #999;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
background: url(images/transparent2.png);
border: 2px solid #222;
border-radius: 5px;
box-shadow: 0 0 2px #999;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 25px;
min-width: 130px;
width: 100%;
}
.MeBox-SignIn {
display: none!important;
}
.UserBox, .MeBox {
margin: 10px 0;
display: inline-block;
width: 100%;
}
.UserBox .PhotoWrap, .MeBox .PhotoWrap {
float: left;
top:0;
position: relative;
line-height: 1;
}
.MeBox .Username{
    display:none;
}
.Flyout .Author .PhotoWrap img {
margin: 0!important;
width: 25px!important;
height: 25px!important;
}
.Flyout .Author .PhotoWrap img:hover {
margin: 0!important;
width: 25px!important;
height: 25px!important;
}
.Profile .MeBox {
display: block;
}
.ProfilePhotoLarge {
width: 98%;
}
.Sprite16 {
background: url(images/sprites.png) 0 0 no-repeat;
display: inline-block;
height: 17px;
width: 17px;
vertical-align: top;
}
.SpNotifications, .SpGlobe {
background-position: -32px -84px;
}
.SpNotifications:hover,.SpGlobe:hover{
background-position: -32px -84px;
background-color:lime;
border-radius:17px;
}
.SpInbox, .SpEnvelope {
background-position: 1px -99px;
}
.SpInbox:hover, .SpEnvelope:hover {
background-position: 1px -99px;
background-color:lime;
border-radius:0px;
}
.SpBookmarks, .SpStar {
background-position: -80px -116px;
}
.SpBookmarks:hover, .SpStar:hover {
background-position: -80px -116px;
background-color:lime;
border-radius:17px;
}
.SpDashboard, .SpOptions, .SpCog {
background-position: 1px -83px;
}
.SpDashboard:hover, .SpOptions:hover, .SpCog:hover {
background-position: 1px -83px;
background-color:lime;
border-radius:17px;
}

vrijvlinder · May 2014

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.

lumio · 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?

hgtonight · May 2014

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.

x00 · May 2014

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.

vrijvlinder · May 2014

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

lumio · May 2014

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 now I know it and thanks for reminding me.

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

x00 · May 2014

Guys and gals keep it civil!

lumio · May 2014

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

vrijvlinder · May 2014

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.

How to change the MeMenu

Best Answers

Answers