Hi
I have tab menus in my app which uses the Knack Beta theme. However, it looks like KNack Beta uses a different style to denote the tab.
I have tried the following CSS
/* 2-11-2017 Set back ground color of tabs */
.kn-tab-menu a {background-color: #6abdf5; }
/* 2-11-2017 Set back ground color of tabs on hover*/
.kn-tab-menu a:hover {background-color: #07467c; }
I have also tried .kn-button.
Many thanks
Adrian
Thank you so much :)
If you are targeting the right element already, just set the attribute 'color' that will control text color.
.kn-menu .kn-button {
background-color: yellow !important
color: black !important
}
Thanks Justin. I know you are helping me here voluntarily, and out of goodwill, so i really appreciate your time. I have menu buttons right across my app, and this possibly numbers in the hundreds...
You provided the below which changes the background colour for all menu buttons on all pages. Worked a treat!
.kn-menu .kn-button {
background-color: yellow !important
}
Can i add to this so that i can also change the text colour of these buttons across all pages (not view by view)?
Hi Guy,
Try this in the css panel.
#view_547 > div > a.kn-link.kn-link-1.kn-link-page.kn-button {
color: red !important
}
Change the view to the specific view as necessary.
Change the number to correspond to the number of the button as viewed in the inspector.
Change the color as necessary, you can also use hashes.
this thread is about buttons in on page menus. it is the text in that button that i am referring to
because i have lost the plot trying to work it out, i have clicked on precisley the location of the text i want to change the colour of on 2 pages and provided screenshots of both below
Hi Guy,
I'm sorry but I can't really help without a more detailed description. You would first need to find out what type of element it is before I could tell you what the selector is.
ie h1, h2, h3.
There are hundreds of possibilities.
If you open the inspector and highlight the element you want to target- then take a screenshot with it highlighted / inspector open- I may be able to help.
Cheers
Hi Justin...
This is awesome, and thanks to you (and your ilk) for doing this for the lesser of us knack users...
I really have tried using browser inspect tool to find what i might need to use to change the text colour as well, but cannot work it out. Can you pout me out of my misery?
Thanks Adrian , I am actually looking for a bit more versatility in the top menus rather than fields.
But I have bookmarked those CSS instructions for later reference.
Cheers
Hi Ray,
I was using the .css method in JQuery. You can read more here: http://api.jquery.com/css/#css2
$ -> calls jquery, next we have:
("____________") -->this part is the selector - use the inspector to find and insert the one you need
.css ---> This allows you to alter the css on the selected element, you could also just use the css editor but sometimes the selector is view specific and hard to target so jquery is the way to go.
(property_name, value) This could be any property and value ie ('font-weight', 'strong') or ('background-color', 'blue') etc.
to add my example to your code, you'd place it anywhere after the first "{" and before the first "}"
It would probably look something like this:
$(document).on('knack-view-render.any', function(event, view) {
$("a.kn-view-asset").html("Attachment");
$(".kn-input-address label[for='city']").text("Suburb");
$(".kn-input-address label[for='zip']").text("Postcode");
$('.kn-button .kn-menu').css('background-color', 'yellow'); /* you can also use a hash value rather than a color name */
});
// :)
Hi Ray
The menu colouring shown in the screenshots did not require any javascript.
I added the following styling to my App within API & Code > CSS to provide colouring to the menu.
/* 3-11-17 Set back ground color of tabs */
/* --------- Selected Button */
.kn-button.is-primary{
background-color: #07467c !important
}
/* --------- Available Button */
.kn-button {
background-color: #b6def9 !important
}
NOTE: If you wish to colour a field, you need to inspect the HTML to find the field name. E.g if the field is #field_56
#field_56{
<insert HTML formatting>
}
Hey Justin,
I am not terribly js conversant.
I have this code already in my app
how do i add yours simple bit in for menu coloring ? I tried a few combo inserts but it just hangs when it gets to drawing the menu so obviously its about brackets and placement inside of my code or should it be outside ?
$(document).on('knack-view-render.any', function(event, scene, view, data) {
$("a.kn-view-asset").html("Attachment");
$(".kn-input-address label[for='city']").text("Suburb");
$(".kn-input-address label[for='zip']").text("Postcode");
});
Hi again.
FYI - I had a bit more of play and have settled on this. I didn't strictly need to limit to a view (so no jquery required just yet).
/* 3-11-2017 Set back ground color of tabs */
/* --------- Selected Button */
.kn-button.is-primary{
background-color: #07467c !important
}
/* --------- Available Button */
.kn-button {
background-color: #b6def9 !important
}
Looks like this and does not extend beyond border of Tab Menu (Menu 3 is selected)
Thanks again Justin for the help. Much appreciated.Regards
Adrian
Many thanks Justin. I've been wanting give jquery a try (still a newbie in this area). I'll have try over the weekend and will let you know how I get on.
then you can use jquery to make it only trigger on a particular view.
$(document).on("knack-view-render.view_XXX", function(event, view) {
$('.kn-button .kn-menu').css('background-color', 'yellow');
});
Hi Justin
Many thanks that's awesome! I wanted to retain the selected colour and seemed to have got it working like so,
/* 3-11-2017 Set back ground color of tabs */
.kn-menu {
background-color: #6abdf5 !important
}
.kn-button .kn-menu {
background-color: #07467c !important
}
I would prefer if the colour applied just to a specific set of buttons and didn't extend beyond the buttons but this is still great progress. Many thanks
The pale blue background colour does extend beyond buttons though.
.kn-menu .kn-button {
background-color: yellow !important
}
For on page tabs
Oh. Now I get it. thought you meant the main tabs. I'll take a look at page tabs and get back to you.
Not sure what's going on for ya but that selector works for me on the new theme. See pic.
I've also tried .knlink .knlin3 .kn-link-page and .kn-button. Does not seem to work either ...
Cheers
Adrian
