Stuart Wright
Well-known member
Supplementary question. Which template is used for the menu? I want to make sure the font awesome icons appear in it.
Responsive Message Controls Menu 1.1.2
- Thread starter Steve F
- Start date
Steve F
Well-known member
I have this working, not sure if it will overwrite your current setup or what effect it would have. On a default setup with the menu installed this is how it looks.
CSS
Edit: REvised the CSS to be less..
CSS
Code:
.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.item.control.like:before
{
content: "\f087";
}
.item.control.reply:before
{
content: "\f122";
}
.item.control.bookmarks:before
{
content: "\f02e";
}
.item.control.edit:before
{
content: "\f040";
}
.item.control.report:before
{
content: "\f071";
}
.item.control.warn:before
{
content: "\f12a";
}
.item.control.ip:before
{
content: "\f002";
}
.item.control.deleteSpam:before
{
content: "\f024";
}
.item.control.history:before
{
content: "\f1da";
}
.item.control.delete:before
{
content: "\f00d";
}Edit: REvised the CSS to be less..
Last edited:
Stuart Wright
Well-known member
Steve I have just implemented this on AVForums. Because the text in the menu does line up (because the Font Awesome icons are variable width), may I suggest that you replace margin-right: 5px; with width: 1.3em; ? And maybe add text-align: center; ?
Last edited:
Steve F
Well-known member
Sure I can look at it. I have some ideas I would like to add to this as well as adding the fa fixed width in the icon class.
Stuart Wright
Well-known member
fa-fw just sets the width to 1.2 something em, so it's the same thing. I already did it and it looks fine. Although I implemented it for the menu only. Not the buttons.
tommydamic68
Well-known member
This doesn't appear to work on the iPad - can I get this to work on the ipad as well?
tommydamic68
Well-known member
tommydamic68
Well-known member
Has anyone got this working correctly on all devices? If so please share how you did it. Trying to get it to work properly on the iPad.
Thank you.
Thank you.
tommydamic68
Well-known member
Never mind, this works. Thanks @Stuart Wright
Code:
.messageMeta .InlineModCheck,
.messageMeta .authorEnd,
.messageMeta2 .authorEnd,
.messageMeta .datePermalink,
.messageMeta2 .Popup.privateControlsPopup.item
{
display: none;
}
.messageMeta2 .InlineModCheck,
.messageMeta2 .datePermalink
{
display: block;
}tommydamic68
Well-known member
This doesn't work, it removes items on a regular desk top...
tommydamic68
Well-known member
The good news is, when your members are logged in it looks ok on all devices including iPad, however, if you have a moderator or admin with moderation access to additional buttons and inline moderation, it all becomes a mess with the buttons, so this add on is not truly responsive...hopefully there will be an updated fix to work responsive on all size devices.
tommydamic68
Well-known member
I guess the name of the add on lead me astray...so then why does it not work on the iPad the same way?
tommydamic68
Well-known member
Thanks for the reply.
Steve F
Well-known member
Not catching what you are saying really. Screenshot or something may help
Joe Link
Well-known member
Not catching what you are saying really. Screenshot or something may help
No prob!
Up top, I get the normal XenForo hamburger.
But on the same page, down below, it just reads 'menu' (no hamburger).
tommydamic68
Well-known member
I think your looking for something in here, play with it to your liking. Throw it in your EXTRA.css
Code:
/* Responsive menu controls */
.item.control.like:before, .item.control.reply:before, .item.control.bookmarks:before, .item.control.edit:before, .item.control.report:before, .item.control.warn:before, .item.control.ip:before,
.item.control.deleteSpam:before, .item.control.history:before, .item.control.delete:before
{
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-right: 5px;
}
.item.control.like:before
{
content: "\f087";
}
.item.control.reply:before
{
content: "\f122";
}
.item.control.bookmarks:before
{
content: "\f02e";
}
.item.control.edit:before
{
content: "\f040";
}
.item.control.report:before
{
content: "\f071";
}
.item.control.warn:before
{
content: "\f12a";
}
.item.control.ip:before
{
content: "\f002";
}
.item.control.deleteSpam:before
{
content: "\f024";
}
.item.control.history:before
{
content: "\f1da";
}
.item.control.delete:before
{
content: "\f00d";
}
.messageMeta .visibleResponsiveMedium .authorEnd,
.messageMeta .visibleResponsiveMedium .datePermalink
{
display: none;
}
.messageMeta2 .visibleResponsiveMedium .authorEnd,
.messageMeta2 .visibleResponsiveMedium .datePermalink
{
display: block;
}Similar threads
