Add featured posts carousel

This commit is contained in:
AlxMedia 2022-09-10 11:44:33 +02:00
parent fcb13e1a34
commit 426721a33e
10 changed files with 338 additions and 98 deletions

27
content-featured.php Normal file
View file

@ -0,0 +1,27 @@
<?php $format = get_post_format(); ?>
<div class="box-featured-wrap">
<div class="box-featured">
<a href="<?php the_permalink(); ?>" rel="bookmark" class="<?php if ( has_post_thumbnail() ) echo 'box-featured-thumbnail-enabled'; ?>">
<?php if ( has_post_thumbnail() ): ?>
<div class="box-featured-thumbnail">
<?php the_post_thumbnail('microtype-small'); ?>
<?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-play"></i></span>'; ?>
<?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-volume-up"></i></span>'; ?>
<?php if ( is_sticky() ) echo'<span class="thumb-icon small"><i class="fas fa-star"></i></span>'; ?>
</div>
<?php endif; ?>
<h2 class="box-featured-title"><?php the_title(); ?></h2>
<span class="box-featured-date"><?php the_time( get_option('date_format') ); ?></span>
<?php if ( comments_open() && ( get_theme_mod( 'comment-count', 'on' ) =='on' ) ): ?>
<?php $number = get_comments_number( $post->ID ); if ( $number > 0 ) { ?>
<div class="box-featured-comments" href="<?php comments_link(); ?>"><i class="fas fa-comment"></i><span><?php comments_number( '0', '1', '%' ); ?></span></div>
<?php } ?>
<?php endif; ?>
</a>
</div>
</div>

View file

@ -28,6 +28,12 @@ body:where(.dark) .box-excerpt:before { border-bottom-color: #1b1d23; }
body:where(.dark) .box-excerpt:after { border-bottom-color: #282a30; }
body:where(.dark) .front-widgets { background: rgba(0,0,0,0.12); border-top: 1px solid rgba(255,255,255,0.06); }
body:where(.dark) .slick-featured-wrap { background: rgba(0,0,0,0.12); border-top: 1px solid rgba(255,255,255,0.06); }
body:where(.dark) .box-featured a { border: 1px solid rgba(255,255,255,0.06); }
body:where(.dark) .box-featured a:hover { background: rgba(0,0,0,0.12); }
body:where(.dark) .box-featured-title { color: #fff; }
body:where(.dark) .box-featured-date { color: rgba(255,255,255,0.3); }
/* header */
body:where(.dark) .site-title a { color: #fff; }
body:where(.dark) .site-description { color: rgba(255,255,255,0.4); }

View file

@ -139,7 +139,8 @@ if ( ! function_exists( 'microtype_dynamic_css' ) ) {
.alx-tab li:hover .tab-item-title a,
.alx-tab li:hover .tab-item-comment a,
.alx-posts li:hover .post-item-title a,
.themeform label .required { color: '.esc_attr( get_theme_mod('color-1') ).'; }
.themeform label .required,
.box-featured-comments { color: '.esc_attr( get_theme_mod('color-1') ).'; }
.page-title-inner:before,
#theme-toggle-btn:before,
#profile-image,
@ -160,7 +161,14 @@ if ( ! function_exists( 'microtype_dynamic_css' ) ) {
.themeform input[type="submit"],
.themeform button[type="button"],
.themeform button[type="reset"],
.themeform button[type="submit"] { background: '.esc_attr( get_theme_mod('color-1') ).'; }
.themeform button[type="submit"],
.box-featured a:before,
.slick-featured-nav .slick-prev,
.slick-featured-nav .slick-next,
.slick-featured-nav .slick-prev:hover,
.slick-featured-nav .slick-next:hover,
.slick-featured-nav .slick-prev:focus,
.slick-featured-nav .slick-next:focus { background: '.esc_attr( get_theme_mod('color-1') ).'; }
'."\n";
}
// background color

View file

@ -121,6 +121,40 @@ Kirki::add_field( 'microtype_theme', array(
'step' => '1',
),
) );
// Blog: Featured Posts Include
Kirki::add_field( 'microtype_theme', array(
'type' => 'switch',
'settings' => 'featured-posts-include',
'label' => esc_html__( 'Featured Posts', 'microtype' ),
'description' => esc_html__( 'Exclude featured posts from the content below', 'microtype' ),
'section' => 'blog',
'default' => 'off',
) );
// Blog: Featured Category
Kirki::add_field( 'microtype_theme', array(
'type' => 'select',
'settings' => 'featured-category',
'label' => esc_html__( 'Featured Category', 'microtype' ),
'description' => esc_html__( 'By not selecting a category, it will show your latest post(s) from all categories', 'microtype' ),
'section' => 'blog',
'default' => '',
'choices' => Kirki_Helper::get_terms( 'category' ),
'placeholder' => esc_html__( 'Select a category', 'microtype' ),
) );
// Blog: Featured Post Count
Kirki::add_field( 'microtype_theme', array(
'type' => 'slider',
'settings' => 'featured-posts-count',
'label' => esc_html__( 'Featured Post Count', 'microtype' ),
'description' => esc_html__( 'Max number of featured posts to display. Set it to 0 to disable', 'microtype' ),
'section' => 'blog',
'default' => '4',
'choices' => array(
'min' => '0',
'max' => '10',
'step' => '1',
),
) );
// Blog: Frontpage Widgets Top
Kirki::add_field( 'microtype_theme', array(
'type' => 'switch',

32
inc/featured.php Normal file
View file

@ -0,0 +1,32 @@
<?php
// Query featured entries
$featured = new WP_Query(
array(
'no_found_rows' => false,
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
'ignore_sticky_posts' => 1,
'posts_per_page' => absint( get_theme_mod('featured-posts-count','4') ),
'cat' => absint( get_theme_mod('featured-category','') )
)
);
?>
<?php if ( is_home() && !is_paged() && ( get_theme_mod('featured-posts-count','4') !='0') && $featured->have_posts() ): // Show if posts are not 0 ?>
<div class="slick-featured-wrap-outer">
<div class="slick-featured-wrap">
<div class="slick-featured">
<?php while ( $featured->have_posts() ): $featured->the_post(); ?>
<div>
<?php get_template_part('content-featured'); ?>
</div>
<?php endwhile; ?>
</div>
<div class="slick-featured-nav"></div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

View file

@ -6,6 +6,8 @@
<?php get_template_part('inc/page-title'); ?>
<?php endif; ?>
<?php get_template_part('inc/featured'); ?>
<?php get_template_part('inc/front-widgets-top'); ?>
<?php if ( have_posts() ) : ?>

View file

@ -99,6 +99,70 @@ jQuery(document).ready(function($) {
debugmode: false,
pushup: ''
});
/* Slick featured posts
/* ------------------------------------ */
$.fn.randomize = function (selector) {
var $elems = selector ? $(this).find(selector) : $(this).children(),
$parents = $elems.parent();
$parents.each(function () {
$(this).children(selector).sort(function (childA, childB) {
// * Prevent last slide from being reordered
if($(childB).index() !== $(this).children(selector).length - 0.5) {
return Math.round(Math.random()) - 0.5;
}
}.bind(this)).detach().appendTo(this);
});
return this;
};
$(".slick-featured").randomize().slick({
centerMode: true,
centerPadding: '100px',
slidesToShow: 1,
appendArrows: '.slick-featured-nav',
responsive: [
{
breakpoint: 1280,
settings: {
arrows: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 1024,
settings: {
arrows: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 768,
settings: {
arrows: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.slick-featured-wrap-outer').show();
/* Slick image slide
/* ------------------------------------ */

View file

@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Microtype\n"
"POT-Creation-Date: 2022-09-09 17:06+0200\n"
"POT-Creation-Date: 2022-09-10 11:42+0200\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@ -75,7 +75,7 @@ msgstr ""
msgid "Normal full width sidebar"
msgstr ""
#: functions.php:182 functions/theme-options.php:235
#: functions.php:182 functions/theme-options.php:269
msgid "Footer Ads"
msgstr ""
@ -233,375 +233,405 @@ msgid "Max number of words. Set it to 0 to disable."
msgstr ""
#: functions/theme-options.php:128
msgid "Frontpage Widgets Top"
msgid "Featured Posts"
msgstr ""
#: functions/theme-options.php:129 functions/theme-options.php:138
msgid "A column of widgets"
#: functions/theme-options.php:129
msgid "Exclude featured posts from the content below"
msgstr ""
#: functions/theme-options.php:137
msgid "Featured Category"
msgstr ""
#: functions/theme-options.php:138
msgid ""
"By not selecting a category, it will show your latest post(s) from all "
"categories"
msgstr ""
#: functions/theme-options.php:142
msgid "Select a category"
msgstr ""
#: functions/theme-options.php:148
msgid "Featured Post Count"
msgstr ""
#: functions/theme-options.php:149
msgid "Max number of featured posts to display. Set it to 0 to disable"
msgstr ""
#: functions/theme-options.php:162
msgid "Frontpage Widgets Top"
msgstr ""
#: functions/theme-options.php:163 functions/theme-options.php:172
msgid "A column of widgets"
msgstr ""
#: functions/theme-options.php:171
msgid "Frontpage Widgets Bottom"
msgstr ""
#: functions/theme-options.php:146
#: functions/theme-options.php:180
msgid "Comment Count"
msgstr ""
#: functions/theme-options.php:154
#: functions/theme-options.php:188
msgid "Single - Author Bio"
msgstr ""
#: functions/theme-options.php:155
#: functions/theme-options.php:189
msgid "Shows post author description, if it exists"
msgstr ""
#: functions/theme-options.php:163
#: functions/theme-options.php:197
msgid "Single - Related Posts"
msgstr ""
#: functions/theme-options.php:164
#: functions/theme-options.php:198
msgid "Shows randomized related articles below the post"
msgstr ""
#: functions/theme-options.php:168 functions/theme-options.php:182
#: functions/theme-options.php:202 functions/theme-options.php:216
msgid "Disable"
msgstr ""
#: functions/theme-options.php:169
#: functions/theme-options.php:203
msgid "Related by categories"
msgstr ""
#: functions/theme-options.php:170
#: functions/theme-options.php:204
msgid "Related by tags"
msgstr ""
#: functions/theme-options.php:177
#: functions/theme-options.php:211
msgid "Single - Post Navigation"
msgstr ""
#: functions/theme-options.php:178
#: functions/theme-options.php:212
msgid "Shows links to the next and previous article"
msgstr ""
#: functions/theme-options.php:183
#: functions/theme-options.php:217
msgid "Below content"
msgstr ""
#: functions/theme-options.php:190
#: functions/theme-options.php:224
msgid "Header Search"
msgstr ""
#: functions/theme-options.php:191
#: functions/theme-options.php:225
msgid "Header search button"
msgstr ""
#: functions/theme-options.php:199
#: functions/theme-options.php:233
msgid "Header Social Links"
msgstr ""
#: functions/theme-options.php:200 functions/theme-options.php:261
#: functions/theme-options.php:234 functions/theme-options.php:295
msgid "Social link icon buttons"
msgstr ""
#: functions/theme-options.php:208
#: functions/theme-options.php:242
msgid "Profile Image"
msgstr ""
#: functions/theme-options.php:209
#: functions/theme-options.php:243
msgid "Minimum width of 320px"
msgstr ""
#: functions/theme-options.php:217
#: functions/theme-options.php:251
msgid "Profile Name"
msgstr ""
#: functions/theme-options.php:218
#: functions/theme-options.php:252
msgid "Your name appears below the image"
msgstr ""
#: functions/theme-options.php:226
#: functions/theme-options.php:260
msgid "Profile Description"
msgstr ""
#: functions/theme-options.php:227
#: functions/theme-options.php:261
msgid "A short description of you"
msgstr ""
#: functions/theme-options.php:236
#: functions/theme-options.php:270
msgid "Footer widget ads area"
msgstr ""
#: functions/theme-options.php:244
#: functions/theme-options.php:278
msgid "Footer Widget Columns"
msgstr ""
#: functions/theme-options.php:245
#: functions/theme-options.php:279
msgid "Select columns to enable footer widgets. Recommended number: 3"
msgstr ""
#: functions/theme-options.php:260
#: functions/theme-options.php:294
msgid "Footer Social Links"
msgstr ""
#: functions/theme-options.php:269
#: functions/theme-options.php:303
msgid "Footer Logo"
msgstr ""
#: functions/theme-options.php:270
#: functions/theme-options.php:304
msgid "Upload your custom logo image"
msgstr ""
#: functions/theme-options.php:278
#: functions/theme-options.php:312
msgid "Footer Copyright"
msgstr ""
#: functions/theme-options.php:279
#: functions/theme-options.php:313
msgid "Replace the footer copyright text"
msgstr ""
#: functions/theme-options.php:287
#: functions/theme-options.php:321
msgid "Footer Credit"
msgstr ""
#: functions/theme-options.php:288
#: functions/theme-options.php:322
msgid "Footer credit text"
msgstr ""
#: functions/theme-options.php:296
#: functions/theme-options.php:330
msgid "Create Social Links"
msgstr ""
#: functions/theme-options.php:297
#: functions/theme-options.php:331
msgid "Create and organize your social links"
msgstr ""
#: functions/theme-options.php:299
#: functions/theme-options.php:333
msgid "Font Awesome names:"
msgstr ""
#: functions/theme-options.php:299 functions/theme-options.php:316
#: functions/theme-options.php:333 functions/theme-options.php:350
msgid "View All"
msgstr ""
#: functions/theme-options.php:302
#: functions/theme-options.php:336
msgid "social link"
msgstr ""
#: functions/theme-options.php:309
#: functions/theme-options.php:343
msgid "Title"
msgstr ""
#: functions/theme-options.php:310
#: functions/theme-options.php:344
msgid "Ex: Facebook"
msgstr ""
#: functions/theme-options.php:315
#: functions/theme-options.php:349
msgid "Icon Name"
msgstr ""
#: functions/theme-options.php:316
#: functions/theme-options.php:350
msgid "Font Awesome icons. Ex: fa-facebook "
msgstr ""
#: functions/theme-options.php:321
#: functions/theme-options.php:355
msgid "Link"
msgstr ""
#: functions/theme-options.php:322
#: functions/theme-options.php:356
msgid "Enter the full url for your icon button"
msgstr ""
#: functions/theme-options.php:327
#: functions/theme-options.php:361
msgid "Icon Color"
msgstr ""
#: functions/theme-options.php:328
#: functions/theme-options.php:362
msgid "Set a unique color for your icon (optional)"
msgstr ""
#: functions/theme-options.php:333
#: functions/theme-options.php:367
msgid "Open in new window"
msgstr ""
#: functions/theme-options.php:342
#: functions/theme-options.php:376
msgid "Dynamic Styles"
msgstr ""
#: functions/theme-options.php:343
#: functions/theme-options.php:377
msgid "Turn on to use the styling options below"
msgstr ""
#: functions/theme-options.php:351
#: functions/theme-options.php:385
msgid "Font"
msgstr ""
#: functions/theme-options.php:352
#: functions/theme-options.php:386
msgid "Select font for the theme"
msgstr ""
#: functions/theme-options.php:356
#: functions/theme-options.php:390
msgid "Titillium Web, Latin (Self-hosted)"
msgstr ""
#: functions/theme-options.php:357
#: functions/theme-options.php:391
msgid "Titillium Web, Latin-Ext"
msgstr ""
#: functions/theme-options.php:358
#: functions/theme-options.php:392
msgid "Droid Serif, Latin"
msgstr ""
#: functions/theme-options.php:359
#: functions/theme-options.php:393
msgid "Source Sans Pro, Latin-Ext"
msgstr ""
#: functions/theme-options.php:360
#: functions/theme-options.php:394
msgid "Lato, Latin"
msgstr ""
#: functions/theme-options.php:361
#: functions/theme-options.php:395
msgid "Raleway, Latin"
msgstr ""
#: functions/theme-options.php:362
#: functions/theme-options.php:396
msgid "Inter, Latin"
msgstr ""
#: functions/theme-options.php:363
#: functions/theme-options.php:397
msgid "Ubuntu, Latin-Ext"
msgstr ""
#: functions/theme-options.php:364
#: functions/theme-options.php:398
msgid "Ubuntu, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:365
#: functions/theme-options.php:399
msgid "Roboto, Latin-Ext"
msgstr ""
#: functions/theme-options.php:366
#: functions/theme-options.php:400
msgid "Roboto, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:367
#: functions/theme-options.php:401
msgid "Roboto Condensed, Latin-Ext"
msgstr ""
#: functions/theme-options.php:368
#: functions/theme-options.php:402
msgid "Roboto Condensed, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:369
#: functions/theme-options.php:403
msgid "Roboto Slab, Latin-Ext"
msgstr ""
#: functions/theme-options.php:370
#: functions/theme-options.php:404
msgid "Roboto Slab, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:371
#: functions/theme-options.php:405
msgid "Playfair Display, Latin-Ext"
msgstr ""
#: functions/theme-options.php:372
#: functions/theme-options.php:406
msgid "Playfair Display, Latin / Cyrillic"
msgstr ""
#: functions/theme-options.php:373
#: functions/theme-options.php:407
msgid "Open Sans, Latin-Ext"
msgstr ""
#: functions/theme-options.php:374
#: functions/theme-options.php:408
msgid "Open Sans, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:375
#: functions/theme-options.php:409
msgid "PT Serif, Latin-Ext"
msgstr ""
#: functions/theme-options.php:376
#: functions/theme-options.php:410
msgid "PT Serif, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:377
#: functions/theme-options.php:411
msgid "Arial"
msgstr ""
#: functions/theme-options.php:378
#: functions/theme-options.php:412
msgid "Georgia"
msgstr ""
#: functions/theme-options.php:379
#: functions/theme-options.php:413
msgid "Verdana"
msgstr ""
#: functions/theme-options.php:380
#: functions/theme-options.php:414
msgid "Tahoma"
msgstr ""
#: functions/theme-options.php:387
#: functions/theme-options.php:421
msgid "Layout Box Max-width"
msgstr ""
#: functions/theme-options.php:388
#: functions/theme-options.php:422
msgid "Max-width of the layout box"
msgstr ""
#: functions/theme-options.php:401
#: functions/theme-options.php:435
msgid "Content Max-width"
msgstr ""
#: functions/theme-options.php:402
#: functions/theme-options.php:436
msgid "Max-width of the content"
msgstr ""
#: functions/theme-options.php:415
#: functions/theme-options.php:449
msgid "Header Logo Image Max-height"
msgstr ""
#: functions/theme-options.php:416
#: functions/theme-options.php:450
msgid ""
"Your logo image should have the double height of this to be high resolution"
msgstr ""
#: functions/theme-options.php:429
#: functions/theme-options.php:463
msgid "Dark Theme"
msgstr ""
#: functions/theme-options.php:430
#: functions/theme-options.php:464
msgid "Use dark instead of light base"
msgstr ""
#: functions/theme-options.php:438
#: functions/theme-options.php:472
msgid "Light/Dark Theme Toggle"
msgstr ""
#: functions/theme-options.php:439
#: functions/theme-options.php:473
msgid "Do not use with dark theme enabled"
msgstr ""
#: functions/theme-options.php:447
#: functions/theme-options.php:481
msgid "Invert Dark Logo Color"
msgstr ""
#: functions/theme-options.php:448
#: functions/theme-options.php:482
msgid "Change color for the logo in dark mode"
msgstr ""
#: functions/theme-options.php:456
#: functions/theme-options.php:490
msgid "Box Border Radius"
msgstr ""
#: functions/theme-options.php:457
#: functions/theme-options.php:491
msgid "Change radius of the layout box."
msgstr ""
#: functions/theme-options.php:470
#: functions/theme-options.php:504
msgid "Primary Accent"
msgstr ""
#: functions/theme-options.php:478
#: functions/theme-options.php:512
msgid "Background Color"
msgstr ""

View file

@ -143,6 +143,10 @@
.box-excerpt:before,
.box-excerpt:after { left: 34px; }
.box-featured a { min-height: 70px; }
.box-featured-title { font-size: 15px; }
.box-featured-date { font-size: 12px; }
/* sharrre */
.sharrre-footer .sharrre .count { display: none; }

View file

@ -848,7 +848,7 @@ body.dark #theme-toggle-btn:before { border-color: #1a1a1a; top: 2px; left: 34px
#curve-inner:before { content:""; display: block; background: #1da9ff; width: 50%; height: 420px; clip-path: polygon(0px 0px, 100% 0px, 100.00% 100.50%, 0% 0%); position: absolute; left: 0; right: 50%; top: 0; z-index: -2; }
#curve-inner:after { content:""; display: block; background: #1da9ff; width: 50%; height: 420px; clip-path: polygon(0px 0px, 100% 0px, 100% 0px, 0% 100.50%); position: absolute; left: 50%; right: 0; top: 0; z-index: -2; }
.box { position: relative; }
.box { position: relative; z-index: 5; }
.box a:before { content:""; display: block; background: #1da9ff; height: 4px; position: absolute; width: 100%; top: 0; left: 0; visibility: hidden; -webkit-transform: translate3d(0,0,0) scaleX(0); transform: translate3d(0,0,0) scaleX(0); transition: all .3s ease 0s; }
.box a:hover:before { visibility: visible; -webkit-transform: translate3d(0,0,0) scaleX(1); transform: translate3d(0,0,0) scaleX(1); }
.box a { border-top: 1px solid rgba(0,0,0,0.06); align-items: center; display: flex; padding: 30px; text-decoration: none; overflow: hidden; }
@ -866,6 +866,39 @@ body.dark #theme-toggle-btn:before { border-color: #1a1a1a; top: 2px; left: 34px
.box-excerpt:before { content:""; display: block; height: 0; width: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #f5f5f5; position: absolute; left: 44px; top: -15px; z-index: 1; }
.box-excerpt:after { content:""; display: block; height: 0; width: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #ddd; position: absolute; left: 44px; top: -16px; }
.box-featured-wrap { position: relative; }
.box-featured a { min-height: 76px; border: 1px solid rgba(0,0,0,0.06); display: block; margin: 30px 10px; padding: 20px 20px 20px 20px; position: relative; }
.box-featured a:hover { background: rgba(0,0,0,0.04); }
.box-featured a:before { content:""; display: block; background: #1da9ff; height: 4px; position: absolute; width: 100%; top: 0; left: 0; visibility: hidden; -webkit-transform: translate3d(0,0,0) scaleX(0); transform: translate3d(0,0,0) scaleX(0); transition: all .3s ease 0s; }
.box-featured a:hover:before { visibility: visible; -webkit-transform: translate3d(0,0,0) scaleX(1); transform: translate3d(0,0,0) scaleX(1); }
.box-featured a.box-featured-thumbnail-enabled { padding-left: 100px; }
.box-featured-thumbnail { position: absolute; width: 60px; top: 20px; left: 20px; }
.box-featured-thumbnail img { border-radius: 100%; }
.box-featured-title { color: #333; font-size: 18px; line-height: 1.5em; font-weight: 600; overflow: hidden; display: block; -webkit-line-clamp: 2; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; }
.box-featured-date { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.3); }
.box-featured-comments { opacity: 0; color: #1da9ff; font-size: 30px; width: 30px; position: absolute; right: 0; top: -12px; margin-left: 10px; transition: all 0.3s ease; }
.box-featured-comments span { font-size: 12px; font-weight: 600; color: #fff; line-height: 26px; position: absolute; right: 0; top: 0; width: 100%; text-align: center; transition: all 0.3s ease; }
.box-featured a:hover .box-featured-comments { opacity: 1; right: 20px; }
.slick-featured-wrap-outer { display: none; }
.slick-featured-wrap { background: rgba(0,0,0,0.04); border-top: 1px solid rgba(0,0,0,0.06); position: relative; }
.slick-featured { position: relative; z-index: 2; }
.slick-featured-nav { position: absolute; left: 0; right: 0; top: 50%; margin-top: 0; text-align: center; margin-bottom: 0; z-index: 4; }
.slick-featured-nav .slick-prev,
.slick-featured-nav .slick-next { background: #1da9ff; transition: all 0.3s ease; position: absolute; display: inline-block; height: 38px; width: 38px; border-radius: 10px; }
.slick-featured-nav .slick-prev:hover,
.slick-featured-nav .slick-next:hover,
.slick-featured-nav .slick-prev:focus,
.slick-featured-nav .slick-next:focus { background: #1da9ff; }
.slick-featured-nav .slick-prev { left: 0; border-radius: 0 20px 20px 0; }
.slick-featured-nav .slick-next { right: 0; border-radius: 20px 0 0 20px; }
.slick-featured-nav .slick-prev:hover,
.slick-featured-nav .slick-next:hover,
.slick-featured-nav .slick-prev:focus,
.slick-featured-nav .slick-next:focus { width: 54px; }
.slick-featured-nav .slick-prev:before { color: #fff; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f053"; }
.slick-featured-nav .slick-next:before { color: #fff; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; }
.slick-image-slide-wrapper { position: relative; }
.slick-image-slide { background: #333; }
.slick-image-slide .slick-slide > div > div { display: block!important; }