{"id":578,"date":"2021-06-26T11:17:13","date_gmt":"2021-06-26T10:17:13","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?page_id=578"},"modified":"2021-12-03T17:31:13","modified_gmt":"2021-12-03T17:31:13","slug":"mrdev-widget-module-themes","status":"publish","type":"page","link":"https:\/\/marcosrego.com\/account\/mrdev-widget-module-themes\/","title":{"rendered":"Mr.Dev.&#8217;s Widget\/Module Themes"},"content":{"rendered":"\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><ul><li><ul><li><a href=\"#the_widgetmodule_initially_comes_with_the_themes_none_and_default_with_many_layouts_to_choose_from\"><span class=\"toc_number toc_depth_3\">0.0.1<\/span> The widget\/module initially comes with the themes \u2018None\u2019 and \u2018Default\u2019 with many layouts to choose from.<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#no_theme\"><span class=\"toc_number toc_depth_1\">1<\/span> No Theme<\/a><\/li><li><a href=\"#default_theme\"><span class=\"toc_number toc_depth_1\">2<\/span> Default Theme<\/a><\/li><li><a href=\"#default_theme_layouts\"><span class=\"toc_number toc_depth_1\">3<\/span> Default Theme > Layouts<\/a><ul><li><a href=\"#grid\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Grid<\/a><ul><li><a href=\"#description\"><span class=\"toc_number toc_depth_3\">3.1.1<\/span> Description<\/a><\/li><li><a href=\"#details\"><span class=\"toc_number toc_depth_3\">3.1.2<\/span> Details<\/a><\/li><li><a href=\"#options\"><span class=\"toc_number toc_depth_3\">3.1.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#accordion\"><span class=\"toc_number toc_depth_2\">3.2<\/span> Accordion<\/a><ul><li><a href=\"#description-2\"><span class=\"toc_number toc_depth_3\">3.2.1<\/span> Description<\/a><\/li><li><a href=\"#details-2\"><span class=\"toc_number toc_depth_3\">3.2.2<\/span> Details<\/a><\/li><li><a href=\"#options-2\"><span class=\"toc_number toc_depth_3\">3.2.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#slider\"><span class=\"toc_number toc_depth_2\">3.3<\/span> Slider<\/a><ul><li><a href=\"#description-3\"><span class=\"toc_number toc_depth_3\">3.3.1<\/span> Description<\/a><\/li><li><a href=\"#details-3\"><span class=\"toc_number toc_depth_3\">3.3.2<\/span> Details<\/a><\/li><li><a href=\"#options-3\"><span class=\"toc_number toc_depth_3\">3.3.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#collapsible\"><span class=\"toc_number toc_depth_2\">3.4<\/span> Collapsible<\/a><ul><li><a href=\"#description-4\"><span class=\"toc_number toc_depth_3\">3.4.1<\/span> Description<\/a><\/li><li><a href=\"#details-4\"><span class=\"toc_number toc_depth_3\">3.4.2<\/span> Details<\/a><\/li><li><a href=\"#options-4\"><span class=\"toc_number toc_depth_3\">3.4.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#menu\"><span class=\"toc_number toc_depth_2\">3.5<\/span> Menu<\/a><ul><li><a href=\"#description-5\"><span class=\"toc_number toc_depth_3\">3.5.1<\/span> Description<\/a><\/li><li><a href=\"#details-5\"><span class=\"toc_number toc_depth_3\">3.5.2<\/span> Details<\/a><\/li><li><a href=\"#options-5\"><span class=\"toc_number toc_depth_3\">3.5.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#tabs\"><span class=\"toc_number toc_depth_2\">3.6<\/span> Tabs<\/a><ul><li><a href=\"#description-6\"><span class=\"toc_number toc_depth_3\">3.6.1<\/span> Description<\/a><\/li><li><a href=\"#details-6\"><span class=\"toc_number toc_depth_3\">3.6.2<\/span> Details<\/a><\/li><li><a href=\"#options-6\"><span class=\"toc_number toc_depth_3\">3.6.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#mosaic\"><span class=\"toc_number toc_depth_2\">3.7<\/span> Mosaic<\/a><ul><li><a href=\"#description-7\"><span class=\"toc_number toc_depth_3\">3.7.1<\/span> Description<\/a><\/li><li><a href=\"#details-7\"><span class=\"toc_number toc_depth_3\">3.7.2<\/span> Details<\/a><\/li><li><a href=\"#options-7\"><span class=\"toc_number toc_depth_3\">3.7.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#popup\"><span class=\"toc_number toc_depth_2\">3.8<\/span> Popup<\/a><ul><li><a href=\"#description-8\"><span class=\"toc_number toc_depth_3\">3.8.1<\/span> Description<\/a><\/li><li><a href=\"#details-8\"><span class=\"toc_number toc_depth_3\">3.8.2<\/span> Details<\/a><\/li><li><a href=\"#options-8\"><span class=\"toc_number toc_depth_3\">3.8.3<\/span> Options<\/a><\/li><\/ul><\/li><li><a href=\"#custom\"><span class=\"toc_number toc_depth_2\">3.9<\/span> Custom<\/a><ul><li><a href=\"#description-9\"><span class=\"toc_number toc_depth_3\">3.9.1<\/span> Description<\/a><\/li><li><a href=\"#details-9\"><span class=\"toc_number toc_depth_3\">3.9.2<\/span> Details<\/a><\/li><li><a href=\"#options-9\"><span class=\"toc_number toc_depth_3\">3.9.3<\/span> Options<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#custom_theme\"><span class=\"toc_number toc_depth_1\">4<\/span> Custom theme<\/a><ul><li><a href=\"#widget\"><span class=\"toc_number toc_depth_2\">4.1<\/span> Widget<\/a><\/li><li><a href=\"#module\"><span class=\"toc_number toc_depth_2\">4.2<\/span> Module<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h4 class=\"  wp-block-heading\"><span id=\"the_widgetmodule_initially_comes_with_the_themes_none_and_default_with_many_layouts_to_choose_from\"><strong>The widget\/module initially comes with the themes \u2018None\u2019 and \u2018Default\u2019 with many layouts to choose from. <\/strong><\/span><\/h4>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"no_theme\"><strong>No Theme<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">The \u2018None\u2019 theme does not load any extra theme css file. It\u2019s the perfect option if you are a developer that wants to add a completely new style, without having to create a new theme from scratch.&nbsp; This theme does not bring layouts or extra options but you still have all of the global options available.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"default_theme\"><strong>Default Theme<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">The Default theme has a simple design to easily adapt to your current website template. It doesn\u2019t have background colors and uses your current text color for some soft box shadows.<br>It comes with preset layouts made for any situation and a custom layout if you wish to set your own options instead. <br>More details about the available options are described on each example below.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"default_theme_layouts\">Default Theme > <strong>Layouts<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"grid\"><strong>Grid<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-2\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-gridlayout  mr-defaultstyle mr-scaleactive mr-scaleopen mr-opaqueactive mr-opaqueopen     mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-3perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-meta mr-flex\"><span class=\"mr-author\"><small>by <img decoding=\"async\" class=\"mr-authorpic\" src=\"https:\/\/secure.gravatar.com\/avatar\/a4e9f625caa14412b1e0f7b26e65057c?s=50&#038;d=blank&#038;r=g\" title=\"Marcos Rego\" alt=\"Marcos Rego\"> Marcos Rego<\/small><\/span><\/div><div class=\"mr-desc\"><p>Choose the layout Grid to have your items with some style, organized in rows and columns, in containers of the same height and with some space between them.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-meta mr-flex\"><span class=\"mr-author\"><small>by <img decoding=\"async\" class=\"mr-authorpic\" src=\"https:\/\/secure.gravatar.com\/avatar\/a4e9f625caa14412b1e0f7b26e65057c?s=50&#038;d=blank&#038;r=g\" title=\"Marcos Rego\" alt=\"Marcos Rego\"> Marcos Rego<\/small><\/span><\/div><div class=\"mr-desc\"><p>On this layout it can be useful to select the number of items per line and per page.<br \/>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Scale Active<\/li>\r\n<li>Opaque Active<\/li>\r\n<\/ul>\r\n<p>Of course you can change this options by changing to the Custom Layout.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-meta mr-flex\"><span class=\"mr-author\"><small>by <img decoding=\"async\" class=\"mr-authorpic\" src=\"https:\/\/secure.gravatar.com\/avatar\/a4e9f625caa14412b1e0f7b26e65057c?s=50&#038;d=blank&#038;r=g\" title=\"Marcos Rego\" alt=\"Marcos Rego\"> Marcos Rego<\/small><\/span><\/div><div class=\"mr-desc\"><p>To add a little more to the default selected options of the Grid Layout, I used the following options for this example:<\/p>\r\n<ul>\r\n<li>3 items per line<\/li>\r\n<li>Display published date and author<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"accordion\"><strong>Accordion<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-3\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-accordionlayout  mr-defaultstyle mr-expandactive mr-expandopen mr-donotinactive mr-remember   mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-0perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item  mr-active\"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-2\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>With the Accordion layout you can show a glimpse of your items content.<br \/>By default when an item gets active it expands like an accordion, to reveal all the content.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item  mr-inactive\"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-2\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Expand active<\/li>\r\n<\/ul>\r\n<p>Of course you can change this options by changing from the Accordion Layout to the Custom Layout.<br \/>Tip: A neat option for an Accordion could be the vertical titles. You can see it below on the &#8216;Custom Layout&#8217; presentation.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item  mr-inactive\"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-2\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>On this example of Accordion I pinned the item &#8216;Description&#8217; <em>(Pinning is only available on Mr.Dev.)<\/em> and activated the options:<\/p>\r\n<ul>\r\n<li>Do not inactive on click<\/li>\r\n<li>Remember last active (uses cookies)<\/li>\r\n<\/ul>\r\n<p>So if you refresh this page, the item that will start active on this accordion will be the last one you clicked on this accordion.<br \/>If none it will open the pinned &#8216;Description&#8217;.<\/p><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"slider\"><strong>Slider<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-4\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-sliderlayout  mr-defaultstyle mr-scaleopen mr-contentpagination mr-contentpagination mr-artcount   mr-background mr-widget-autoplay5s mr-transitionright mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-1perline mr-widget-page1 mr-widget-pages mrwidget-1perpage mr-nobullets mr-slide mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-3\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>The Slider layout is basically a styled layout that by default only shows one item per page and one item per line, that can be navigated using arrows or other toggles.<\/p><\/div><\/div><\/div><\/li><\/ul><ul class=\"pageid-2 mr-1perline mr-widget-page2 mr-widget-pages mrwidget-1perpage mr-nobullets mr-slide mr-inactive\" style=\"-ms-flex-order: 2; -webkit-order: 2; order: 2;\"><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-3\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style.<\/li>\r\n<li>Pagination inside content.<\/li>\r\n<\/ul>\r\n<p>By default this layout changes the following values of the pagination:<\/p>\r\n<ul>\r\n<li>1 per line<\/li>\r\n<li>1 per page<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><\/ul><ul class=\"pageid-3 mr-1perline mr-widget-page3 mr-widget-pages mrwidget-1perpage mr-nobullets mr-slide mr-inactive\" style=\"-ms-flex-order: 3; -webkit-order: 3; order: 3;\"><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-3\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>For this example I also activated the following options:<\/p>\r\n<ul>\r\n<li>Autoplay: I selected to change page every 5 seconds (autoplay pauses on mouse\/touch hover)<\/li>\r\n<li>Toggles: Arrows, Select and Radio.<\/li>\r\n<li>&#8216;Slide&#8217; page transition.<\/li>\r\n<\/ul>\r\n<p>Because in this case &#8216;Slider&#8217; is also a category, I decided to activate the option:<\/p>\r\n<ul>\r\n<li>Show number of articles (next to the title)<\/li>\r\n<\/ul>\r\n<p>As you can see there are no articles associated with this category right now.<\/p><\/div><\/div><\/div><\/li><\/ul><div class=\"mr-pagination \"><button class=\"mr-widget-arrows mr-widget-prev\"><span><<\/span><\/button><button class=\"mr-widget-arrows mr-widget-next\"><span>><\/span><\/button><select class=\"mr-widget-pageselect \" title=\"\/3\"><option value=\"1\">1<\/option><option value=\"2\">2<\/option><option value=\"3\">3<\/option><\/select><div class=\"mr-widget-radios\"><input name=\"mr-widget-radio\" title=\"1\/3\" class=\"mr-widget-radio\" type=\"radio\" value=\"1\" checked=\"checked\" ><input name=\"mr-widget-radio\" title=\"2\/3\" class=\"mr-widget-radio\" type=\"radio\" value=\"2\"><input name=\"mr-widget-radio\" title=\"3\/3\" class=\"mr-widget-radio\" type=\"radio\" value=\"3\"><\/div><\/div><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"collapsible\"><strong>Collapsible<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-5\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-collapsiblelayout  mr-defaultstyle mr-toggle02 mr-revealactive mr-revealopen mr-portrait mr-keepactive    mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-1perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-4\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>This layout collapses the description and bottom link on active (click or mouseover if selected).<br \/>To easily understand the items that are collapsible, they will have arrows has toggles by default.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-4\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Direction toggle<\/li>\r\n<li>Reveal active<\/li>\r\n<li>Portrait on landscape window<\/li>\r\n<\/ul>\r\n<p>By changing to the Custom Layout, you can also use a Plus Toggle or a Close Toggle on your collapsible items.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-4\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>On this example of the Collapsible layout you can see the following options working:<\/p>\r\n<ul>\r\n<li>Keep other actives opened.<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"menu\"><strong>Menu<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-6\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-menulayout  mr-checkcurrent mr-toggle02 mr-toggle03 mr-hambmob mr-revealactive mr-opaqueopen mr-hideinactives mr-subitemactive     mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-0perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-5\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>A layout without style but with functionalities. By default &#8216;Menu&#8217; will hide inactive items and it will show the child items of the active item. It will also underline the current item, according to the url\/page\/article\/category that you are visiting. On mobile it will have an hamburguer toggle.<\/p>\r\n<p>Of course any of this options can be changed if you select the Custom Layout.<\/p>\r\n<p>And you can make it look even more like a menu by adding linked titles, removing the descriptions and adding mouseover.<\/p><\/div><div class=\"mr-link\"><a class=\"\" href=\"https:\/\/marcosrego.com\/en\/web-en\/mrplugins-features\/\" target=\"_self\" title=\"Description\"> See all Mr.Dev. features&#8230;<\/a><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-5\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Style: Current categories or link<\/li>\r\n<li>Toggles: Direction toggle, Close toggle and Hamburguer mobile<\/li>\r\n<li>Reveal active<\/li>\r\n<li>When active hide inactives<\/li>\r\n<\/ul>\r\n<p>It checks the following pagination option by default:<\/p>\r\n<ul>\r\n<li>Infinite per page<\/li>\r\n<\/ul>\r\n<p>And by default it also checks the following global option:<\/p>\r\n<ul>\r\n<li>Only show subcategories of active<\/li>\r\n<\/ul><\/div><div class=\"mr-link\"><a class=\"\" href=\"https:\/\/marcosrego.com\/en\/web-en\/mrplugins-features\/\" target=\"_self\" title=\"Details\"> See all Mr.Dev. features&#8230;<\/a><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-5\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>For this example, I showcase Mr.Dev.&#8217;s option to add classes to the bottom link. The link you see below has the style associated to the class &#8220;btn&#8221;.<\/p><\/div><div class=\"mr-link\"><a class=\"\" href=\"https:\/\/marcosrego.com\/en\/web-en\/mrplugins-features\/\" target=\"_self\" title=\"Options\"> See all Mr.Dev. features&#8230;<\/a><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"tabs\"><strong>Tabs<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-7\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-tabslayout  mr-defaultstyle mr-expandactive mr-scaleopen mr-portrait mr-onlyactives mr-donotinactive   mr-hastabs  mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"mr-widget-tabs mr-widget-items mr-flex mr-widget-scroll mr-nobullets\"><li class=\"itemid-1  mr-widget-tab mr-active\" style=\"-ms-flex-order: 3; -webkit-order: 3; order: 3;\">Description<\/li><li class=\"itemid-2  mr-widget-tab mr-inactive\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\">Details<\/li><li class=\"itemid-3  mr-widget-tab mr-inactive\" style=\"-ms-flex-order: 2; -webkit-order: 2; order: 2;\">Options<\/li><\/ul><ul class=\"pageid-1 mr-0perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item  mr-active\"  style=\"-ms-flex-order: 3; -webkit-order: 3; order: 3;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-6\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>Although you can use tabs with any layout or theme, the layout &#8220;Tabs&#8221; will automatically select the most common options.<br \/>By default it will show tabs for each item but you can still change the type of tabs to use for example: &#8220;Items parent&#8221; (for Categories) or &#8220;Tags&#8221; (for Articles\/Posts).<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item  mr-inactive\"  style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-6\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Expand active<\/li>\r\n<li>Portrait mode<\/li>\r\n<\/ul>\r\n<p>And the following global layout options:<\/p>\r\n<ul>\r\n<li>Only show actives<\/li>\r\n<li>Do not inactive on click<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item  mr-inactive\"  style=\"-ms-flex-order: 2; -webkit-order: 2; order: 2;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-6\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>For this example I decided to:<\/p>\r\n<ul>\r\n<li>Not display each title inside the item because they already appear on the tab.<\/li>\r\n<li>Pinned the item &#8220;Description&#8221; to start active.<\/li>\r\n<li>And to showcase a working example of automatically sorting items and manually reorder them, I changed this example to descend items by title and then I manually reorder for this item to be between &#8216;Description&#8217; and &#8216;Details&#8217;<\/li>\r\n<\/ul>\r\n<p><em>(Pin and manual reordering are only available on Mr.Dev)<\/em><\/p><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"mosaic\"><strong>Mosaic<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-8\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-mosaiclayout  mr-defaultstyle mr-opaqueactive mr-scaleopen mr-opaqueopen mr-landscape mr-hideinactives mr-donotinactive   mr-hastabs  mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"mr-widget-tabs mr-widget-items mr-flex mr-widget-scroll mr-nobullets\"><li class=\"itemid-1  mr-widget-tab\" style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\">Description<\/li><li class=\"itemid-2  mr-widget-tab\" style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\">Details<\/li><li class=\"itemid-3  mr-widget-tab\" style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\">Options<\/li><\/ul><ul class=\"pageid-1 mr-3perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-7\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>The &#8220;Mosaic&#8221; layout is basically a &#8220;Grids&#8221; layout but by default has tabs and shows more than 1 item per line on mobile.<br \/>The tabs on this layout usually show &#8216;Categories&#8217; for tabs. But you can still change the type of tabs, just like I did on this example by selecting a tab per item.<\/p>\r\n<p>Tip: The tabs &#8216;Tags&#8217; and the page toggles &#8220;Below&#8221; or &#8220;Scroll&#8221; also go very well with this layout.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-7\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Landscape mode<\/li>\r\n<\/ul>\r\n<p>And the following global layout options:<\/p>\r\n<ul>\r\n<li>On active hide inactives<\/li>\r\n<li>Do not inactive on click<\/li>\r\n<\/ul>\r\n<p>This layout forces the items per line to not be infinite.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-7\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>For this example the only change I made was to show a tab per item instead of the default type of tabs that this layout selects.<\/p><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"popup\"><strong>Popup<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-9\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-popuplayout  mr-defaultstyle mr-fixactive mr-revealactive mr-scaleopen mr-toggle01 mr-toggle03     mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-3perline mr-widget-page1 mr-widget-pages mrwidget-0perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-8\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>The &#8220;Popup&#8221; layout will fix the active item on the window, covering most of the content.<\/p>\r\n<p>On this example, you had to click on one of the items for this popup to appear. Using the &#8220;Pin&#8221; feature of Mr.Dev., it&#8217;s possible for the popup\/item to appear immediately when opening the page.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-8\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>By default this layout selects the following options of the Custom Layout:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Fix active<\/li>\r\n<li>Reveal active<\/li>\r\n<li>Plus toggle<\/li>\r\n<li>Close toggle<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-8\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>For this example, I selected to show 3 items per line because that also defines the width of the popup.<\/p><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"custom\"><strong>Custom<\/strong><\/span><\/h3>\n\n\n<!-- Widget Shortcode --><div id=\"mr_developer-10\" class=\"  widget widget_mr_developer widget-shortcode area-arbitrary \"><div class=\"mrdev-widget mr-custom_items mr-theme mr-defaulttheme mr-boxsize \"><div class=\"mr-layout mr-customlayout  mr-defaultstyle mr-verticaltitle mr-toggle01 mr-toggle03 mr-revealactive mr-expandactive mr-opaqueactive mr-contentpagination    mr-background mr-flex mr-wrap mr-relative mr-top mr-noscroll\"><ul class=\"pageid-1 mr-0perline mr-widget-page1 mr-widget-pages mrwidget-2perpage mr-nobullets mr-fade mr-active\" style=\"-ms-flex-order: 1; -webkit-order: 1; order: 1;\"><li class=\"itemid-1   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"description-9\">Description<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>On the Custom Layout you will find all the options of the layouts shown above and some more, but this time each option is selected by you.<\/p><\/div><\/div><\/div><\/li><li class=\"itemid-2   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"details-9\">Details<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>These are the options you can check or uncheck on this layout:<\/p>\r\n<p>Style:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Current categories or link<\/li>\r\n<li>Vertical titles<\/li>\r\n<\/ul>\r\n<p>Toggles:<\/p>\r\n<ul>\r\n<li>Plus toggle<\/li>\r\n<li>Direction toggle<\/li>\r\n<li>Close toggle<\/li>\r\n<li>Hamburguer mobile<\/li>\r\n<\/ul>\r\n<p>Transitions:<\/p>\r\n<ul>\r\n<li>Reveal active<\/li>\r\n<li>Expand active<\/li>\r\n<li>Fix active<\/li>\r\n<li>Scale active<\/li>\r\n<li>Opaque active<\/li>\r\n<\/ul>\r\n<p>Modes:<\/p>\r\n<ul>\r\n<li>Landscape on portrait window<\/li>\r\n<li>Portrait on landscape window<\/li>\r\n<\/ul>\r\n<p>Besides other global layout options:<\/p>\r\n<ul>\r\n<li>Window height<\/li>\r\n<li>Pagination inside content<\/li>\r\n<li>Do not inactive on click<\/li>\r\n<li>Keep other actives opened<\/li>\r\n<li>When active hide inactives<\/li>\r\n<li>Only show subcategories of active<\/li>\r\n<li>Show number of posts (on categories)<\/li>\r\n<li>Active on mouseover<\/li>\r\n<li>Auto scroll to active<\/li>\r\n<li>Change URL on active<\/li>\r\n<li>Remember last active (uses cookies)<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><\/ul><ul class=\"pageid-2 mr-0perline mr-widget-page2 mr-widget-pages mrwidget-2perpage mr-nobullets mr-fade mr-inactive\" style=\"-ms-flex-order: 2; -webkit-order: 2; order: 2;\"><li class=\"itemid-3   mr-widget-item \"  style=\"-ms-flex-order: 0; -webkit-order: 0; order: 0;\"><div class=\"mr-widget-item-container\"><h4 class=\"mr-title\"><span id=\"options-9\">Options<\/span><\/h4><div class=\"mr-content\"><div class=\"mr-desc\"><p>To make the example you see here, the following layout options were selected:<\/p>\r\n<ul>\r\n<li>Apply theme style<\/li>\r\n<li>Vertical titles<\/li>\r\n<li>Plus toggle<\/li>\r\n<li>Close toggle<\/li>\r\n<li>Reveal active<\/li>\r\n<li>Expand active<\/li>\r\n<li>Opaque active<\/li>\r\n<li>Pagination inside content<\/li>\r\n<\/ul>\r\n<p>The following Pagination options were selected<\/p>\r\n<ul>\r\n<li>Infinite per line<\/li>\r\n<li>2 per page<\/li>\r\n<li>Arrows toggle<\/li>\r\n<li>Below toggle<\/li>\r\n<li>Page transition: Fade<\/li>\r\n<\/ul>\r\n<p>Other options were also selected:<\/p>\r\n<ul>\r\n<li>Autoscroll to active<\/li>\r\n<\/ul>\r\n<p>And to showcase an &#8216;Advanced&#8217; option only available on Mr.Dev:<\/p>\r\n<ul>\r\n<li>The item titles html tags were changed, in this case from H3 to H2<\/li>\r\n<\/ul><\/div><\/div><\/div><\/li><\/ul><div class=\"mr-pagination \"><button class=\"mr-widget-arrows mr-widget-prev\"><span><<\/span><\/button><button class=\"mr-widget-arrows mr-widget-next\"><span>><\/span><\/button><select class=\"mr-widget-pageselect mr-hide\" title=\"\/2\"><option value=\"1\">1<\/option><option value=\"2\">2<\/option><\/select><button class=\"mr-widget-below \"><span>+<\/span><\/button><\/div><\/div><\/div><\/div><!-- \/Widget Shortcode -->\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"custom_theme\"><strong>Custom theme<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">If you are a developer, you can create other themes and layouts:<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"widget\"><strong>Widget<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Duplicate the files of the &#8220;Default&#8221; theme into &#8220;\/wp-content\/themes\/mrdev\/widget\/themes\/YOUR_THEME_NAME&#8221;.<br>Follow the same logic to make some changes to them.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"module\"><strong>Module<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Locate the file &#8220;index.xml&#8221; in &#8220;\/templates\/mrdev\/index.xml&#8221; and change all &#8220;-1&#8221; to your theme name.<br>Copy the folder of the &#8220;Default&#8221; theme into &#8220;templates\/mrdev\/&#8221;.<br>Open the files inside that folder and follow the same logic to make changes to them. <\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<p class=\"  has-text-align-center\"><strong>Know more about Mr.Dev.&#8217;s <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-widget\/\" data-type=\"post\" data-id=\"574\">Widget<\/a>\/<a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-module\/\" data-type=\"post\" data-id=\"868\">Module<\/a>:<\/strong><\/p>\n\n\n\n<div class=\"  wp-block-buttons is-content-justification-center is-layout-flex\">\n<div class=\"    wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link has-main-text-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrdevs-widget\"><strong>Get it now (Free)<\/strong><\/a><\/div>\n\n\n\n<div class=\"    wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/mrdev-widget-module-features\/\">Features<\/a><\/div>\n\n\n\n<div class=\"    wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/mrdev-widget-module-themes\/\">Themes &amp; Layouts<\/a><\/div>\n\n\n\n<div class=\"    wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/tag\/mrdev-widget\/\">SEE MORE<\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n","protected":false},"excerpt":{"rendered":"<p>0.0.1 The widget\/module initially comes with the themes \u2018None\u2019 and \u2018Default\u2019 with many layouts to choose from.1 No Theme2 Default Theme3 Default Theme > Layouts3.1 Grid3.2 Accordion3.3 Slider3.4 Collapsible3.5 Menu3.6 Tabs3.7 Mosaic3.8 Popup3.9 Custom4 Custom theme4.1 Widget4.2 Module The widget\/module initially comes with the themes \u2018None\u2019 and \u2018Default\u2019 with many layouts to choose from. No [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/pages\/578"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":6,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/pages\/578\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/pages\/578\/revisions\/2229"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}