I am developing a component for Joomla website. This website has a sophisticated template with fancy css and scripts (namely some K2 components are named) In this component I am using colorbox to display modal picture gallery but what happens is
as soon as this component is called CSS properties and functions of javascript of template fails resulting in some weared page displays.
As I have not written these CSS and javascripts it will be quite cumbersome for me to prevent conflicts among CSS and scripts.
So what is my question is
Is there any way to prevent conflict between these scripts without diving much into the actual scripts.
Please guide me through this.
Thanx in advance
K2 is a content component for Joomla. It's not unusual for framework plug-ins or add-ons to have conflict(s) with one another. Unfortunately, you might have to search into Joomla or K2 forum for answers. Either that, you can try disabling other plug-ins one by one till the conflict disappears (hopefully).
One of the main conflicts in JavaScript is between MooTools (required for some Joomla functionaly) and other JavaScript libraries. Most common is the $ global variable which is commonly used as a DOM selector.
In MooTools, it only selects by ID, while in other libraries like JQuery, it uses CSS selectors.
So if you have a Joomla extension that loads another JavaScript library like JQuery, you'll run into problems. For JQuery, there is a specific solution.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
For other libraries however, you'll need to dive into the JS, or use an extension that offers the same functionality but uses MooTools.
As for CSS, the only way around this is to edit the CSS files. Good extensions should use some sort of namespacing for their CSS. For example, prefix all CSS classes with the component name. Or wrap all HTML in a wrapper element named after the component, or module etc.
If this doesn't exist, you'll have to add it yourself.
Probably the easiest is to edit the extensions HTML and add:
<div id="extension-name">
<!-- extension HTML here -->
</div>
around the extension.
Then edit the extensions CSS and add
#extension-name
before all CSS selectors.
For example, if you have:
.left-column {
float: left;
}
change it to:
#extension-name .left-column {
float: left;
}
You can even automate this process with a regex search and replace.
Related
which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
I have an application with only one aspx page (Default.aspx).
This page loads .ascx controls as needed.
All these controls are using the same JS and CSS file.
Now I want to apply Bootstrap on some of them. But I am scared that bootstrap will break some CSS and JS.
So I am thinking about wrapping each control in an Iframe (because what I know is:
Iframe blocks inheritance of CSS and JS).
Is my solution ok ?
Or Is there a way to know which CSS and JS is needed by each control?
thanks
My advice is that even if you're breaking your application markup into controls (ascx files), you should apply a consistent theme and serve just one bundle of CSS and one bundle of JS. This will help performance of your site as well as be easier to maintain. Also, it'll be easier to keep a consistent look and feel for your users.
So if you're going to use Bootstrap, use it everywhere. Write your JS functions such that they aren't dependent on a given markup, and so on.
I have created a component (custom element) that will use specific version of JQuery and Bootstrap libraries. Now I need to add this component into other applications which are already using different version of JQuery and Bootstrap libraries. Some of the applications in which I will add my component is not using bootstrap library and including it may create other issues.
Now to keep the implementation simple, I am planning to use shadow dom. Is it possible to create a element using Shadow DOM which internally use multiple JS and CSS files but when included in other applications, does not cause any issues with respect to JS and CSS files its using.
What I know is shadow DOM does not encapsulate JavaScript. What are my options here ?
Concerning JavaScript libraries, it depends if the library was designed for that.
It's possible with jQuery thanks to its noConflict() mode.
Concerning CSS libraries, they can be included in the Shadow DOM using the #import url rule.
The rule should be placed at the very beginning of the <style> element.
Hi i would like to use bootstrap themes inside some websites that i am developing, however after looking at the documentation and searching online i have found it somewhat troubling that there is no explicit how to guide start to finish with using bootstrap themes, like found here. Furthermore i would like to download multiple themes into my project directory, extract them into the appropriate folders e.g. (css,img,js,ect...) and utilize them inside of my html files like so:
<div class="customized-bootstrap-item">myItem</div>
I am having a bit of trouble trying to do this because it seems there is no universality among the themes(e.g. each one may vary in how they work) and i don't want to hack together some dirty code if there is a proper way of doing it. So my question is , is there a proper way of adding themes into your existing project purely for aesthetics and customizing them by exchanging the appearance between one them and other themes, and if so how?
Can you guys point me towards some tutorials? I need to know more about how linking these js and css files will affect other aspects of the themes, and how the html tags can be used properly in a uniform way across many themes, as i won't settle likely on just one theme.
edit:
After trying some of the suggestions i managed to figure out at least some of the problems i was having by including the css style of the specific theme that i want to use as a stylesheet link in the head section of the html page that i want to apply it to, which seems pretty straight forward anyway. However i'm still a little bit perplexed on how to get all of those cool elements that i see in the themes, especially the dashboard themes into my custom html page. A good example of a theme that i am looking at is found here. If you guys could give me a bit of insight on how to get those elements on the page (i.e. dashboards, panels, UI elements etc...) that would be great. I may be mistaken but i don't think they are normal bootstrap classes, although i'm fairly new to bootstrap so i'm not 100% sure on that.
The definitions for all of these classes are located in a .css file, likely called 'bootstrap.css'. In the html page where you want to use bootstrap, add
<link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" />inside your . This will import all of bootstrap's css. If you need to use other themes, simply add that .css file into whatever folder has your css, then link to it in an html page.
This is a great resource you can use to generate a theme http://www.lavishbootstrap.com/ then linking this to your existing site is quite easy: you simply include the <link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" /> line in your code.
If you have downloaded from lavish it will include lavish-bootstrap.css. Don't forget to include jquery.js and bootstrap.js or the dropdowns etc. will not be functional.