Marcos Rêgo Web Developer

Mr.Dev.’s Widget/Module Themes

The widget/module initially comes with the themes ‘None’ and ‘Default’ with many layouts to choose from.

No Theme

The ‘None’ theme does not load any extra theme css file. It’s 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.  This theme does not bring layouts or extra options but you still have all of the global options available.

Default Theme

The Default theme has a simple design to easily adapt to your current website template. It doesn’t have background colors and uses your current text color for some soft box shadows.
It comes with preset layouts made for any situation and a custom layout if you wish to set your own options instead.
More details about the available options are described on each example below.

Default Theme > Layouts

Grid

  • Description

    by Marcos Rego Marcos Rego

    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.

  • Details

    by Marcos Rego Marcos Rego

    On this layout it can be useful to select the number of items per line and per page.
    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Scale Active
    • Opaque Active

    Of course you can change this options by changing to the Custom Layout.

  • Options

    by Marcos Rego Marcos Rego

    To add a little more to the default selected options of the Grid Layout, I used the following options for this example:

    • 3 items per line
    • Display published date and author

Accordion

  • Description

    With the Accordion layout you can show a glimpse of your items content.
    By default when an item gets active it expands like an accordion, to reveal all the content.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Expand active

    Of course you can change this options by changing from the Accordion Layout to the Custom Layout.
    Tip: A neat option for an Accordion could be the vertical titles. You can see it below on the ‘Custom Layout’ presentation.

  • Options

    On this example of Accordion I pinned the item ‘Description’ (Pinning is only available on Mr.Dev.) and activated the options:

    • Do not inactive on click
    • Remember last active (uses cookies)

    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.
    If none it will open the pinned ‘Description’.

Slider

  • Description

    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.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style.
    • Pagination inside content.

    By default this layout changes the following values of the pagination:

    • 1 per line
    • 1 per page

  • Options

    For this example I also activated the following options:

    • Autoplay: I selected to change page every 5 seconds (autoplay pauses on mouse/touch hover)
    • Toggles: Arrows, Select and Radio.
    • ‘Slide’ page transition.

    Because in this case ‘Slider’ is also a category, I decided to activate the option:

    • Show number of articles (next to the title)

    As you can see there are no articles associated with this category right now.

Collapsible

  • Description

    This layout collapses the description and bottom link on active (click or mouseover if selected).
    To easily understand the items that are collapsible, they will have arrows has toggles by default.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Direction toggle
    • Reveal active
    • Portrait on landscape window

    By changing to the Custom Layout, you can also use a Plus Toggle or a Close Toggle on your collapsible items.

  • Options

    On this example of the Collapsible layout you can see the following options working:

    • Keep other actives opened.

Menu

  • Description

    A layout without style but with functionalities. By default ‘Menu’ 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.

    Of course any of this options can be changed if you select the Custom Layout.

    And you can make it look even more like a menu by adding linked titles, removing the descriptions and adding mouseover.

    See all Mr.Dev. features…

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Style: Current categories or link
    • Toggles: Direction toggle, Close toggle and Hamburguer mobile
    • Reveal active
    • When active hide inactives

    It checks the following pagination option by default:

    • Infinite per page

    And by default it also checks the following global option:

    • Only show subcategories of active
    See all Mr.Dev. features…

  • Options

    For this example, I showcase Mr.Dev.’s option to add classes to the bottom link. The link you see below has the style associated to the class “btn”.

    See all Mr.Dev. features…

Tabs

  • Description
  • Details
  • Options

  • Description

    Although you can use tabs with any layout or theme, the layout “Tabs” will automatically select the most common options.
    By default it will show tabs for each item but you can still change the type of tabs to use for example: “Items parent” (for Categories) or “Tags” (for Articles/Posts).

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Expand active
    • Portrait mode

    And the following global layout options:

    • Only show actives
    • Do not inactive on click

  • Options

    For this example I decided to:

    • Not display each title inside the item because they already appear on the tab.
    • Pinned the item “Description” to start active.
    • 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 ‘Description’ and ‘Details’

    (Pin and manual reordering are only available on Mr.Dev)

Mosaic

  • Description
  • Details
  • Options

  • Description

    The “Mosaic” layout is basically a “Grids” layout but by default has tabs and shows more than 1 item per line on mobile.
    The tabs on this layout usually show ‘Categories’ for tabs. But you can still change the type of tabs, just like I did on this example by selecting a tab per item.

    Tip: The tabs ‘Tags’ and the page toggles “Below” or “Scroll” also go very well with this layout.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Landscape mode

    And the following global layout options:

    • On active hide inactives
    • Do not inactive on click

    This layout forces the items per line to not be infinite.

  • Options

    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.

Popup

  • Description

    The “Popup” layout will fix the active item on the window, covering most of the content.

    On this example, you had to click on one of the items for this popup to appear. Using the “Pin” feature of Mr.Dev., it’s possible for the popup/item to appear immediately when opening the page.

  • Details

    By default this layout selects the following options of the Custom Layout:

    • Apply theme style
    • Fix active
    • Reveal active
    • Plus toggle
    • Close toggle

  • Options

    For this example, I selected to show 3 items per line because that also defines the width of the popup.

Custom

  • Description

    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.

  • Details

    These are the options you can check or uncheck on this layout:

    Style:

    • Apply theme style
    • Current categories or link
    • Vertical titles

    Toggles:

    • Plus toggle
    • Direction toggle
    • Close toggle
    • Hamburguer mobile

    Transitions:

    • Reveal active
    • Expand active
    • Fix active
    • Scale active
    • Opaque active

    Modes:

    • Landscape on portrait window
    • Portrait on landscape window

    Besides other global layout options:

    • Window height
    • Pagination inside content
    • Do not inactive on click
    • Keep other actives opened
    • When active hide inactives
    • Only show subcategories of active
    • Show number of posts (on categories)
    • Active on mouseover
    • Auto scroll to active
    • Change URL on active
    • Remember last active (uses cookies)

  • Options

    To make the example you see here, the following layout options were selected:

    • Apply theme style
    • Vertical titles
    • Plus toggle
    • Close toggle
    • Reveal active
    • Expand active
    • Opaque active
    • Pagination inside content

    The following Pagination options were selected

    • Infinite per line
    • 2 per page
    • Arrows toggle
    • Below toggle
    • Page transition: Fade

    Other options were also selected:

    • Autoscroll to active

    And to showcase an ‘Advanced’ option only available on Mr.Dev:

    • The item titles html tags were changed, in this case from H3 to H2

Custom theme

If you are a developer, you can create other themes and layouts:

Widget

Duplicate the files of the “Default” theme into “/wp-content/themes/mrdev/widget/themes/YOUR_THEME_NAME”.
Follow the same logic to make some changes to them.

Module

Locate the file “index.xml” in “/templates/mrdev/index.xml” and change all “-1” to your theme name.
Copy the folder of the “Default” theme into “templates/mrdev/”.
Open the files inside that folder and follow the same logic to make changes to them.