Browseline height

[Rene Simons]

Hi Bruce,

I recently upgraded to NT12 (07) and noticed that the line height in my browses is rather big so there's a lot of white above and below every line
I think this is because the buttons are somewhat big.
Is there a way to make the buttons smaller by default?

René

[Rene Simons]

Hi,

I found the themer and will try to find a solution there first.
In the mean time one question:
When I save the theme I have created, is it saved in the Themes folder?
What happens when a new build of NetTalk is published and installed?

Rene

[Bruce]

Hi Rene,

Given that this question is theme related, and given that different themes have different line heights, it might be worth you mentioning which theme you are using

>> I found the themer and will try to find a solution there first.

There isn't a setting in there to change browse line height. (although sounds like a useful setting.)

>> When I save the theme I have created, is it saved in the Themes folder?

If you create a new theme, then yes, it gets created in the themes folder. If you edit a theme there then it's also saved in that themes folder.

<< What happens when a new build of NetTalk is published and installed?

If your new theme is based on an existing theme, and you choose a name I don't have (or will ever have) then nothing will happen when you install a clarion update. This is both good and bad. Good that it doesn't change your custom theme, bad in the sense that any fine-tuning I do to the original theme won't carry into your theme copy. that won't be an issue in the long run, but in the short term I'm making small adjustments here and there.

Cheers
Bruce

[Rene Simons]

Ok Bruce,

I am currently using PalmTree.
I like the colorsettings.
BTW I checked out your NT12 presentation and I think the Themer, combined with the fact that the customer can
run along in that stage of tweaking the style, is a real match winner.

Rene

[Bruce]

Some of the line-height comes from the row padding (in nettalk-ui.css);

.nt-browse-grid-cell, .nt-browse-flex-cell {
    padding: 0.2em 0.5em 0.2em 0.5em;
}

so if you add (to your custom.css)

.nt-browse-grid-cell, .nt-browse-flex-cell {
    padding: 0.02em 0.5em 0.02em 0.5em;
}

you'll reduce the line height.

you can change the size of small buttons;
.nt-small-button {
    height:1.5em;
    width:1.6em;
}

and you can adjust the icon size - this is done in the nt-theme.css file;

in nt-theme.css, set the --icons-button-scale. This is as a fraction of 32pixels. For example, for 16 pixel icons use.

--icons-button-scale: 0.50;

[Rene Simons]

Thanks,

Now I have one more hurdle:
In the browse I have a Checkbox (String with checkbox EIP) button which is still too high and therefore causing my lines to be too high. And it looks like I cannot change its properties. If I could, that would be the solution.

I tried to use the bare checkbox but that is just awfull and it seems like there is something wrong with its styling.
It is twice as high as it is wide. If that could be fixed I would be very happy..

So the next thing I tried was a inline button with a conditioned check-icon.
I have the icon conditioned by using a CHOOSE(conditionfield=1, 'check', '') and use the client side code (on click) to toggle the conditionfield value and thus the button appearance.
The button without the check-icon looks fine but the button with the check-icon messes everything up again.

For progress sake, finally I went for plain text (YES/NO) in stead of a button of some sort.
To change the value I have to update the conditionfield using the update form.

I like a buttoned option better though.

I hope you can give me some useful tips.

Cheers,
Rene

[Bruce]

perhaps put both the button checkbox, and the bare checkbox in the browse, and post a screen-shot of what you are seeing.

>> And it looks like I cannot change its properties.

That makes no sense at all. It's all CSS, and clearly you can both override, and change, the CSS. So this might be something to work though in a webinar so you can see the process.

Cheers
Bruce

[Rene Simons]

Hi Bruce,

I did what you asked and created a document which is hereby attached.
Please be aware that all I wrote/write is not critisism. I absolutely love the way
NetTalk is evolving and I have the utmost admiration for what you have accomplished here.
I am still sad about the fact that Covid spoiled my trip to SA. I was very much looking forward to
meeting you all.

Cheers,
Rene

[Bruce]

Hi Rene,

well hopefully you'll still come when the event happens - it's currently penciled in for last weekend in October. Obviously that depends on vaccine roll outs, travel permissibility and so on.

I don't see the same as you with the checkboxes in the base theme, so perhaps the next step is to make a small example (tweak one of the shipping examples) and include your custom css. hopefully I can duplicate and then guide...

As an aside - if the problem you are actually having is with the footer, then that's really the thing we should be looking at...

Cheers
Bruce

[Rene Simons]

Ok,
I’ send my question in and be there.
It is the Palmtree theme I am using, not the Base.
I will try the base theme anyway.
My custom.css only contains the tweeks you advised in an earlier response.

Cheers,
Rene

[Bruce]

Hi Rene,

Thanks for the example - there's a lot of little details that you have different to my test app, so that was really helpful.
I've refined the themes a bit for the next build, and added a bit to the themer docs about what setting you might want to change to make the browse lines skinnier.

Regarding the footer - for now go to the WebServer procedure, NetTalk Extension, General Tab and tick on "Wrap Content with ContentBody Div"

Cheers
Bruce

[Rene Simons]

Ok Bruce,

That’s great. I will make the adjustments for the footer and wait for the update for the other issues.
Thanks a lot.

Cheers,
René

[Rene Simons]

Hi Bruce,
I installed 12.09 and I think I can work with that.
Thanks
René

[Bruce]

I'm always looking for any reports in any of the new themes where something might be wrong.
So feel free to report anything you see.

cheers
Bruce

[Rene Simons]

Well, since you're asking....

In the Palmtree theme the browse lines look a bit stacked together.
I think that is because the buttons exactly fit the line height.
I guess I can fix that by tweaking the button size a bit in the css definitions?
I will get to you about this during the webinar this afternoon.
I have a question about tweaking CSS in general.

Cheers,
René