Jump to content
DevFuse Forums
  • Unable to Make Forms with White Background and Black Type


    Ken Grubb
    • Pending IP.Board Version: IP.Board 4.4.x

    In the form instructions section for setting up a form, it offers the choice of a white background. Which would imply a black font color.

    But when I choose it, I get a black background and a white font.

    In the next version, would you please fix this so I can have a white background with black font color when I choose the white background option?

    Many thanks for this application, it's excellent!

    Ken Grubb



    User Feedback

    Recommended Comments

    It looks like by default the "no message" style is actually dark, so that's why the font color is white. You'll probably need to patch this manually.

    Open acp > theme editor > form > front > logs > create

    Find:

    <div class='ipsMessage ipsMessage_{{if isset( $container->_options->rules_color )}}{expression="$container->_options->rules_color"}{{else}}info{{endif}}'>

    Replace With:

    <div class='ipsMessage ipsMessage_{{if isset( $container->_options->rules_color )}}{expression="$container->_options->rules_color"}{{else}}info{{endif}}' {{if isset( $container->_options->rules_color ) AND $container->_options->rules_color == 'none'}}style='color: #000;'{{endif}}>

    Save.

    Share this comment


    Link to comment
    Share on other sites

    Hi Michael,

    Sorry I didn't catch this, I forgot to subscribe to this.

    I added the patch as you explained. The background is now white, but the text is also still white.

    Also, the form instructions have completely disappeared. Not just because of white text, the form instructions are completely gone. Have a look at the attached screenshot... There is supposed to be a few paragraphs of instructions (in black) above the form fields, but they're no longer there.

    forms-screen-capture.png.thumb.jpg.215472800684bafe15a096fb94c277c4.jpg

    Share this comment


    Link to comment
    Share on other sites

    Sorry Michael. I must have... because now I have a different effect.

    I made the change again, then went to one of the forms and selected white for the background color, then clicked "Save."

    Then I reloaded the form. The instructions have reappeared, but now the background is a dark grey and the text is black.

    Note: The H2 headings are blue, since I have them set to be blue in custom.css, if that makes any difference.

    Here's the code after I changed it, copy and pasted it below:

    {{if \IPS\Dispatcher::i()->application->directory === 'form'}}
        <ul class="ipsToolList ipsToolList_horizontal ipsResponsive_hidePhone ipsClearfix">
            {{if member.group['g_fs_view_logs']}}
                <li class='ipsToolList_primaryAction'>
                    <a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" href="{url="app=form&controller=logs" seoTemplate="form_logs"}">
                        {lang="view_logs"}
                    </a>
                </li>
            {{endif}}
            {{if !settings.fm_require_form}}
                <li class='ipsToolList_primaryAction'>
                    <a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" href="{url="app=form&do=formlist" seoTemplate="form_list"}">
                        {lang="show_forms"}
                    </a>
                </li>
            {{endif}}
        </ul>
    {{endif}}
    
    {{if \IPS\Dispatcher::i()->application->directory === 'form'}}
        {template="pageHeader" group="global" app="core" params="$container->_title"}
    {{else}}
    
    {{endif}}
    
    {{if $container->formTranslate( 'rules' )}}
    
        <div class='ipsMessage ipsMessage_{{if isset( $container->_options->rules_color )}}{expression="$container->_options->rules_color"}{{else}}info{{endif}}' {{if isset( $container->_options->rules_color ) AND $container->_options->rules_color == 'none'}}style='color: #000;'{{endif}}>
          
        	{$container->formTranslate( 'rules', TRUE )|raw}
        </div> 
    {{endif}}
    
    <div class='ipsBox ipsPad'>
        <div class='ipsType_normal ipsType_richText'>
            {$form|raw}
        </div>
    </div>

    Here's the effect:

    1805929589_Screenshot2021-04-01164726.thumb.png.894336becac4b2d23533b4035efdd257.png

     

    Share this comment


    Link to comment
    Share on other sites

    Were there any customization to the template before you applied this change? Can you try reverting it and then see if it changes the font color? Otherwise you could change #000 to #fff to get a white font color.

    Share this comment


    Link to comment
    Share on other sites


    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


  • Status Definitions

    Pending = We are still working on this report.

    Fixed = The issue has been fixed and the resolution will be available in the next version.

    Closed = Feedback or opinion better posted on our forum for discussion. Also for reports we cannot reproduce or need more information. In this case just add a comment and we will review it again.

     

×
×
  • Create New...