Home Forums Porto Template modal dialog dark theme

This topic contains 7 replies, has 2 voices, and was last updated by  Support2 1 week ago. This post has been viewed 53 times

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10029731

    tlindsay
    Participant

    I am adding a popup dialog to my website using code from the sample. It all works correctly except that is showing in the light theme (instead of the dark theme that I am using for my website).

    How can I make this dialog match my dark template?

    <div class=”modal fade” id=”formModal” tabindex=”-1″ role=”dialog” aria-labelledby=”formModalLabel” aria-hidden=”true”>
    <div class=”modal-dialog”>
    <div class=”modal-content”>
    <div class=”modal-header”>
    <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button>
    <h4 class=”modal-title” id=”formModalLabel”>Large Modal Title</h4>
    </div>
    <div class=”modal-body”>
    <form id=”demo-form” class=”form-horizontal mb-lg” novalidate=”novalidate”>
    <div class=”form-group mt-lg”>
    <label class=”col-sm-3 control-label”>Name</label>
    <div class=”col-sm-9″>
    <input type=”text” name=”name” class=”form-control” placeholder=”Type your name…” required/>
    </div>
    </div>
    <div class=”form-group”>
    <label class=”col-sm-3 control-label”>Email</label>
    <div class=”col-sm-9″>
    <input type=”email” name=”email” class=”form-control” placeholder=”Type your email…” required/>
    </div>
    </div>
    <div class=”form-group”>
    <label class=”col-sm-3 control-label”>URL</label>
    <div class=”col-sm-9″>
    <input type=”url” name=”url” class=”form-control” placeholder=”Type an URL…” />
    </div>
    </div>
    <div class=”form-group”>
    <label class=”col-sm-3 control-label”>Comment</label>
    <div class=”col-sm-9″>
    <textarea rows=”5″ class=”form-control” placeholder=”Type your comment…” required></textarea>
    </div>
    </div>
    </form>
    </div>
    <div class=”modal-footer”>
    <button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
    <button type=”button” class=”btn btn-primary”>Save Changes</button>
    </div>
    </div>
    </div>
    </div>


    #10029736

    Support2
    Keymaster

    Hello,

    We did a test and the modals are into correct dark color when we set the dark layout.
    Can you please send an online link with your website for us ? So we can inspect your code and discover where is the issue.

    Kind Regards,

    Rodrigo.


    #10029738

    tlindsay
    Participant

    Sure, here it is:
    https://www.motivewave.com


    #10029741

    Support2
    Keymaster

    Hello,

    Thanks for the link.
    We tried to search between your website pages where is the modal but not find it.

    Can you please specify for us in wich page the modal is added ?

    Kind Regards,

    Rodrigo.


    #10029743

    tlindsay
    Participant

    Hi Rodrigo,

    Sorry, I think I misunderstood what you needed.
    I don’t normally publish broken or unfinished code on our website.

    Here is a link to a page that demonstrates the problem:
    https://motivewave-hrd.appspot.com/modal_test.htm

    I copied and pasted the example from your shortcodes section for “Launch Form Modal”
    It shows the dialog in the light theme, even though my website used the dark theme.


    #10029745

    Support2
    Keymaster

    Hello,

    No worries, thanks.
    We saw that the Porto version of your website is very old (3.1.1). On this version the modals don’t are affected by the dark mode. Update the template version in your case will not be an good idea, since will be needed to change a lot of lines of code.

    Our suggestion in that case is add the code below in (css/custom.css):

    body.dark .modal-content {
    	background-color: #1e2229;
    }
    
    body.dark .modal-content .modal-header,
    body.dark .modal-content .modal-footer {
    	border-color: #424242;
    }
    
    body.dark .form-control {
    	background-color: #282d36;
    	border-color: #282d36;
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029748

    tlindsay
    Participant

    Awesome, thank you so much!
    I really appreciate you providing a work around for an older version.

    Just one small thing, the X button in the top right corner is still the light version.
    Is there a workaround for that?


    #10029749

    Support2
    Keymaster

    Hello,

    Oh your are right I missed this button. Sorry.

    Here is the code you need:

    body.dark .modal-header .close {
    	color: #FFF;
    }

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 8 posts - 1 through 8 (of 8 total)