Set Up Uikit Theme

To fully integrate UIKit theme's design with Yootheme template into EasyBlog, perform the following steps.

1. Configure EasyBlog to use the new UIKit theme. To do so, head over to EasyBlog > Themes and set UIKit as the default theme.

   

2. Yootheme does not load jQuery by default, which is required in order for EasyBlog to work properly.

   Enable jQuery on Yootheme.

   Templates > Yootheme > Settings > Advanced > Load jQuery

3. Apply these css codes into Yootheme template's custom css section, located at Templates > Yootheme > Settings > Custom code > CSS/LESS

#eb .progress {
    background-color: @background-muted-background;
}
#eb .progress-bar {
    background-color: @base-body-color;
    box-shadow: none;
}
#eb .eb-post-thumb .eb-post-image {
    background-color: @background-muted-background;
}
#eb .eb-dialog-header,
#eb .eb-dialog-footer,
#eb .eb-dialog-container {
    color: @base-body-color;
    background: @modal-dialog-background;
    border: none;
}
#eb .eb-dialog-footer-content .btn-default,
#eb .eb-dialog-footer-content .btn-default:hover,
#eb .eb-dialog-footer-content .btn-default:focus,
#eb .eb-dialog-footer-content .btn-default:active,
#eb .eb-dialog-footer-content .btn-eb-default,
#eb .eb-dialog-footer-content .btn-eb-default:hover,
#eb .eb-dialog-footer-content .btn-eb-default:focus,
#eb .eb-dialog-footer-content .btn-eb-default:active {
    color: @button-default-color !important;
    background: @button-default-background !important;
}
#eb .eb-dialog-footer-content .btn-primary,
#eb .eb-dialog-footer-content .btn-primary:hover,
#eb .eb-dialog-footer-content .btn-primary:focus,
#eb .eb-dialog-footer-content .btn-primary:active,
#eb .eb-dialog-footer-content .btn-eb-primary,
#eb .eb-dialog-footer-content .btn-eb-primary:hover,
#eb .eb-dialog-footer-content .btn-eb-primary:focus,
#eb .eb-dialog-footer-content .btn-eb-primary:active {
    color: @button-primary-color !important;
    background: @button-primary-background !important;
}
#eb .eb-dialog-footer-content .btn-danger,
#eb .eb-dialog-footer-content .btn-danger:hover,
#eb .eb-dialog-footer-content .btn-danger:focus,
#eb .eb-dialog-footer-content .btn-danger:active,
#eb .eb-dialog-footer-content .btn-eb-danger,
#eb .eb-dialog-footer-content .btn-eb-danger:hover,
#eb .eb-dialog-footer-content .btn-eb-danger:focus,
#eb .eb-dialog-footer-content .btn-eb-danger:active {
    color: @button-danger-color !important;
    background: @button-danger-background !important;
}
#eb .eb-head,
#eb .eb-empty,
#eb .form-control,
#eb .eb-box,
#eb .eb-table-filter {
    color: @base-body-color;
    background-color: @background-muted-background;
    border-color: @global-border;
}
#eb .table-striped > tbody > tr:nth-child(2n+1) > td, 
#eb .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: @table-striped-row-background;
}
#eb .eb-table tbody > tr:hover td {
    background-color: @table-hover-row-background;
}
#eb .table > thead > tr > th, #eb .table > thead > tr > td, #eb .table > tbody > tr > th, #eb .table > tbody > tr > td, #eb .table > tfoot > tr > th, #eb .table > tfoot > tr > td {
    border-color: @table-divider-border;
}
#eb .eb-table thead tr td {
    color: @table-caption-color;
}
#eb .eb-table tbody > tr td .post-title {
    color: @base-body-color;
}
#eb .eb-table tbody > tr td .post-meta a,
#eb .eb-table tbody > tr td .post-actions a {
    color: @base-link-color;
}
#eb .eb-table tbody > tr td .post-meta a:hover,
#eb .eb-table tbody > tr td .post-actions a:hover {
    color: @base-link-hover-color;
}
#eb .eb-showcases {
    color: @base-body-color;
    background-color: @background-muted-background;
    border-color: @global-border;
}
#eb .eb-showcases-card {
    border-color: @global-border;       
}
#eb .eb-card {
    background: @card-default-background;
    color: @card-default-color;
}
#eb .eb-post-hits, 
#eb .eb-post-comments a,
#eb .eb-card__title,
#eb .eb-card__title a,
#eb .eb-card__meta,
#eb .eb-card__ft, 
#eb .eb-card__ft a {
    color: @base-body-color;
}
#eb .eb-calendar {
    color: @base-body-color;
    background-color: @background-muted-background;
}
#eb .eb-calendar-days > td {
    background-color: @background-default-background;   
}
#eb .eb-calendar tbody > tr > td.has-posts > div > b {
    color: @base-body-color;
}
#eb .eb-calendar tbody > tr > td.empty > small {
    color: @base-body-color;
    background-color: @background-muted-background;
}
#eb .eb-calendar tbody > tr > td.has-posts > div {
    color: @base-body-color;
    background-color: @background-primary-background;   
}
#eb .eb-calendar-tooltips {
    color: @base-body-color;
    background-color: @background-default-background;
    border-color: @global-border;
}
#eb .eb-calendar-tooltips::before,
#eb .eb-calendar-tooltips::after {
    border-right-color: @global-border;
}
#eb .eb-calendar-tooltips > span {
    background-color: @background-default-background;
    border-bottom-color: @table-divider-border;
}
#eb .eb-calendar-tooltips > div + div {
    border-top-color: @table-divider-border;
}
#eb .eb-calendar-tooltips > div a,
#eb .eb-calendar-tooltips > div a:hover {
    color: @base-body-color;
}
#eb .form-actions {
    color: @base-body-color;
    background-color: @background-muted-background;
    border-top-color: @global-border;
}
#eb .uk-article-title {
    font-weight: @article-title-font-weight;
    line-height: @article-title-line-height;
    .hook-article-title;
}
#eb .uk-card-title {
    font-size: @card-title-font-size;
    line-height: @card-title-line-height;
    .hook-card-title;
}
#eb .uk-subnav {
    color: @subnav-item-color;
    .hook-subnav-item();
}
#eb .uk-subnav a {
    color: @subnav-item-color;
}
#eb .uk-subnav > * > a:hover,
#eb .uk-subnav > * > a:focus {
    color: @subnav-item-hover-color;
    .hook-subnav-item-hover();
}
#eb .ac {
    color: @base-body-color;
    background-color: @background-muted-background;
    border-color: @global-border;
}
#eb .ac > .ac-q {
    color: @base-body-color;
}