Dark Mode Form Stil

  • Resolved pexel

    (@pexel)


    2 years, 1 month ago

    Hello;
    I designed a special form, there is no problem in light mode, but in dark mode it directly takes the site styles. I want it to receive the style fonts I specially designed. How can we fix this?
    Thanks
    Link

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author codepeople

    (@codepeople)

    2 years, 1 month ago

    Hello @pexel

    Please enter the CSS rules with the !important modifier. Ex.

    <strong><font style="color:RoyalBlue !important;">Gün:</font></strong>

    Best regards.

    Thread Starter pexel

    (@pexel)

    2 years, 1 month ago

    When the selector area is clicked in dark mode, the font color does not appear again. What area is this?

    I have a cp_cff_custom #fbuilder style, what should I do next to write the font color in this field? I have no other questions, thank you

    Plugin Author codepeople

    (@codepeople)

    2 years, 1 month ago

    Hello @pexel

    You entered the tags directly in the fields labels.

    However, I see you created a custom template and entered the style definitions with !important modifier, and the new CSS rules are being assigned to the fields in light and dark modes.

    Best regards.

    Thread Starter pexel

    (@pexel)

    2 years, 1 month ago

    Yes, we created a special template. The only problem now is that when going up and down in the dropdown menu in dark mode, the background fonts are not visible. I need to write some CSS in this area, but which area is it?

    It should be something like cp_cff_custom #fbuilder label Do you have any ideas? I only have that space left.

    Plugin Author codepeople

    (@codepeople)

    2 years, 1 month ago

    Hello @pexel

    I tested your form and all texts are visible in dark mode. Please look at the screenshot:

    What text is not visible exactly?

    Best regards.

    Thread Starter pexel

    (@pexel)

    2 years, 1 month ago

    hi;

    Plugin Author codepeople

    (@codepeople)

    2 years, 1 month ago

    Hello @pexel

    Please enter the style definition:

    .cp_cff_custom #fbuilder select option{color: #f90f2a !important;}

    Best regards.

    Thread Starter pexel

    (@pexel)

    2 years ago

    Thank you for your excellent support. I have one last question, so as not to disturb you any further.

    Our calculate button is active, but we configured it according to a code you provided before. Our code is as follows;

    if (fbuilderjQuery(this.form).valid()) {
        my_counter = 0,
        my_interval = setInterval(function(){
            jQuery(".counter").html("Hesaplıyoruz : " + my_counter + " saniye");
            if(my_counter == 0){
                clearInterval(my_interval);
                jQuery(".counter").html("");
                EVALEQUATIONS();
                if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
                jQuery('html, body').animate({
                    scrollTop: jQuery('[data-id="pex32pe87"]').offset().top
                }, 2000);
                }
            }
            my_counter--;
        }, 1000);
  }

    There is an error here. When you click calculate twice, it starts counting down. Can we prevent this?

    We also print a results screen as you know. In this first stage, we want it to be loaded invisible.

    We want the result screen to load when the calculate button on the form is pressed.
    Is something like this possible?
    If you solve this, we will have a timeless form structure.

    Thanks

    • This reply was modified 2 years ago by pexel.
    Plugin Author codepeople

    (@codepeople)

    2 years ago

    Hello @pexel

    As part of the onclick event you should check a global variable, to know if the button was pressed previously. Something like:

    if(typeof button_pressed != 'undefined') return;
button_pressed = true;

    And you must remove the variable when counter reaches zero:

    delete button_pressed;

    It ensures the button is pressed only once until the counter finalize.

    Regarding your second question about displaying some form fields when printing the form but not on the web, you can assign a custom class name to these fields, ex. fields-for-printing

    The class names are assigned to the fields through their “Add CSS Layout Keywords” attributes.

    Then you can enter the following style definition through the “Customize Form Design” attribute in the “Form Settings” tab:

    
.fields-for-printing{display:none !important;}
@media print{
.fields-for-printing{display:block !important;}
}

    Please note the support does not include developing the users’ projects. Your questions are not about the plugin but the custom behavior of your form. We can offer you a custom coding service directly from the plugin website for additional questions about these subjects. Contact Us.

    Best regards.

    Thread Starter pexel

    (@pexel)

    2 years ago

    In this case, is it possible for you to share the final version of the onclick event edited with my code? I don’t want to create a complicated situation. I will get back to you regarding the second question since it is commercial. Thanks

    Plugin Author codepeople

    (@codepeople)

    2 years ago

    Hello @pexel

    The custom behavior is the button code, not the CSS class definitions. You are requesting us to implement the custom behavior of your buttons and counters as part of the plugin support. But that is specific to your project, not the plugin.

    Best regards.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Dark Mode Form Stil’ is closed to new replies.