From d2163bb1a66fa085b7a4c5a51e3933e1818b8809 Mon Sep 17 00:00:00 2001 From: AlxMedia Date: Sat, 10 Sep 2022 12:01:26 +0200 Subject: [PATCH] Add slick dots --- content-featured.php | 6 ++++-- dark.css | 1 + functions/dynamic-styles.php | 2 ++ functions/theme-options.php | 2 +- inc/featured.php | 4 ++-- js/scripts.js | 5 +++-- style.css | 8 +++++++- 7 files changed, 20 insertions(+), 8 deletions(-) diff --git a/content-featured.php b/content-featured.php index da69123..2b582a8 100644 --- a/content-featured.php +++ b/content-featured.php @@ -1,6 +1,7 @@ -
+
\ No newline at end of file + + \ No newline at end of file diff --git a/dark.css b/dark.css index 41708d7..d4ea318 100644 --- a/dark.css +++ b/dark.css @@ -33,6 +33,7 @@ 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); } +body:where(.dark) .slick-featured .slick-dots li button { background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } /* header */ body:where(.dark) .site-title a { color: #fff; } diff --git a/functions/dynamic-styles.php b/functions/dynamic-styles.php index bc28e54..fd20fc8 100644 --- a/functions/dynamic-styles.php +++ b/functions/dynamic-styles.php @@ -169,6 +169,8 @@ if ( ! function_exists( 'microtype_dynamic_css' ) ) { .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') ).'; } + +.slick-featured .slick-dots .slick-active button { border-color: '.esc_attr( get_theme_mod('color-1') ).'; } '."\n"; } // background color diff --git a/functions/theme-options.php b/functions/theme-options.php index 810d851..0dd5b98 100644 --- a/functions/theme-options.php +++ b/functions/theme-options.php @@ -148,7 +148,7 @@ Kirki::add_field( 'microtype_theme', array( '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', + 'default' => '3', 'choices' => array( 'min' => '0', 'max' => '10', diff --git a/inc/featured.php b/inc/featured.php index 3e80fd0..2c7c2ed 100644 --- a/inc/featured.php +++ b/inc/featured.php @@ -6,13 +6,13 @@ $featured = new WP_Query( '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') ), + 'posts_per_page' => absint( get_theme_mod('featured-posts-count','3') ), 'cat' => absint( get_theme_mod('featured-category','') ) ) ); ?> -have_posts() ): // Show if posts are not 0 ?> +have_posts() ): // Show if posts are not 0 ?>
diff --git a/js/scripts.js b/js/scripts.js index 80c7d69..009bf19 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -123,6 +123,7 @@ jQuery(document).ready(function($) { centerPadding: '100px', slidesToShow: 1, appendArrows: '.slick-featured-nav', + dots: true, responsive: [ { breakpoint: 1280, @@ -147,7 +148,7 @@ jQuery(document).ready(function($) { settings: { arrows: true, centerMode: true, - centerPadding: '60px', + centerPadding: '40px', slidesToShow: 1 } }, @@ -156,7 +157,7 @@ jQuery(document).ready(function($) { settings: { arrows: true, centerMode: true, - centerPadding: '40px', + centerPadding: '20px', slidesToShow: 1 } } diff --git a/style.css b/style.css index 10a8bf3..c057d49 100644 --- a/style.css +++ b/style.css @@ -881,7 +881,7 @@ body.dark #theme-toggle-btn:before { border-color: #1a1a1a; top: 2px; left: 34px .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-wrap { background: rgba(0,0,0,0.04); border-top: 1px solid rgba(0,0,0,0.06); position: relative; padding-bottom: 20px; } .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, @@ -899,6 +899,12 @@ body.dark #theme-toggle-btn:before { border-color: #1a1a1a; top: 2px; left: 34px .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-featured.slick-dotted.slick-slider { margin-bottom: 0; } +.slick-featured .slick-dots { bottom: -6px; } +.slick-featured .slick-dots li { margin: 0 3px; } +.slick-featured .slick-dots li button { background: rgba(0,0,0,0.08); box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); margin: 3px; height: 10px; width: 10px; border-radius: 100%; text-indent: -9999px; overflow: hidden; } +.slick-featured .slick-dots .slick-active button { margin: 0; border: 3px solid #1da9ff; } + .slick-image-slide-wrapper { position: relative; } .slick-image-slide { background: #333; } .slick-image-slide .slick-slide > div > div { display: block!important; }