התאמות נפוצות לסליידר המלצות

בסליידר ההמלצות, יש כמה התאמות נפוצות:

אם הלקוח מבקש צמצום מרווחים, להלן קוד CSS לנושא: (ניתן להפעיל גם חלקית)

.testimonials_slider a.slider_prev,.testimonials_slider a.slider_next {
 display:none !important;
}
.testimonials_slider .testimonials_slider_ul li {
 padding:0 !important;
}
.testimonials_slider .testimonials_slider_ul li .bq_wrapper {
 padding-top:10px;
 padding:10px 30px;
}
.testimonials_slider blockquote {
 margin-right:0px;
}

כדי להגדיל את הטקסטים + לשנות צבעים, ניתן להשתמש בקוד ה-CSS הבא:

blockquote, blockquote a, blockquote a:hover {
  color:white;
  font-size:120%;
}
.slick-dots li a {
  background-color:#8224e3;
}
.testimonials_slider h5 {
  color:white;
}

כדי להסתיר את התמונות – אפשר לשנות את ההגדרה בסליידר עצמו (הגדרות האלמנט).

כדי להסתיר את הנקודות (Navigation) אפשר להשתמש בקוד הבא:

.testimonials_slider .slick-dots {
display:none !important;
}

כדי להוסיף 5 כוכבים מעל להמלצות, אפשר להשתמש בקוד הבא:

.testimonials_slider li:before {
    content: '\e929\e929\e929\e929\e929';
    font-family: 'mfn-icons';
    padding-left: 5px;
    letter-spacing: 0.2ex;
  font-size:30px;
  line-height:30px;
  color:white;
}

או הקוד הבא (כוכבים מלאים):

.testimonials_slider li:before {
    content: '\e927\e927\e927\e927\e927';
    font-family: 'mfn-icons';
    padding-left: 5px;
    letter-spacing: 0.2ex;
  font-size:40px;
  line-height:30px;
  color:#8224e3;
}

או הקוד הבא (כוכבים מלאים שנכנסים למסגרת):

.testimonials_slider li:before {
    content: '\e927\e927\e927\e927\e927';
    font-family: 'mfn-icons';
    padding-left: 5px;
    letter-spacing: 0.2ex;
  font-size:40px;
  line-height:30px;
  color:#2c6ba4;
  width:100% !important;
  display:block;
  text-align:center;
  position:relative;
  top:60px;
}

כדי להוסיף לוגואים, יש להיכנס לעיצוב > עריכת תבנית ושם ל-functions/theme-shortcodes.php, סביב שורה 6300 (לחפש Testimonials), אחרי ה-

 $output .= '<div class="hr_dots"><span></span><span></span><span></span></div>';

יש לשבץ את הקוד הבא:

if (has_post_thumbnail()) {
 $output .= get_the_post_thumbnail(null, 'full', array('class'=>'scale-with-grid'));
 } else {
 $output .= '<img class="scale-with-grid" src="'. esc_url(get_theme_file_uri('/images/testimonials-placeholder.png')). '" alt="'. esc_attr(get_post_meta(get_the_ID(), 'mfn-post-author', true)) .'" />';
 }

ולסגנן עם CSS כך:

.testimonials_slider img {
 max-height:120px;
 padding-bottom:10px;
 box-sizing:border-box;
 width:auto !important; 
}

כדי לסגנן צבעים + להוסיף תמונה של 5 כוכבים:

.testimonials_slider .company {
 color:#6834c7 !important;
 font-size:20px;
}
.testimonials_slider .company::after {
 display:block; 
 content:url(https://masa.aitech.co.il/wp-content/uploads/2021/10/Stars.png);
}