Call <link rel=“stylesheet” href=“”> On A Specific Part Of My Page Without Overriding My Current CSS Style

Question

I am trying to call <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> in the header.php that is linked to my post_form page for the jQuery file uploader that is on the post_form without it overriding the css for the rest of the page. I have tried removing the left table cell, attempted to float the file uploader left, and tried to extend the width of the file uploader to 100% to no avail.

the code update is

 <tr> <th>Upload:</th> <td width="250"> <!-- The global progress state --> <div class="fileupload-progress fade" style="display:none"> <!-- The global progress bar --> <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> <!-- The extended global progress state --> <div class="progress-extended">&nbsp;</div> </div> </div> <!-- The table listing the files available for upload/download --> </div> <table role="presentation"><tbody class="files"><textarea cols="60"></textarea></tbody></table> </form> <!-- The blueimp Gallery widget --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> </td> <td> <form> <label for="theme-switcher">Theme:</label> <select id="theme-switcher" class="pull-right"> <option value="black-tie">Black Tie</option> <option value="blitzer">Blitzer</option> <option value="cupertino">Cupertino</option> <option value="dark-hive" selected>Dark Hive</option> <option value="dot-luv">Dot Luv</option> <option value="eggplant">Eggplant</option> <option value="excite-bike">Excite Bike</option> <option value="flick">Flick</option> <option value="hot-sneaks">Hot sneaks</option> <option value="humanity">Humanity</option> <option value="le-frog">Le Frog</option> <option value="mint-choc">Mint Choc</option> <option value="overcast">Overcast</option> <option value="pepper-grinder">Pepper Grinder</option> <option value="redmond">Redmond</option> <option value="smoothness">Smoothness</option> <option value="south-street">South Street</option> <option value="start">Start</option> <option value="sunny">Sunny</option> <option value="swanky-purse">Swanky Purse</option> <option value="trontastic">Trontastic</option> <option value="ui-darkness">UI Darkness</option> <option value="ui-lightness">UI Lightness</option> <option value="vader">Vader</option> </select> </form><!-- The file upload form used as target for the file upload widget --> <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"> <!-- Redirect browsers with JavaScript disabled to the origin page --> <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="fileupload-buttonbar"> <div class="fileupload-buttons"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="fileinput-button"> <span>Add files...</span> <input type="file" name="files[]" multiple> </span> <button type="submit" class="start">Start upload</button> <button type="reset" class="cancel">Cancel upload</button> <button type="button" class="delete">Delete</button> <input type="checkbox" class="toggle"> <!-- The global file processing state --> <span class="fileupload-process"></span> </div> <!-- The global progress state --> <div class="fileupload-progress fade" style="display:none"> <!-- The global progress bar --> <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div> <!-- The extended global progress state --> <div class="progress-extended">&nbsp;</div> </div> </div> <!-- The table listing the files available for upload/download --> <table role="presentation"><tbody class="files"></tbody></table> </form> <br> <!-- The blueimp Gallery widget --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> <!-- The template to display files available for upload --> <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload fade"> <td> <span class="preview"></span> </td> <td> <p class="name">{%=file.name%}</p> <strong class="error"></strong> </td> <td> <p class="size">Processing...</p> <div class="progress"></div> </td> <td> {% if (!i && !o.options.autoUpload) { %} <button class="start" disabled>Start</button> {% } %} {% if (!i) { %} <button class="cancel">Cancel</button> {% } %} </td> </tr> {% } %} </script> <!-- The template to display files available for download --> <script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download fade"> <td> <span class="preview"> {% if (file.thumbnailUrl) { %} <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a> {% } %} </span> </td> <td> <p class="name"> <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a> </p> {% if (file.error) { %} <div><span class="error">Error</span> {%=file.error%}</div> {% } %} </td> <td> <span class="size">{%=o.formatFileSize(file.size)%}</span> </td> <td> <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button> <input type="checkbox" name="delete" value="1" class="toggle"> </td> </tr> {% } %} </script> </td> </tr> 

the fileuploader now shows with the css styles as it is supposed to, but it only appears when on the right side of my post_form

this is how the fileuploader shows when i add audio or video files. it works when it is placed in the right cell of my post_form, but not on the left which is where I would like it to show.

Answer 1

The most spesific css selector will be the one choosen, if the selectors are equal the last selector will be chosen

so

body #divID{

}

will override

#divID{

}

The above selector is more sepsific than the last one. if they where the same, the last one would be choosen. I sugest you load you're css last, and override bootstrap in you're css file