Styling examples

[Uzlander]

Hello everyone!
I believe i haven't red the (pdf) guide till the end, but i've been googling for some examples or hints on how to style an object/element the css way.
There are config options including some styling (class and css) for an object but not an example to be seen.
Please those who know gimme link or something. Thanx

[kev1n]

Hi,

Just to clarify — are you looking to style an object on specific form, or are you trying to apply styling to a specific object on all forms in general? Let me know, and I can try to point you in the right direction!

[Uzlander]

For now just just single object on a specific form, although i'll probably wish to apply slightly different styles for some labels (say Commentary field) globally. So please point to both examples

[kev1n]

Yes, exactly. To style a single object, you can either:

Select CSS and enter a CSS style, such as background-color:red or multiple styles like background-color:red; color:white

or

Choose Class and enter a class name that you define in the form’s Style field—for example, fancy-button—or a class name that is defined elsewhere, such as in the Header or an external stylesheet.

class.jpg

fancy.png

[Uzlander]

And how about addressing Labels (individual) ?

[kev1n]

Use JavaScript in the form's Custom Code field, e.g.

Code: Select all

function styleObjectLabel(elementId, cssStyle) {
  const labelId = `label_${elementId}`;
  $(`#${labelId}`).css(cssStyle);
}

// Apply red color and bold font to the label for the element with ID "sus_name"
styleObjectLabel("sus_name", {
  color: "red",
  fontWeight: "bold"
});

[Uzlander]

good workaround, thanks kev1n. Ideally it would be good for user be able to apply additional class specificly to Label and thus have such labels styled consistently. I mean here i have some ojects on the form which are read-only (merely informative) and to have them distincty labeled (say a bit smaller fontSize, grayer-color & italic) would be visually nice and somewhat standing out.
This is just an addition to my wishlist for future releases, appreciate it

[kev1n]

Ideally it would be good for user be able to apply additional class specificly to Label and thus have such labels styled consistently. I mean here i have some ojects on the form which are read-only (merely informative) and to have them distincty labeled (say a bit smaller fontSize, grayer-color & italic) would be visually nice and somewhat standing out.

This shouldn't be too difficult:

Setup -> Style:

Code: Select all

.readonly-label {
  font-size: 0.9em;
  color: gray;
  font-style: italic;
}

Setup -> Header example:

Code: Select all

// Functions placed here are available anywhere in nuBuilder Forte.

function styleReadonlyLabels(className = "readonly-label") {
  $("input[readonly], input:disabled, textarea[readonly], textarea:disabled, select:disabled").each(function () {
    const elementId = $(this).attr("id");
    if (elementId) {
      const labelId = `label_${elementId}`;
      $(`#${labelId}`).addClass(className);
    }
  });
}

// Runs after each Edit Form loads
function nuLoadEditGlobal(formId, formCode) {
   styleReadonlyLabels();
}

// Runs after each Browse Form loads
function nuLoadBrowseGlobal(formId, formCode) {

}

// Runs after each Edit and Browse Form loads
function nuOnLoad(formId, formCode) {

}

// Include external resources:

</script>


<script>