Page 1 of 1
Browse Form - CSS
Posted: Sat Oct 16, 2021 10:06 am
by Mr71
I wish I could manage the font characteristics in the Browse Form. For example if I wanted another font size ... another color, put in bold a field ... How to do it!? .. In the Edit Form I understood how to do it... but in the Browse Form!? Which CSS string!? Thanks in advance to those who want to help me ...
Marco
Re: Browse Form - CSS
Posted: Sat Oct 16, 2021 10:24 am
by kev1n
Hi Marco,
Would you like to change all Browse Forms or just a specific one?
Re: Browse Form - CSS
Posted: Sat Oct 16, 2021 11:32 am
by Mr71
Hi Kevin...
just a specific one...
Re: Browse Form - CSS
Posted: Sat Oct 16, 2021 3:14 pm
by kev1n
There are examples both in the Code Library and in this forum. E.g.
https://github.com/nuBuilder/nuBuilder- ... formatting
Re: Browse Form - CSS
Posted: Sat Oct 16, 2021 7:32 pm
by Mr71
my goal is to change the style of the font, without particular operations on the fields ... non-conditional operations ... but I don't know where to look...
Re: Browse Form - CSS
Posted: Sat Oct 16, 2021 10:10 pm
by Mr71
This Is an example ...
Re: Browse Form - CSS
Posted: Sun Oct 17, 2021 10:31 am
by kev1n
To change a column's color, add this JavaScript to the form's Custom Code:
Code: Select all
function browseColumnColor(column, color) {
$('[data-nu-column="'+column+'"]').each(function(index) {
$(this).css("color", color);
});
}
if (nuFormType() == 'browse') {
browseColumnColor(2, 'grey'); // 3rd column grey
}
To increase the font size of a column, add the following class under Setup -> Header between the <style> tags:
Code: Select all
.nuBrowseTableLarger {
font: 16px "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif!important;
}
Next, add this JavaScript to the form's Custom Code:
Code: Select all
function browseColumnFont(column, _class) {
$('[data-nu-column="'+column+'"]').each(function(index) {
$(this).addClass(_class);
});
}
if (nuFormType() == 'browse') {
browseColumnFont(0, 'nuBrowseTableLarger'); // Set a larger font in the first column
}
Re: Browse Form - CSS
Posted: Sun Oct 17, 2021 8:32 pm
by Mr71
thanks Kevin, works great!!!!