{"id":1363,"date":"2016-01-06T13:39:28","date_gmt":"2016-01-06T18:39:28","guid":{"rendered":"http:\/\/xlinesoft.com\/blog\/?p=1363"},"modified":"2016-01-06T19:38:24","modified_gmt":"2016-01-07T00:38:24","slug":"adding-badges-to-application-menu","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2016\/01\/06\/adding-badges-to-application-menu\/","title":{"rendered":"Adding badges to application menu"},"content":{"rendered":"<p>In this post we&#8217;ll show how to spice up your application menu drawing attention to new and important items. For this purpose we&#8217;ll be using so called menu badges.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2016\/01\/adding_menu_badges.png\" alt=\"\" title=\"adding_menu_badges\" width=\"615\" height=\"341\" class=\"alignnone size-full wp-image-1365\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2016\/01\/adding_menu_badges.png 615w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2016\/01\/adding_menu_badges-300x166.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2016\/01\/adding_menu_badges-150x83.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2016\/01\/adding_menu_badges-400x221.png 400w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><br \/>\n<!--more--><\/p>\n<p>These badges can be text, images or numbers. You can add this functionality to your project in two easy steps.<\/p>\n<h2>1. Custom CSS<\/h2>\n<p>Add the following code to &#8216;Custom CSS&#8217; section of Style Editor.<\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\n.badge-green {\r\nbackground-color: #1ab394;\r\n}\r\n\r\n.badge-blue {\r\nbackground-color: #23c6c8;\r\n}\r\n\r\n\r\n.badge {\r\n    color: #FFFFFF;\r\n    font: 11px \"Helvetica Neue\", Helvetica, Arial, sans-serif;\r\n    font-weight: 600;\r\n    padding: 2px 8px;\r\n    text-shadow: none;    \r\n    border-radius: .25em;\r\n    float: right!important;\r\n}\r\n<\/pre>\n<h2>2. MenuItemModify event<\/h2>\n<p><strong>PHPRunner<\/strong><\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\n$title = $menuItem->getTitle();\r\n\r\nif ($title==\"Categories\") {\r\n       \/\/ display some text\r\n\t$title.=\"&lt;span class='badge badge-green'>NEW&lt;\/span>\";\r\n  $menuItem->setTitle($title);\r\n}\r\nif ($title==\"Shippers\") {\r\n\t$title.=\"&lt;span class='badge badge-blue'>SPECIAL&lt;\/span>\";\r\n  $menuItem->setTitle($title);\r\n}\r\nif ($title==\"Suppliers\") {\r\n       \/\/ display some image\r\n\t$title.=\"&lt;span class='badge'>&lt;img src='images\/cal.gif'>&lt;\/span>\";\r\n  $menuItem->setTitle($title);\r\n}\r\nif ($title==\"Orders\") {\r\n       \/\/ display numbers of today's orders\r\n\t$count = DBLookup(\"select count(*) from orders where DATE(OrderDate) = CURDATE()\");\r\n\t$title.=\"&lt;span class='badge badge-blue'>\".$count.\"&lt;\/span>\";\r\n  $menuItem->setTitle($title);\r\n}\r\nreturn true;\r\n<\/pre>\n<p><strong>ASPRunner.NET<\/strong><\/p>\n<pre name=\"code\" class=\"csharp:nocontrols:stripBrs\">\r\nstring title = menuItem.getTitle();\r\nif (title == \"Carscars\") {\r\n\ttitle+=\"&lt;span class='badge badge-green'>NEW&lt;\/span>\";\r\n\tmenuItem.setTitle(title);\r\n}\r\nif (title == \"Carsmake\") {\r\n\ttitle+=\"&lt;span class='badge'>&lt;img src='..\/images\/cal.gif'>&lt;\/span>\";\r\n\tmenuItem.setTitle(title);\r\n}\r\nif (title == \"Carsmodels\") {\r\n\tstring count = tDAL.DBLookup(\"select count(*) from Carsmodels\");\r\n\ttitle+=\"&lt;span class='badge badge-green'>\" + count + \"&lt;\/span>\";\r\n\tmenuItem.setTitle(title);\r\n}\r\nreturn true;\r\n<\/pre>\n<p><strong>ASPRunnerPro<\/strong><\/p>\n<pre name=\"code\" class=\"vb:nocontrols\">\r\ntitle = menuItem.getTitle()\r\n  if title=\"Carscars\" then\r\n                       ' display some text\r\n\t\t\ttitle = title & \"&lt;span class='badge badge-green'>NEW&lt;\/span>\"\r\n      menuItem.setTitle_p1(title)\r\n  end if\r\n  if title=\"Carsform\" then\r\n                       ' display some image\r\n\t\t\ttitle = title & \"&lt;span class='badge'>&lt;img src='images\/cal.gif'>&lt;\/span>\"\r\n      menuItem.setTitle_p1(title)\r\n  end if\r\n  if title=\"Orders\" then\r\n                       ' display some text\r\n\t\t\tcount=DBLookup(\"select count(*) from orders where DATE(OrderDate) = CURDATE()\")\r\n\t\t\ttitle = title & \"&lt;span class='badge badge-blue'>\" & count & \"&lt;\/span>\"\r\n      menuItem.setTitle_p1(title)\r\n  end if\r\n\r\nModifyMenuItem = true\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In this post we&#8217;ll show how to spice up your application menu drawing attention to new and important items. For this purpose we&#8217;ll be using so called menu badges.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,4,8],"tags":[],"class_list":["post-1363","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-php-code-generator","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1363"}],"version-history":[{"count":17,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1363\/revisions"}],"predecessor-version":[{"id":1376,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1363\/revisions\/1376"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}