Get only (or compile only) Bootstrap Grid - javascript

I'm trying to incorporate Twitter Boostrap into a project, but only the fluid grid system.
Ideally, I'd be able to pull this from bower and install it that way. Otherwise, I'd like to be able to compile it directly inside of bootstrap's less. I'm basically trying to avoid downloading the file and removing the parts I don't need.
Has anyone had experience with this? Right now, I'm running the following command inside bootstrap:
grunt dist-css
Which is giving me all of the compiled. Is it possible to isolate the grid?

You can go with this link and choose only those components which you need or you can open bootstrap's css file and delete everything besides class container,container-fluid,row,row-fluid and classes that start with name col.
Hope this is useful for you.
http://getbootstrap.com/customize/

Related

I'm using a DataTables plugin for my ASP.NET MVC program. The table displays without any CSS. Why?

I have been troubled with this problem for DAYS, and this is a last resort.
I am following along with a course, and in it the instructor has us use DataTables to pull a list of users from a database. The plugin is pulling data from my db correctly, and the functionality of the table seems to be working. The problem is that the table is hideous, and virtually unusable.
I'm at a loss, as I have made sure my code mimics everything from the video lesson. I've even analysed my code next to his in GitHub.
I've even made sure to use his version numbers for plugins, as the course was recorded in 2016-2017 I believe. I have considered the fact that I'm using Visual Stdio 2019, and he is not. Also, I remember there being a large bootstrap update as recently as a couple years ago. (DataTables uses bootstrap)
I'll show some code below, but here are both repos for this project(Vidly):
My Repo |
Instructor's Repo
Since this is apparently a CSS problem, I looked to how I was importing my css files. I am using a bundle inside of the BundleConfig file in the App_start folder:
But it's exactly the same as the instructor wrote it, identical.
Lastly, here's the code in relation to the first image, the page with the table in question:
I am lost.
EDIT:
Last night I was messing with my included files in the BundleConfig file and switched the dataTables to bootstrap 4 and got a more desirable result:
As you can see, this is definitely laid out better, and has the desired dimensions, but the colors of the hovered rows and certain text is still off and unappealing.
If your Bootstrap version is 4, then you need to load in the *.bootstrap4.css / *.bootstrap4.js files for DataTables (rather than *.bootstrap.* which is for Bootstrap 3).
Update for the edit
Looks like you might also be loading the jquery.dataTables.css file (the tell is the gaps in the pagination)? You can remove that. Only one of the style files should be loaded.
What is the tutorial that you were following btw?

Is it available to change the webviewer button icon of 'annotationStyleEditButton' & ' annotationDeleteButton'

I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!

Is there a way to list the settings for an existing JQuery UI .js file?

I am working on a project that has been going for many years. We currently use jquery 1.7.2 and a custom jqueryUI 1.8.21. I am creating a new feature that requires we upgrade jquery, so I am in the process of upgrading to jquery 1.9.1.
The problem is that 1.9.1 isn't compatible with UI 1.8.21, so I need to upgrade UI too. Alright, not a big deal... except that we have a bunch of custom settings in that UI 1.8.21 file, and I need to carry them forward to the new version.
I could recreate the custom theme from scratch using the new UI 1.12.1 version, but it would be very hard and there is always the chance that I will miss some important setting. I am looking for a way to list out the modified settings in the existing file to easily apply them to a customization of the newer version, or to somehow upgrade or recreate the same setting with the newer version.
Is there a tool or automatic way to do this, or am I out of luck and need to just recreate it by hand?
When you download a theme created with ThemeRoller, one of the files is jquery-ui.theme.css. The comment at the beginning has a line like this:
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=50&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23777620&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgTextureHighlight=flat&bgColorHighlight=%23fffa90&iconColorActive=%23ffffff&fcActive=%23ffffff&borderColorActive=%23003eff&bgTextureActive=flat&bgColorActive=%23007fff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23ededed&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23f6f6f6&iconColorContent=%23444444&fcContent=%23333333&borderColorContent=%23dddddd&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23333333&borderColorHeader=%23dddddd&bgTextureHeader=flat&bgColorHeader=%23e9e9e9&cornerRadius=10px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
Follow that link, click the Download Theme button, and you'll be able to download a new version with the same theme.
However, this only specifies the theme. The download page that the button goes to requires you to select the components to include. I don't see any automated way to do that, but there's a comment at the beginning of jquery-ui.js with a line like:
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js, widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
You may be able to figure out which components to select from this.

Full-Calendar-Plugin Change Table

I have a small question. In my Cakephp 3.6 project I used the CakePHP-Full-Calendar-Plugin plugin from curtisblack2004.
https://github.com/curtisblack2004/CakePHP-Full-Calendar-Plugin
I installed the plugin and everything works fine. I want to change the name of the table from "events" (used in the plugin) to "lessons" and completely change the structure. Where can I do that? Can someone help me ? Maybe it's a trivial thing to do, but I'm stuck and I do not know how to continue.
As I see in the repository of plugin, you may follow these quick steps:
1- change the tables names in the sql found here
2- change your models/controllers names based on that.
example, if your your events tables becomes >lessons>, then in controller folder, EventsController.php should become LessonsController.php. You need to rename Everything related to Events into Lessons, in differents folders.

Use Drupal toolbar without drupal

I am trying to export js/css files of the drupal admin toolbar to use it somewhere else. is there an easy way of doing this ?
I need these two pieces shown here
I think the easiest way will be to just rebuild from scratch using that image as a template.
They may be some code snippets you can borrow, but most of the code will be too specific to Drupal to be easily reused.

Categories