Let me first start by saying how much I love working with this theme. The new features and everything you have done so far is perfect. However, there are little things that I have problems with. One such thing is button theming.
I managed to do my menu button in this website beautifully as per the settings given in the backend. (screenshot attached). However, when I try to make the rest of the buttons this classy and sleek, it just wouldn't let me :( is there any way you guys can just give me a custom CSS Class that I can just apply somewhere so all my buttons look this good? or is it something you can do from the backend? Happy to even schedule a call regarding the same if need be. Thanks a ton!
Oh sorry if I didn't make myself clear enough. The button in the screenshot is how I want the rest of my buttons on my whole website to look. For example look at the buttons I have now attached in the screenshot. How can I make these buttons also look like the button in the first screenshot? Especially with custom icons?
Okay let me break down it for you further because there seems to be a miscommunication :)
Button Shape – The squared-off look of the buttons is correct and should remain unchanged.
Outline Thickness – The button in the menu has a thinner outline compared to other buttons on the website. The goal is to make all button outlines consistent.
Icons on Buttons – The menu button allows for a custom icon, but other buttons don’t. You want all buttons to have the same customization options, ensuring they either all support icons or none do.
Consistency – The menu button should be the reference point for styling all buttons, meaning every button should match its outline thickness, icon customization, and overall look.
-- You will have to add some custom CSS to adjust the default styling:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-button {
border-width: 1px !important;
}
-- The "Button" Page element and "Call to Action" Page Element both provide an option to add an icon: https://themenectar.com/salient/elements/buttons/ . If you are using the shortcodes they too have an option to add icons. Let us know if you are having trouble finding it.
-- Could you setup a test page with the button style you wish to use so we can check and provide Custom CSS to make it consistent with your current menu styling ?.
Alright perfect! so the Button thickness issue is solved. Now onto the icons. Yes I do know that the buttons allow me to use icons however if I want to use a custom svg image as an icon, is that possible?
You will have to replace and existing icon using Custom CSS or add it all together as there is no such option to add custom icons at the moment in buttons.
Hello Tahir and team,
Let me first start by saying how much I love working with this theme. The new features and everything you have done so far is perfect. However, there are little things that I have problems with. One such thing is button theming.
I managed to do my menu button in this website beautifully as per the settings given in the backend. (screenshot attached). However, when I try to make the rest of the buttons this classy and sleek, it just wouldn't let me :( is there any way you guys can just give me a custom CSS Class that I can just apply somewhere so all my buttons look this good? or is it something you can do from the backend? Happy to even schedule a call regarding the same if need be. Thanks a ton!
Attached files: Screenshot 2025-01-29 at 10.17.17.png
Hey Harsh ,
Appreciate the kind words.
You can create them using the Backend Menu controls. Please view: https://themenectar.com/docs/salient/salient-menu-options/
Best,
ThemeNectar Support Team
Oh sorry if I didn't make myself clear enough. The button in the screenshot is how I want the rest of my buttons on my whole website to look. For example look at the buttons I have now attached in the screenshot. How can I make these buttons also look like the button in the first screenshot? Especially with custom icons?
Attached files: Screenshot 2025-01-29 at 11.08.48.png
Try adjusting these global settings and check:
.
Best
ThemeNectar Support Team
Okay let me break down it for you further because there seems to be a miscommunication :)
Button Shape – The squared-off look of the buttons is correct and should remain unchanged.
Outline Thickness – The button in the menu has a thinner outline compared to other buttons on the website. The goal is to make all button outlines consistent.
Icons on Buttons – The menu button allows for a custom icon, but other buttons don’t. You want all buttons to have the same customization options, ensuring they either all support icons or none do.
Consistency – The menu button should be the reference point for styling all buttons, meaning every button should match its outline thickness, icon customization, and overall look.
Hey Again,
-- You will have to add some custom CSS to adjust the default styling:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-button { border-width: 1px !important; }-- The "Button" Page element and "Call to Action" Page Element both provide an option to add an icon: https://themenectar.com/salient/elements/buttons/ . If you are using the shortcodes they too have an option to add icons. Let us know if you are having trouble finding it.
-- Could you setup a test page with the button style you wish to use so we can check and provide Custom CSS to make it consistent with your current menu styling ?.
Thanks
ThemeNectar Support Team
Alright perfect! so the Button thickness issue is solved. Now onto the icons. Yes I do know that the buttons allow me to use icons however if I want to use a custom svg image as an icon, is that possible?
You will have to replace and existing icon using Custom CSS or add it all together as there is no such option to add custom icons at the moment in buttons.
Best
ThemeNectar Support Team
alright let me see what I can do and get back to you if any more help required. Thanks a lot :)