OK Animated Cards

  • The module is straighforward and easy to use. The Module doesn’t require much documentation. Below we have outlined some of the main features and the possible questions which you might have using the extension.


    Install module as any other extension via Extension – Install – Upload Package File or Install From Folder(if you unzipped and uploaded)

    After installing, go to Extensions – Modules and select OK Card Panel from list. The module already has default(most used) parameters and demo data – 3 parallel cards.

    You can remove data, remove or add more cards, the limit is 4 cards in one module, it’s done this way because the most used layout is parallel cards in row and 1-4 elements are most compatible with all grid systems. Also you can change the order of cards by just dragging and dropping the card.

    The module’s dashboard except the system tabs has 3 more tabs for configuration(gray ones) – Configuration, Caption and Body, Cards.

  • Layout – you can select the “Parallel” if you use the module in positions above or below content or “Stacked” if you use it in sidebars(it will be as column)

    Use Content Container – This option if you use full width of page module position but want to have caption and cards in the centered container. In most cases you don’t need to use the container as templates already has its own position container(div). This option is useful if your template has the full width module position (thes positions are mostly used at the top for slideshows) if you want to assign the module to a such position. If you have activated this option the next field “Container Width” appears below and there you can set container width. Leave the field empty for default OrionKit /Uikit container width 1130(1200px minus 35×2 margin), or enter value in pixels, just important without “px” or “pixels”, just pure integer value.

    Card Border/Shadows – This adds border or shadows with different depths.

    Title and Subtitle Wrapper – You can wrap these elements(add translucent background colors) to make it more readable if you have too colorful images.

    Image Height – If you have card’s images of same aspect ratio leave it blank, but if you have images with different proportions the cards will not look balanced. So using this option you can fix dis-balance by just setting approximate height of the smaller image. To calculate the height it’s better to install any ruler plugin to your browser.

    In the last fields of the tab Configuration you can change the main colors of cards.

    Caption and Body

    In this tab you can activate Caption container which has the following options:

    Title and Descrtiopin. Both elements can be animated by selection the effect below the fields.

    Also you can customize the look of containers. They have the following options:

    Change color

    Change background color

    Add preset background image pattern(has preview on right of fields)

    Select the font size and paddings

    Add the arrow down or up.

    Tip 1 – Don’t use too bright pattern image for capture container if use arrow down, and for panel container if use arrow up, as the arrow inherits the color the element but can’t inherit background image.

    Tip 2 – You can have as many image patterns as wish all you need to do is upload images to the folder mod_ok_cardpanel/assets/images/patterns/ then refresh dashboard and new images will appear in the list.

    Tip 3 – it’s recommended to hide System Title(first tab – “Show Title” field) if you use Caption container as it doesn’t look good – System Title and module own title container.


    You can select two styles to display the cards.

    1. Default style – is a rectangular image with the title and hidden subtitle on it. When you mouse over the image the subtitle appears with the animation effect.

    2. Circle Image – it’s a popular image style when the image is in the circle. if you select this style, additional setting field for card’s top background color will appear below the field .
    Note: Using this style your images should be square(recommended aspect ratio 1:1) or close to this ratio(for example traditional image aspect ratio 4:3 will be slightly flattened from sides)… In next versions we will try to create a script which allows to use any image.

    In this tab you also find a select field “Animation Trigger

    What is the Trigger?

    Trigger – is a position(time) when animation starts depending on its position in viewport.

    It doesn’t affect if your cards are in the screen viewport when the page loaded as animation starts automatically. It’s only for elements which are out of screen and works when you scroll the page and they appear in viewport.

    The values mean:

    “Start” – starts when even a pixel of the card will appear in viewport

    “End” – starts when the whole element is in viewport(useful for small cards as allows to scroll when the whole element is in the viewport)

    Integer value(100,200etc) – when it scrolled the selected value

    Note: – Keep in mind that in the mobile screens the viewport can be smaller than your cards, so the script disables your trigger value if it will be bigger than the screen and returns the “Start” option

    Tip – don’t use “End” option for big elements to avoid long delays.

    If you have any questions don’t hesitate to ask it in comments section of the site.

Content Cards Doc

As this module based on Standard Joomla! “Articles – Category” module, the most settings are the same and here some documentation for additional settings.

How to add the image into the cards.

All you need is to select any image in one of the article standard field.
You can select the source from where your module will take the image and for now it’s the intro image or full article image(note – probably in next version we will add one more option – to grab the image from aticle text/body)
If the image field is empty the module show the default image(you can change it as well).

OSS Mega Menu

  • This module does not manage menu items. To manage such operations like menu items title, type, order and parent go to the menu manager. This module adds additional elements(icon, subtitles etc) to existing menu items and do nice style. Dashboard
  • Version Lite has about 100 icons.
    You should simply select any.
    Click any menu item, then “Select icon” and select from dropdown list.
    But you can use all icons of Font Awesome using icon field.
    Go to site https://fontawesome.com/v5/search?o=r&m=free
    Select any icon just typing a few symbols, for example for arrows just type “ar”, it will filter them.
    Then click on selected icon, you will see popup with code. You will not be able to copy whole code of icon like <i class=”fas fa-arrows-alt-v”></i>(unfortunately it’s not possible to copy class) but you need only class/ So use any text aditor pass it there, and copy class.
    Example – in icon code <i class=”fas fa-arrows-alt-v”></i> class is in brackets ie fas fa-arrows-alt-v
    Then past class into filed Icon Select and Icon Past into form
  • If you want to add any specific style to your module use custom css Click 3rd tab Additional Parameters, and at the bottom you will see text field CSS Overwrite. Pass there any code you want
    Example – how to change menu background
    Use browser tool to get menu id, if you have more than one OSS menu. Also you can simply use this #oss-menu- plus module id(you can get in module list – last digits in row is ID)
    If you have the only menu use class omm-dir for example module id is 110 #oss-menu-110{background: #eeeeee} for class .omm-dir {background: #eeeeee} Past css code

VIVA Pro Kit

  • Getting VIVA Pro Kit you support further development of our product!
  • You will be able to download all Pro plugins which will be released within an year!
  • You have the unique opportunity, to get it for very low price!

What plugins will be released?

Now we have the following plugins in development:

Viva(OSS) Content Cards
Viva Content Slideshow
Visual slideshow* with a lot of transitions and effects
Viva Megamenu
Visual* menu with drag and drop menu items, icons, submenu description, multi column dropdown, preview images etc
Viva Pagebuilder
Visual* pagebuilder with drag and drop elements
Viva Theme Maker
Visual* theme maker where you can easily create theme, just dragging and dropping elements, customize design and set elements to display as on all pages as on selected types of pages
And probably some more...

* - it means what you can see immediately in preview right in admin dashboard, see as example this demo

The total price of all these plugins will be $150-200, so get your chance, to get the Kit while it's in development for funny price



A link to set a new password will be sent to your email address.

Shopping Cart

No products in the cart.