Avatar thomas.p Support asked

[Tutorial] Copy the Bento Slideset to another theme

The Bento theme comes with a nice custom Slideset widget that might be useful for displaying an event planner or schedules. The following steps describe how you can make use of this theme-specific widget in other themes, even in YOOtheme Pro.

  • download the bento theme package and unzip it
  • copy the complete folder /widgetkit/widgets/slideset_bento from the bento theme package and upload it to your site via FTP into the folder /administrator/components/com_widgetkit/plugins/widgets/
  • edit the file /administrator/components/com_widgetkit/plugins/widgets/slideset_bento/plugin.php and change lines 98-100 from

    'init.site' => function($event, $app) {
    
    },
    

to

    'init.site' => function($event, $app) {  
        $app['scripts']->add('uikit2-slideset', "vendor/assets/uikit/js/components/slideset.min.js", array('uikit2'));  
    },
  • edit the file /administrator/components/com_widgetkit/plugins/widgets/slideset_bento/_filter.php and replace all appearances of uk- with {wk}-
  • edit the file /administrator/components/com_widgetkit/plugins/widgets/slideset_bento/widget.php and replace all appearances of uk- with {wk}-
  • add the following to your custom CSS at /templates/yoo_YOUR_TEMPLATE/styles/YOUR_STYLE/css/custom.css (Warp 7) or at Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code->CSS/LESS (YOOtheme Pro)

    /* Bento Slideset UIkit 2 */  
    .tm-slideset-bento {  
      position: relative;  
    }  
    @media (min-width: 1220px) {  
      .tm-slideset-bento .uk-subnav {  
        position: absolute;  
        top: -70px;  
        right: 0;  
        margin-bottom: 0;  
      }  
    }  
    .tm-slideset-bento .tm-slideset-title {  
      margin-top: 25px;  
    }  
    .tm-slideset-bento .tm-slideset-date {  
      padding-left: 25px;  
    }  
    @media (min-width: 479px) {  
      .tm-slideset-bento .uk-slideset {  
        display: -ms-flexbox;  
        display: -webkit-flex;  
        display: flex;  
        -ms-flex-direction: column;  
        -webkit-flex-direction: column;  
        flex-direction: column;  
        margin-left: 0 !important;  
      }  
      .tm-slideset-bento .uk-slideset > li {  
        box-sizing: border-box;  
        width: 100%;  
        padding: 25px 0;  
        border-top: 1px solid rgba(0, 0, 0, 0.06);  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel {  
        display: -ms-flexbox;  
        display: -webkit-flex;  
        display: flex;  
        -ms-flex-align: center;  
        -webkit-align-items: center;  
        align-items: center;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel > .tm-slideset-media {  
        margin-right: 25px !important;  
        text-align: center !important;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel > .tm-slideset-media.uk-panel-teaser {  
        margin-bottom: 0 !important;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel > .tm-slideset-main {  
        -ms-flex: 1;  
        -webkit-flex: 1;  
        flex: 1;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel > .tm-slideset-main .tm-slideset-title {  
        margin-top: 5px !important;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel > .tm-slideset-main .tm-slideset-title .tm-slideset-badge-title {  
        margin-left: 5px !important;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel .tm-slideset-date {  
        text-align: right !important;  
      }  
      .tm-slideset-bento .uk-slideset > li > .tm-slideset-panel .tm-slideset-date > span {  
        display: block;  
        font-size: 24px;  
      }  
    }  
    @media (min-width: 1220px) {  
      #tm-slideset-bento-slidenav .uk-subnav {  
        right: 95px;  
      }  
      #tm-slideset-bento-slidenav .tm-slideset-slidenav {  
        position: absolute;  
        top: -70px;  
        right: 0;  
        margin-top: 0 !important;  
      }  
      #tm-slideset-bento-slidenav .tm-slideset-slidenav .uk-slidenav {  
        width: 36px;  
        height: 36px;  
        line-height: 36px;  
        font-size: 20px;  
      }  
    }  
    
    /* Bento Slideset UIkit 3*/  
    .tm-slideset-bento {  
      position: relative;  
    }  
    @media (min-width: 1220px) {  
      .tm-slideset-bento .wk-subnav {  
        position: absolute;  
        top: -70px;  
        right: 0;  
        margin-bottom: 0;  
      }  
    }  
    .tm-slideset-bento .tm-slideset-title {  
      margin-top: 25px;  
    }  
    .tm-slideset-bento .tm-slideset-date {  
      padding-left: 25px;  
    }  
    @media (min-width: 479px) {  
      .tm-slideset-bento .wk-slideset {  
        display: -ms-flexbox;  
        display: -webkit-flex;  
        display: flex;  
        -ms-flex-direction: column;  
        -webkit-flex-direction: column;  
        flex-direction: column;  
        margin-left: 0 !important;  
      }  
      .tm-slideset-bento .wk-slideset > li {  
        box-sizing: border-box;  
        width: 100%;  
        padding: 25px 0;  
        border-top: 1px solid rgba(0, 0, 0, 0.06);  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel {  
        display: -ms-flexbox;  
        display: -webkit-flex;  
        display: flex;  
        -ms-flex-align: center;  
        -webkit-align-items: center;  
        align-items: center;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel > .tm-slideset-media {  
        margin-right: 25px !important;  
        text-align: center !important;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel > .tm-slideset-media.wk-panel-teaser {  
        margin-bottom: 0 !important;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel > .tm-slideset-main {  
        -ms-flex: 1;  
        -webkit-flex: 1;  
        flex: 1;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel > .tm-slideset-main .tm-slideset-title {  
        margin-top: 5px !important;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel > .tm-slideset-main .tm-slideset-title .tm-slideset-badge-title {  
        margin-left: 5px !important;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel .tm-slideset-date {  
        text-align: right !important;  
      }  
      .tm-slideset-bento .wk-slideset > li > .tm-slideset-panel .tm-slideset-date > span {  
        display: block;  
        font-size: 24px;  
      }  
    }  
    @media (min-width: 1220px) {  
      #tm-slideset-bento-slidenav .wk-subnav {  
        right: 95px;  
      }  
      #tm-slideset-bento-slidenav .tm-slideset-slidenav {  
        position: absolute;  
        top: -70px;  
        right: 0;  
        margin-top: 0 !important;  
      }  
      #tm-slideset-bento-slidenav .tm-slideset-slidenav .wk-slidenav {  
        width: 36px;  
        height: 36px;  
        line-height: 36px;  
        font-size: 20px;  
      }  
    }
    
  • now you can set up your Bento Slideset in the Joomla administration panel

This is a screenshot of the Bento Slideset in combination with the Max Demo Package:

Image

  • Joomla
  • Widgetkit
  • Tutorial

Edited

2 Answers

Know someone who can answer? Share a link to this question via email or twitter.