{"id":77525,"date":"2016-12-02T11:19:19","date_gmt":"2016-12-02T16:19:19","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=77525"},"modified":"2017-07-12T06:30:27","modified_gmt":"2017-07-12T10:30:27","slug":"joomla-3-x-manage-progress-bars","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-3-x-manage-progress-bars.html","title":{"rendered":"Joomla 3.x. How to manage progress bars"},"content":{"rendered":"<p>The following tutorial shows how to manage progress bars in Joomla templates.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/U1G4fU0Gwh8\"><\/iframe>\r\n<\/div>\r\n\t\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_1\" width=\"1280\" height=\"645\" class=\"alignnone size-full wp-image-77526\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1-150x76.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1-300x151.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1-768x387.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_1-1024x516.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n<p>Progress bars in Joomla templates are created using the <strong>Articles Newsflash (Advanced) module<\/strong>.<\/p>\r\n\r\n<ol>\r\n\t<li><p>In order to check what category the module pulls articles from, navigate to the <strong>Extensions -> Modules<\/strong> tab. Use search by keywords or by type (Articles Newsflash) to find the needed module:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_2\" width=\"1219\" height=\"636\" class=\"alignnone size-full wp-image-77527\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2.png 1219w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2-768x401.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_2-1024x534.png 1024w\" sizes=\"(max-width: 1219px) 100vw, 1219px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n\t<li><p>Check the category in a <strong>Module tab<\/strong>:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_3\" width=\"1192\" height=\"685\" class=\"alignnone size-full wp-image-77528\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3.png 1192w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3-150x86.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3-300x172.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3-768x441.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_3-1024x588.png 1024w\" sizes=\"(max-width: 1192px) 100vw, 1192px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n\t<li><p>In the <strong>Content -> Articles<\/strong> tab filter content by categories to find all the  articles assigned to the category used by the module:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_4\" width=\"1216\" height=\"635\" class=\"alignnone size-full wp-image-77529\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4.png 1216w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4-768x401.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_4-1024x535.png 1024w\" sizes=\"(max-width: 1216px) 100vw, 1216px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n\t<li><p>Open the needed article and navigate to the <strong>Images and Links<\/strong> tab. Bar value can be edited in a <strong>Caption<\/strong> field:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_5\" width=\"1216\" height=\"631\" class=\"alignnone size-full wp-image-77530\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5.png 1216w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5-300x156.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5-768x399.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_5-1024x531.png 1024w\" sizes=\"(max-width: 1216px) 100vw, 1216px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n<\/ol>\r\n<p>Now let us create a new progress bar.<\/p>\r\n<ol>\r\n<li><p>First create a new article and assign it to the required category (the one used by the module):<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_6\" width=\"1219\" height=\"632\" class=\"alignnone size-full wp-image-77531\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6.png 1219w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6-300x156.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6-768x398.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_6-1024x531.png 1024w\" sizes=\"(max-width: 1219px) 100vw, 1219px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n<li><p>Set the needed value in the <strong>Images and Links<\/strong> tab and save the changes:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_7\" width=\"1220\" height=\"632\" class=\"alignnone size-full wp-image-77532\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7.png 1220w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7-300x155.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7-768x398.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_7-1024x530.png 1024w\" sizes=\"(max-width: 1220px) 100vw, 1220px\" \/><\/a>\r\n\t\t<\/li>\r\n<li><p>Navigate to the <strong>Extensions -> Modules<\/strong> menu, change the number of articles pulled by the module and set the needed number of columns:<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_8\" width=\"1221\" height=\"634\" class=\"alignnone size-full wp-image-77533\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8.png 1221w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8-300x156.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8-768x399.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_8-1024x532.png 1024w\" sizes=\"(max-width: 1221px) 100vw, 1221px\" \/><\/a>\t\t\r\n\t\t\r\n\t\t<\/li>\r\n<li><p>Save the changes and refresh your page to see a new bar added.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9.png\" alt=\"Joomla.3.x_How_to_manage_progress_bars_9\" width=\"1280\" height=\"649\" class=\"alignnone size-full wp-image-77534\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9-150x76.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9-300x152.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9-768x389.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/Joomla.3.x_How_to_manage_progress_bars_9-1024x519.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t\t<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"https:\/\/www.youtube.com\/watch?v=U1G4fU0Gwh8?width=1280&amp;height=720\" rel=\"prettyPhoto\">Joomla 3.x. How to manage progress bars<\/a>\r\n\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/cart.php?addOffer=587\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-1-(500-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The following tutorial shows how to manage progress bars in Joomla templates.<\/p>\n","protected":false},"author":88,"featured_media":77536,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[483,2496],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77525"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=77525"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77525\/revisions"}],"predecessor-version":[{"id":81946,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77525\/revisions\/81946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/77536"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=77525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=77525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=77525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}