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.
.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";
}
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; ?Edit: REvised the CSS to be less..
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; ?
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.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.
Could you point me in the right template and code?The template modification would need edited to add the classes.
hiddenResponsiveWide
visibleResponsiveWide
.messageMeta .InlineModCheck,
.messageMeta .authorEnd,
.messageMeta2 .authorEnd,
.messageMeta .datePermalink,
.messageMeta2 .Popup.privateControlsPopup.item
{
display: none;
}
.messageMeta2 .InlineModCheck,
.messageMeta2 .datePermalink
{
display: block;
}
This doesn't work, it removes items on a regular desk top...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; }
I guess the name of the add on lead me astray...so then why does it not work on the iPad the same way?This addon works correctly.
It only applies the menu when the space is reduced and the items start to wrap to a new line.
Thanks for the reply.I gave the answer in my last reply.
I think your looking for something in here, play with it to your liking. Throw it in your EXTRA.cssNice work @Steve F!
How do I get the hamburger? Right now my forums just display the word 'menu'.
Thanks!
/* 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;
}
We use essential cookies to make this site work, and optional cookies to enhance your experience.