- This topic has 10 replies, 2 voices, and was last updated 2 years, 6 months ago by
.
-
Posts
-
Hello! I’ll get straight to the point. I would like to add a CSS class to the settings button and ensure that it doesn’t open the settings but only has that custom CSS class. This is because the CSS class triggers the opening of a popup with the settings instead. The CSS class is: sok-installningar-1. Is it possible to achieve this? Thanks!
Hi,
Yes – it will involve a bit of custom coding, but via filter layouts templating you can modify the button layout file and add your custom CSS class.
Hello,
Thank you for the information! I attempted to implement the changes by following the knowledge base page you provided. I created a file at:
/wp-content/themes/Avada/asp/filters/buttons/asp-button-filter.phpI added the following code:
php <?php foreach ($filter->get() as $button): ?> <div class="<?php echo $button->container_class; ?>"> <button class="<?php echo $button->button_class; ?> sok-installningar-1"><?php echo esc_html($button->label); ?></button> </div> <?php endforeach; ?>Unfortunately, it doesn’t seem to be working. I suspect I might be doing something wrong. If you could assist me in identifying the issue, I would greatly appreciate it.
Oh, I’m sorry, I misinterpreted your query – that is not the button you want.
The actual settings button in the search input can’t be changed via templating, but there is still hope.
Try adding this code via the Code Snippets plugin or to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.
add_filter( 'asp_shortcode_output', 'asp_change_search_button_class', 10, 2 ); function asp_change_search_button_class( $output, $id ) { return str_replace("<div class='prosettings", "<div class='sok-installningar-" . $id . " prosettings", $output); }Hi! No worries. It seems it added “2_1” to the “sok-installningar-” class name, which is fine. I just changed the class name of the popup to “sok-installningar-2_1,” so now it works! Thank you very much for the support!
There seems to be one problem now that I didn’t think of. Now when I press the settings button, it opens the popup as intended. However, once I open it again, it hides the settings, as the settings button usually does. Is there a way to prevent this?
Great!
Yes, sort of a hacky way, but I think using a custom CSS to force visibility is the simplest way:
.asp_ss { display: block !important; opacity: 1 !important; visibility: visible !important; }Hi! Awesome! It seems to be working, although it now affects all search bars. Is there a way to make it apply only to the search bar with the shortcode “[wd_asp id=2]” or something like that? I tried doing it with the ID of the search bar in a function but couldn’t get it to work. Any help is appreciated!
Great!
Yes, of course, change it to:
.asp_ss_2 { display: block !important; opacity: 1 !important; visibility: visible !important; }
- The topic ‘Customizing Settings Button Behavior’ is closed to new replies.