Styling bootstrap help-block description color

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
mdannatt
Posts: 13
Joined: 2020-01-27 17:34

Styling bootstrap help-block description color

Post by mdannatt » 2021-07-09 10:23

I have a questionnaire that users need to complete. Each question is placed in the Appgini App Description Area (.help-block).
My problem is that the questionnaire is broken up into 3 sections. Each section header, containing info about the section, is also shown as a read-only description field.

The client has requested that each section HEADER is a color other than the default alert-info blue (the questions themselves stay as is). I can change ALL of the descriptions/help blocks easily easily enough by adding a new class to span.help-block like so:

<script>
$j(document).ready(function() {
$j("span.help-block").addClass("in").find(".alert-info").removeClass("alert alert-info").addClass("alert alert-warning");
});
</script>

But what I can't do, despite my best efforts, is change a single help block to, say, alert.alert-warning without changing all the others. Can someone please help me with this?

Thx so much.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1126
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styling bootstrap help-block description color

Post by jsetzer » 2021-07-09 11:05

* please put code in [ code ] ... [ /code ] tags for better readability.

Could work for the first help-block like this.

Code: Select all

<script>
$j(document).ready(function() {
  $j("span.help-block").addClass("in");
  
  // selector :eq(n) is your friend
  // n is the zero-based index
  $j(".help-block.alert-info:eq(0)").removeClass("alert-info").addClass("alert-warning");
  
});
</script>
Change n for the other help blocks.
Kind regards,
<js />

mdannatt
Posts: 13
Joined: 2020-01-27 17:34

Re: Styling bootstrap help-block description color

Post by mdannatt » 2021-07-09 12:40

Jan, you are an absolute legend, as always.

Thank you very much for this. Works perfectly.

Post Reply