How to convert the description of the field "Un collapsed"?

[nycwebmaster]

Hi,

As you all know that when you write information on the description of a field it will show in the application with a collapsed property and when you click on the icon it will have a blue background.

Is there any way let's say on the CSS that I can override this behavior or maybe a script on the headers extra that I can convert the description property to un-collapsed and instead of a blue background to be white or transparent?

[jsetzer]

Do you mean something like this ...

chrome_HT8AiXSCWu.png (3.45 KiB) Viewed 7766 times

... or even that (without blue info-circle) ...

1xgpkPDfan.png (3.31 KiB) Viewed 7766 times

... instead of the default help-block?

9pOI3J7sUY.gif (26.95 KiB) Viewed 7766 times

Only a small change for example in hooks/header-extras.php:

Code: Select all

<script>
    $j(document).ready(function() {
        $j("span.help-block").addClass("in").find(".alert-info").removeClass("alert alert-info");
        $j(".form-group > label > i.glyphicon-info-sign").hide();
    });
</script>

Best,
Jan

[nycwebmaster]

Thank You Jan!

It works perfect. And by the way I'm one of your customers with the new plugin, again really thank you for your super excellent work!

[artemisia]

This also works for me as described. But I'd like to change the now-displayed help text styles. I've searched some of the css in the bootstrap template I'm using but those classes are for the default hidden text boxes that popup.

[jsetzer]

Not tested, but should work:

file: hooks/header-extras.php

Code: Select all

<script>
    $j(document).ready(function() { $j("span.help-block").addClass("in").find(".alert-info").removeClass("alert alert-info").attr("appginihelper-custom-help-block"); $j(".form-group > label > i.glyphicon-info-sign").hide(); });
</script>

<style>
.appginihelper-custom-help-block {

    /* your css styles here ----> */
    
    background-color: yellow;
    color: black;
    border: 1px solid grey;
    padding: 4px;
    
    /* <------ */
}
</style>

If you cannot see the changes, add the directive !important before ";" like this:

Code: Select all

...

    background-color: yellow !important;
    
...

[artemisia]

Jan, It seems that the custom styling isn't being applied, after I added your code.
Other suggestions?
thanks, Bob

[jsetzer]

Did you insert those !important flags between style value and ";"?

[artemisia]

yes I did, on all the style lines. also cleared the cache before refreshing the screen, and verified that server was using the edited copy of file. Double-checked for syntax errors. I'm new to CSS coding so at the moment I don't have a good idea of where to look for problems.
~Bob

[jsetzer]

I'm back at the home office now. Gonna check this later today. Stay tuned.

[jsetzer]

My mistake. I've successfully tested the following code:

Code: Select all

<script>
    $j(document).ready(function() { $j("span.help-block").addClass("in").find(".alert-info").removeClass("alert alert-info").addClass("appginihelper-custom-help-block"); $j(".form-group > label > i.glyphicon-info-sign").hide(); });
</script>

<style>
.appginihelper-custom-help-block {

    /* your css styles here ----> */
    background-color: rgba(255,255,0,0.1);
    color: black;
    border: 1px solid silver;
    padding: 4px;
    border-radius: 2px;
    /* <------ */
}
</style>

Default

chrome_qDh5ocpA0S.png (965 Bytes) Viewed 7547 times

chrome_bVcUGF8hvB.png (2.46 KiB) Viewed 7547 times

Modified

chrome_pFaSECaPZU.png (2.2 KiB) Viewed 7547 times

[artemisia]

works now, got what I need. thanks again! ~Bob

[artemisia]

Jan, another related question. Would it be possible to (easily) wrap your formatting code in a conditional that selects one or more fields? On my Detail Views some or most fields don't need their Help Hints always displayed.
~Bob

[jsetzer]

Just remove the description if you don't need it.