Change color on Slider + amend Title font size
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday. If you have problems with registration ask help on contact us page pleaseIf you not got email within 24~36 business hours, firstly check your spam box, and if no any email from the support there - back to the forum and read answer here. DO NOT ANSWER ON EMAILS [noreply@pluginus.net] FROM THE FORUM!! Emails are just for your info, all answers should be published only here.
The support doesn work on Saturdays and Sundays, so some Friday requests can be answered on Monday.
Good day everyone
I implmented Husky and I would like to amend few thing on display
here is my website with husky displayed: https://www.lepontdelamour.fr/profils/
- I would like to change the color of sliders to a grey or black. I swa a similar ticket but the CSS provided didn't change my display.
- I would like to have a control on Label Font and Font size so everything is the same.
thank you very much for the time you will spend reading me and assisting me.
Regards
Martial
Hello Martial
Add next please code into file functions.php of the current wp theme:
add_action('wp_enqueue_scripts', 'husky_custom_slider_colors', 999);
function husky_custom_slider_colors() {
// Slider color settings
$slider_color = '#000000'; // Main slider color (black)
$slider_hover_color = '#333333'; // Hover color (dark grey)
// Font settings
$label_font_family = 'Arial, sans-serif'; // Font family for filter labels
$label_font_size = '16px'; // Font size for labels
$label_font_weight = '600'; // Font weight for labels
$label_color = '#333333'; // Label text color
$option_font_size = '14px'; // Font size for filter options
$option_color = '#666666'; // Text color for options
$custom_css ="
/* Ion Range Slider - change #ed5565 to custom colors */
.irs-bar {
background: {$slider_color} !important;
}
.irs-from, .irs-to, .irs-single {
background: {$slider_color} !important;
}
.irs-from:before, .irs-to:before, .irs-single:before {
border-top-color: {$slider_color} !important;
}
.irs-slider {
background: {$slider_color} !important;
border: 2px solid {$slider_color} !important;
}
.irs-slider:hover {
background: {$slider_hover_color} !important;
}
.irs-grid-pol.small {
background: {$slider_color} !important;
}
/* Filter labels font control */
.woof_container .woof_block_html_items h4,
.woof_container .woof_redraw_zone h4 {
font-family: {$label_font_family} !important;
font-size: {$label_font_size} !important;
font-weight: {$label_font_weight} !important;
color: {$label_color} !important;
}
/* Filter options text */
.woof_container .woof_list li label,
.woof_container .woof_checkbox_label {
font-family: {$label_font_family} !important;
font-size: {$option_font_size} !important;
color: {$option_color} !important;
}
/* Price slider labels */
.woof_price_search_container .woof_price_search_text {
font-family: {$label_font_family} !important;
font-size: {$option_font_size} !important;
}
";
wp_add_inline_style('woof-ion-range-slider', $custom_css);
}
Let me know how it works. Welcome!
Good day Alex,
I am using Wpcodebox to add CSS snippet into my website.
I added the CSS but so far don't see any change.
I can provide you with admin access to my website if you need to check things on your end.
Hello Martial
Yes, share please wp-admin aceess and I will play with the code
https://share.pluginus.net/image/i20230222134241.png
https://share.pluginus.net/image/i20230222134615.png
https://share.pluginus.net/image/i20230222134511.png
thank you, i sent you admin access
Hello Martial
Here it is: https://www.lepontdelamour.fr/wp-admin/theme-editor.php?file=functions.php&theme=blocksy-child
I changed code:
add_action('wp_footer', function () {
// Only output on pages where WOOF/HUSKY is active
if (!class_exists('WOOF')) {
return;
}
// Slider color settings
$slider_color = '#000000'; // Main slider color (black)
$slider_hover_color = '#333333'; // Hover color (dark grey)
// Font settings
$label_font_family = 'Arial, sans-serif';
$label_font_size = '16px';
$label_font_weight = '600';
$label_color = '#333333';
$option_font_size = '14px';
$option_color = '#666666';
?>
<style id="husky-custom-colors">
/* Ion Range Slider - change #ed5565 to custom colors */
.irs-bar {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from, .irs-to, .irs-single {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from:before, .irs-to:before, .irs-single:before {
border-top-color: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider {
background: <?php echo esc_attr($slider_color); ?> !important;
border: 2px solid <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider:hover {
background: <?php echo esc_attr($slider_hover_color); ?> !important;
}
.irs-grid-pol.small {
background: <?php echo esc_attr($slider_color); ?> !important;
}
/* Filter labels font control */
.woof_container .woof_block_html_items h4,
.woof_container .woof_redraw_zone h4 {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($label_font_size); ?> !important;
font-weight: <?php echo esc_attr($label_font_weight); ?> !important;
color: <?php echo esc_attr($label_color); ?> !important;
}
/* Filter options text */
.woof_container .woof_list li label,
.woof_container .woof_checkbox_label {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
color: <?php echo esc_attr($option_color); ?> !important;
}
/* Price slider labels */
.woof_price_search_container .woof_price_search_text {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
}
</style>
<?php
}, 999);
Now it looks:
Welcome :)
Good day and thank you very much for your action and input.
My feedback :
- is it possible to also change the color of the delimiter (in red still) on the slider.
- I changed the black ionto gold and it works
- I can't find a way to adapt the font size of the label to exactly match the one for"Votre Recherche".
Instead of amending child them php file would it be easier to use Php snippet via wpcodebox?
My client wants something more discreet an choosed your"sharp" slider template.
Would you mind providing me the code to amend color on side (currently in purple, ideally in gold)
Also my main request is still one: your code is amending font type but not font size or font weight it seems.
screnshot here :https://imgur.com/a/bIduD37
Hello Martial
Better use functions.php file, BUT inside child wp theme to avoid code rewriting after wp theme update:
How to Create a Child Theme in WordPress
Step 1: Create a folder
- Connect via FTP or use cPanel File Manager
- Go to:
/wp-content/themes/ - Create new folder:
yourtheme-child(replace"yourtheme" with your parent theme name)
Step 2: Create style.css file Inside the child theme folder, create file style.css:
/*
Theme Name: Your Theme Child
Template: yourtheme
Version: 1.0.0
*/
Important: The Template: line must match exactly your parent theme folder name.
Step 3: Create functions.php file Create file functions.php:
<?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
}
Step 4: Activate
- Go to: WordPress Admin → Appearance → Themes
- Find your child theme
- Click Activate
Done! Now you can safely add custom code to your child theme without losing changes when the parent theme updates.
Font size, color, weifht, and ticks (red) here it is improved code:
add_action('wp_footer', function () {
// Only output on pages where WOOF/HUSKY is active
if (!class_exists('WOOF')) {
return;
}
// Slider color settings
$slider_color = '#bf9b30'; // Main slider color
$slider_hover_color = '#333333'; // Hover color
// Font settings
$label_font_family = 'Poppins, sans-serif';
$label_font_size = '12px';
$label_font_weight = '300';
$label_color = '#333333';
$option_font_size = '12px';
$option_color = '#666666';
// Slider grid text settings
$grid_font_size = '13px';
$grid_font_weight = '400';
$grid_color = '#999999';
?>
<style id="husky-custom-colors">
/* Ion Range Slider - change #ed5565 to custom colors */
.irs-bar {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from, .irs-to, .irs-single {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from:before, .irs-to:before, .irs-single:before {
border-top-color: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider {
background: <?php echo esc_attr($slider_color); ?> !important;
border: 2px solid <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider:hover {
background: <?php echo esc_attr($slider_hover_color); ?> !important;
}
.irs-grid-pol.small {
background: <?php echo esc_attr($slider_color); ?> !important;
}
/* ticks */
.irs--sharp .irs-grid-pol {
background-color: red;
}
/* Slider grid text (numbers below slider) */
.irs--sharp .irs-grid-text,
.irs-grid-text {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($grid_font_size); ?> !important;
font-weight: <?php echo esc_attr($grid_font_weight); ?> !important;
color: <?php echo esc_attr($grid_color); ?> !important;
}
/* Filter labels font control */
.woof_container .woof_block_html_items h4,
.woof_container .woof_redraw_zone h4 {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($label_font_size); ?> !important;
font-weight: <?php echo esc_attr($label_font_weight); ?> !important;
color: <?php echo esc_attr($label_color); ?> !important;
}
/* Filter options text */
.woof_container .woof_list li label,
.woof_container .woof_checkbox_label {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
color: <?php echo esc_attr($option_color); ?> !important;
}
/* Price slider labels */
.woof_price_search_container .woof_price_search_text {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
}
</style>
<?php
}, 999);
Thank you alex for your prompt reply,
I know already about child theme just prefered wpcodebox but will stick to your solution.
Regarding the fonts and color amendments:
- Color: my cleint needed the purple elements to become gold (#bf9b30)
- Color: the graduation should remain grey not red.
- Font : you notice on your code the font size is set to 12 px which doesnt reflect at all on frontend. same goes with font weight.
My apologies if my previous messages generated confusion.
could you kindly amend and resolve this font size not been reflecting?
Hello Martial
Here is modified code:
add_action('wp_footer', function () {
// Only output on pages where WOOF/HUSKY is active
if (!class_exists('WOOF')) {
return;
}
// ============================================
// CUSTOMIZATION SETTINGS - Edit these values
// ============================================
// Slider color settings
$slider_color = '#bf9b30'; // Main slider color (gold)
$slider_hover_color = '#333333'; // Hover color
$slider_bg_color = '#e0e0e0'; // Slider track background (grey)
// Title color
$title_color = '#a804b2'; // Filter titles color (purple)
// Font settings
$label_font_family = 'Poppins, sans-serif';
$label_font_size = '12px'; // Filter titles (Tranche d'âge, Taille, etc.)
$label_font_weight = '600';
$option_font_size = '12px'; // Filter options text
$option_color = '#666666';
// Slider grid text settings
$grid_font_size = '13px';
$grid_font_weight = '400';
$grid_color = '#999999';
?>
<style id="husky-custom-colors">
/* Ion Range Slider - Active parts (gold) */
.irs-bar {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from, .irs-to, .irs-single {
background: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-from:before, .irs-to:before, .irs-single:before {
border-top-color: <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider {
background: <?php echo esc_attr($slider_color); ?> !important;
border: 2px solid <?php echo esc_attr($slider_color); ?> !important;
}
.irs-slider:hover {
background: <?php echo esc_attr($slider_hover_color); ?> !important;
}
.irs-grid-pol.small {
background: <?php echo esc_attr($slider_color); ?> !important;
}
/* Sharp slider handle (gold) */
.irs--sharp .irs-handle {
top: 25px;
width: 10px;
height: 10px;
background-color: <?php echo esc_attr($slider_color); ?> !important;
}
.irs--sharp .irs-handle > i:first-child {
position: absolute;
display: block;
top: 100%;
left: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: <?php echo esc_attr($slider_color); ?> !important;
}
/* Slider track background (grey, not red) */
.irs-line {
background: <?php echo esc_attr($slider_bg_color); ?> !important;
}
/* Grid ticks (keep grey) */
.irs--sharp .irs-grid-pol {
background-color: <?php echo esc_attr($slider_bg_color); ?> !important;
}
/* Slider grid text (numbers below slider) */
.irs--sharp .irs-grid-text,
.irs-grid-text {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($grid_font_size); ?> !important;
font-weight: <?php echo esc_attr($grid_font_weight); ?> !important;
color: <?php echo esc_attr($grid_color); ?> !important;
}
/* Filter labels font control (Tranche d'âge, Taille, etc.) - PURPLE */
.woof_container_inner h4 {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($label_font_size); ?> !important;
font-weight: <?php echo esc_attr($label_font_weight); ?> !important;
color: <?php echo esc_attr($title_color); ?> !important;
margin-bottom: 12px !important;
margin-top: 20px !important;
}
/* Filter options text */
.woof_container .woof_list li label,
.woof_container .woof_checkbox_label {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
color: <?php echo esc_attr($option_color); ?> !important;
}
/* Price slider labels */
.woof_price_search_container .woof_price_search_text {
font-family: <?php echo esc_attr($label_font_family); ?> !important;
font-size: <?php echo esc_attr($option_font_size); ?> !important;
}
</style>
<?php
}, 999);
You can enter here and in special PHP variables customize colora to another ones https://www.lepontdelamour.fr/wp-admin/theme-editor.php?file=functions.php&theme=blocksy-child
Now its looks better:
