how to use Jquery UI bootstrap theme - html

I am trying to style the datatable just like twitter bootstrap and I came across twitter bootstrap jquery ui theme. After extracting, there were 4 files inside the css folder. These are
jquery.ui.1.9.2.ie.css
jquery.ui.1.10.0.ie.css
jquery-ui-1.9.2.custom.css
jquery-ui-1.10.0.custom.css
I want to know which files should be inlcuded and what is the significance of each file.
I also do find that while implementing jquery-ui-1.10.0.custom.css only file, the dialog boxes header is not properly aligned. Is dialog boxes not properly aligned in the default theme?

Include both the files & your alignment issue will be gone, i think 1.10.0. seems to be the latest version. So include
jquery.ui.1.10.0.ie.css
jquery-ui-1.10.0.custom.css
Also open these both files in an editor to view and understand the alignment and design.

Related

Use bootstrap but ignore their containers (classes)

For a project, I have to use a Modal (pop up) which I prefer to use Bootstrap for.
However the project (which was original built with their own custom code so no bootstrap), when I do add the bootstrap links (into the head the script, and css links etc) into it, it now changes the my own .container classes to Bootstrap their values...
How can I ignore those?
Go here
https://getbootstrap.com/docs/3.4/customize/
Remove everything except modal
then click Compile and Download
It's bootstrap 3.4 but I don't think modal component went through a lot of changes.

How to create a css navbar?

I'm using Django to handle my templates. From the picture I am trying to explain what I want in the web page. For convenience I have given the number for the blocks in the picture. I have created blocks 3,4 5,6, and 7 in one .html file.
I actually want navbar1 and navbar2 to display in every page of my project, and that's why I have to create one separate .html file for each. The problem is that I'm not able to apply two navbars in one html file. I also tried with the sidebar (for navbar2), but have faced some issues.
Dropdown button doesn't work on the sidebar and,
When I reload the page, the menu of the side bar will display first and then the sidebar will overwrite the menu and then visualize properly.
Please suggest to me how I can design the page for navbar1 and navbar2 in one html file.
Creating a base.html template that all other templates inherit/extend from should do the trick. Here's a website post going in depth upon how to accomplish this: https://tutorial.djangogirls.org/en/template_extending/

Icons for Drop-down Menu and Sidebar Minimizer disappeared

So I'm not the most familiar with HTML, but I know enough to make very minor tweaks.
I had this issue all of a sudden where I updated my github page website, and a few icons were missing.
Sidebar toggle(top right of pic) and sub-menu dropdown chevrons:
Envelope icons next to email addresses:
The little icons for the sidebar minimizer, dropdown menu, and the "envelope" icons used to represent emails disappeared.
I redownloaded the template I built my website on just to check if I did something wrong: https://html5up.net/editorial
But even in the newly downloaded file, those icons were missing, whereas when I first downloaded them, they weren't
Given that this issue also happened in a freshly downloaded template (but as you see on the website preview the icons are fine), I'm baffled as to what the issue might be.
Thanks in advance for any help!!
The icons missing are F0C9, F078 and F0E0.
These icons are includes via FontAwesome, so either you forgot to include FontAwesome or moved the files. Make sure there is a fontawesome-all.min.css in your /css folder and the corresponding webfonts folder exists and contains the FontAwesome-files

Summernote WYSIWYG doesn't display properly inexternal popup

I know it must be something easy, but I can't figure this out. Summernote works fine if it is in the first page element of a JQM document, but if the summernote is in an external popup or on other pages in a multipage web, they summernote initialized but the icons are spaced oddly--see the fiddle). I have tried comparing the how the css are applied, and it looks like the JQM theme is overwriting the bootstrap css, though I am not sure (adding !important to all the bootstrap and summernote css is not an option--besides it must be a initialization or loading issue). Anyone have an idea?
If you host the JQuery Mobile scripts locally then you could edit/delete the parts that are causing the problem. Or you could use find and replace to add the important tags: Find:; Replace:!important;

How to locate a class in _tk theme to remove it?

I am having a bit of trouble trying to create a custom page template on Wordpress using the _tk theme (based on _s theme & Bootstrap). My issue is that I want to make the custom page template span the entire width of the content area after removing the side bar, but there is a class showing in the HTML inspector that is not allowing me to do this. I have included a screenshot to show what I mean.
I can remove the col-md-8 class from the inspector and it gets me the desired result, but I can't locate it in the PHP files to remove/modify it. I am fairly new to developing/designing with Wordpress, so I'm not sure if I am even going about this the right way.
Site I am working on: http://66.147.244.181/~slimbaby/phenomradio.
col-md-8 is found in header.php on Line #85.
You might want to simply override the CSS on that specific page though if you prefer not to edit header.php