How do i change the color of the submit or search buttons

API & Customization Ask Developers
1

I'm using the new app builder and in settings, Live App Design, Header & Menu , App header I can see background color (which i have set to blue - #1a2654) and in Page Menu I can see fill color (which have set to gold - #aa9367) but neither affects the background colour of the submit or search buttons.

 

Also in Look and Feel there's options for changing the link text color (it's labelled as "This will affect links, button text, and table headers") 

But i cant see anything for the buttons - where can i change that background button colour as its currently white so it leaves the button as very hard to see.

many thanks Jonathan

 

2

in the back-end on CSS code :

modify the button background by using this class:

.kn-menu .kn-button {

             background-color: your color here;
             color: text color here;

}

3

This is great! Do you know how to modify this code to only apply to a specific form?

4

Hi @GaryStark10384
Not sure if I have correctly understood the question, but to target a specific objects CSS attributes just put that selector in the css.
As an example, here is some of my CSS for the menu, and also where I target a specific views tabs.

Example;
I have made the font in the tabs on a particular view #view_367 smaller.
You could add other attributes like color, background-colour, etc

image
image1920×980 142 KB

To target an element, just browse to the app page in Chrome, then > Right mouse button > “inspect”

image
image1384×1398 155 KB

Copy Selector, add it to your CSS
Let me know if you need a video explainer. Cheers.

1 Like
5

Thanks Calvin, It would be usefull for me if you can share an small video.
Thanks again.
Pablo.

1 Like
6

Wow…thank you SO much for that detailed explanation!!

Are you a Knack consultant?

1 Like
7

Hi @GaryStark10384 you are welcome, I hope it helped. Nope not a consultant, just learning myself so be careful following anything say! haha.

Also @Pablo1 I made a short video on this for you: https://res.cloudinary.com/s-i/video/upload/v1656153938/junk/knack_targeting_specific_view_css_changes_f2ajvd.mp4 sometimes seeing is easier than explaining.

Cheers,
Calvin.

8

Many Thanks Calvin. Very very usefull form me.
Thanks again.
Pablo.

1 Like
9

Wow…THANK YOU for the video! I LOVE videos…so much more helpful.

OK…so I tried it and it didn’t work work…ugh!! Here’s a video of what I did and the result https://www.loom.com/share/92781891f70d4ac58f09327b36d5fbcc

Any thoughts?

1 Like
10

Hi @GaryStark10384,

Just quickly looking at this, it looks like you possibly have multiple CSS declarations to the same element
i.e. somewhere else there is a background-color declaration for button background-color that is over-riding your green. Check that on the right.

image
image1920×697 89.2 KB

Try this: Instead of “;” put !important;
that way, only the !important property value will be applied to the button and all other CSS declarations will be ignored (assuming you only have one important!, lol)

So: {background-colour: green !important;}

I try to be careful with !important, and only use it when you have no alternative… you can get into issues with lots of !important. For example if you use it on a generic declaration (not a specific element) , then you may still not get the result you need, as its the order that becomes important.

Let me know if it doesn’t fix the issue, and I will take a look at it in more detail.

11

Thanks so much! I’ll give that a shot when I’m in front of my computer and let you know… :+1::pray:t2:

Gary Stark
Valio, Founder & CEO
203.231.7579
gstark@myvalio.com
myvalio.com

1 Like
12

That worked!! I can’t thank you enough!!

1 Like
13

That video was very helpful, thank you.