javascriptjqueryhtmladobe-brackets

How do I properly add custom CSS to a Bootstrap Modal


I am writing an Extension for the Text-Editing software called Brackets, Brackets uses Bootstrap to style the Modal and CSS. I am trying to add custom CSS to the Modal so that I can reformat, move and resize different elements on the Modal such as the Checkboxes and dropdown menus to make it look cleaner.

Everytime I attempt to add CSS to the Modal by either using tags built in or a linked CSS the Modal doesn't load correctly. The modal loads and then the whole screen gets a opaque black film over it, and the Modal becomes un-useable.

So I can deduct that I am not adding the CSS correctly as the Modal corrects the behavior when I remove the CSS I added.

How do I add custom CSS styling to this Bootstrap Modal?

<div id='templates_modal' class='template modal'>
<div class='modal-header'>
    <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span></button>
    <h1 class='dialog-title'>{{TITLE_H1}}</h1>
</div>
<p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>
<p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{CONTENT_ERROR}}</p>
<p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'>{{NO_FILE_OPEN_ERROR}}</p>
<div class='modal-body'>
    <h4>{{LANGUAGE_SELECTION}}</h4>
    <p>{{LANGUAGE_DESCRIPTION}}</p>
    <select id='languages'>
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='english'>en</option>
        <option value='german'>de</option>
        <option value='spanish'>es</option>
        <option value='french'>fr</option>
        <option value='italian'>it</option>
        <option value='chinese'>zh-cn</option>
    </select>
    <h4>{{CHARSET_SELECTION}}</h4>
    <p>{{CHARSET_DESCRIPTION}}</p>
    <select id="charset">
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='utf8'>UTF-8</option>
        <option value='utf16'>UTF-16</option>
    </select>

    <h4>{{TITLE_H4}}</h4>
    <select id="doctype">
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='html5'>HTML5</option>
        <option value='html4loose'>HTML4 Transitional</option>
        <option value='html4strict'>HTML4 Strict</option>
        <option value='xhtml1loose'>XHTML 1 Trasitional</option>
        <option value='xhtml1strict'>XHTML 1 Strict</option>
        <option value='xhtml11'>XHTML 1.1</option>
    </select>

    <h4>{{SECTION_TEMPLATES}}</h4>
    <p>{{SECTION_TEMPLATES_DESC}}</p>
    <ul class="checkbox-grid" id="libraries">
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>' id="angularjs" value="angularjs" /><label for="angularjs"> Angular JS | 1.3.15</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>' id="angularmaterial" value="angularmaterial" /><label for="angularmaterial"> Angular Material | 0.10.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>' id="dojo" value="dojo" /><label for="dojo"> Dojo | 1.10.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>' id="extcore" value="extcore" /><label for="extcore"> Ext Core | 3.1.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' id="jquery111" value="jquery111" /><label for="jquery111"> jQuery | 1.11.3</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>' id="jquery214" value="jquery214" /><label for="jquery214"> jQuery | 2.1.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>' id="jquerymobile" value="jquerymobile" /><label for="jquerymobile"> jQuery Mobile | 1.4.5</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>' id="jqueryui" value="jqueryui" /><label for="jqueryui"> jQUery UI | 1.11.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>' id="mootools" value="mootools" /><label for="mootools"> MooTools | 1.5.1</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>'  id="prototype"value="prototype" /><label for="prototype"> Prototype | 1.7.2.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>' id="script_aculo_us" value="script_aculo_us" /><label for="script_aculo_us"> script.aculo.us | 1.9.0 (Requires Prototype)</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>' id="spf" value="spf" /><label for="spf"> SPF | 2.2.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>' id="swfobject" value="swfobject" /><label for="swfobject"> SWFObject | 2.2</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>' id="threejs" value="threejs" /><label for="threejs"> three.js | r69</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>' id="webfontloader" value="webfontloader" /><label for="webfontloader"> Web Font Loader | 1.5.18</label></li>
    </ul>
    <div class='modal-footer'>
        <a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'>{{GENERATE_BUTTON}}</a>
        <a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'>{{CANCEL_BUTTON}}</a>
    </div>
</div>
</div>

Solution

  • The modal loads, and then the whole screen gets a opaque black film over it, and the Modal becomes un-useable.

    You are missing 2 div <div class="modal-dialog"> and <div class='modal-content'>

    without <div class="modal-dialog"> and <div class='modal-content'>

    Fiddle

    and with

    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#templates_modal">Open Modal</button>
    <div id='templates_modal' class='template modal'>
    <div class="modal-dialog">
        <div class='modal-content'>
        <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span>
            </button>
             <h1 class='dialog-title'>{{TITLE_H1}}</h1>
    
        </div>
        <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>
        <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{CONTENT_ERROR}}</p>
        <p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'>{{NO_FILE_OPEN_ERROR}}</p>
        <div class='modal-body'>
             <h4>{{LANGUAGE_SELECTION}}</h4>
    
            <p>{{LANGUAGE_DESCRIPTION}}</p>
            <select id='languages'>
                <option value=''>{{SELECT_LABEL}}</option>
                <option value='english'>en</option>
                <option value='german'>de</option>
                <option value='spanish'>es</option>
                <option value='french'>fr</option>
                <option value='italian'>it</option>
                <option value='chinese'>zh-cn</option>
            </select>
             <h4>{{CHARSET_SELECTION}}</h4>
    
            <p>{{CHARSET_DESCRIPTION}}</p>
            <select id="charset">
                <option value=''>{{SELECT_LABEL}}</option>
                <option value='utf8'>UTF-8</option>
                <option value='utf16'>UTF-16</option>
            </select>
             <h4>{{TITLE_H4}}</h4>
    
            <select id="doctype">
                <option value=''>{{SELECT_LABEL}}</option>
                <option value='html5'>HTML5</option>
                <option value='html4loose'>HTML4 Transitional</option>
                <option value='html4strict'>HTML4 Strict</option>
                <option value='xhtml1loose'>XHTML 1 Trasitional</option>
                <option value='xhtml1strict'>XHTML 1 Strict</option>
                <option value='xhtml11'>XHTML 1.1</option>
            </select>
             <h4>{{SECTION_TEMPLATES}}</h4>
    
            <p>{{SECTION_TEMPLATES_DESC}}</p>
            <ul class="checkbox-grid" id="libraries">
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>' id="angularjs" value="angularjs" />
                    <label for="angularjs">Angular JS | 1.3.15</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>' id="angularmaterial" value="angularmaterial" />
                    <label for="angularmaterial">Angular Material | 0.10.0</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>' id="dojo" value="dojo" />
                    <label for="dojo">Dojo | 1.10.4</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>' id="extcore" value="extcore" />
                    <label for="extcore">Ext Core | 3.1.0</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' id="jquery111" value="jquery111" />
                    <label for="jquery111">jQuery | 1.11.3</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>' id="jquery214" value="jquery214" />
                    <label for="jquery214">jQuery | 2.1.4</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>' id="jquerymobile" value="jquerymobile" />
                    <label for="jquerymobile">jQuery Mobile | 1.4.5</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>' id="jqueryui" value="jqueryui" />
                    <label for="jqueryui">jQUery UI | 1.11.4</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>' id="mootools" value="mootools" />
                    <label for="mootools">MooTools | 1.5.1</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>' id="prototype" value="prototype" />
                    <label for="prototype">Prototype | 1.7.2.0</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>' id="script_aculo_us" value="script_aculo_us" />
                    <label for="script_aculo_us">script.aculo.us | 1.9.0 (Requires Prototype)</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>' id="spf" value="spf" />
                    <label for="spf">SPF | 2.2.0</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>' id="swfobject" value="swfobject" />
                    <label for="swfobject">SWFObject | 2.2</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>' id="threejs" value="threejs" />
                    <label for="threejs">three.js | r69</label>
                </li>
                <li>
                    <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>' id="webfontloader" value="webfontloader" />
                    <label for="webfontloader">Web Font Loader | 1.5.18</label>
                </li>
            </ul>
            <div class='modal-footer'> <a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'>{{GENERATE_BUTTON}}</a>
     <a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'>{{CANCEL_BUTTON}}</a>
            </div>
         </div>
         </div>
        </div>
    </div>
    

    Fiddle

    Use bootstrap predefined classes to style and grid system to format the form inside modal

    Fiddle

    And you can add custom css as like you are doing inline style <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p> or put custom selectors and add those in style sheet, preferable is adding custom selector because later you can adjust modal content according to screen size with media queries.

    e.g

    <p class="nodisplay" id='templates_warning'>{{DOCTYPE_ALERT}}</p>
    

    and in style sheet

    .nodisplay {
        display: none;
        color: red;
        font-weight: bold;
    }
    

    Fiddle