conflict between 2 bootstrap.css files - javascript

I downloaded and customised a website template to fit my needs. The template came with a number of folders and files including js and bootstrap files.
Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
I used firebug to debug the conflicts.
When I include the header and footer files together with the associated js and bootstrap files, the script loses most of the design (ie; the navigation panel).
I noticed that the classes defined in the template bootstrap css files are the same as the ones in the scripts own bootstrap css file.
How can i fix this?
Is there a way to exclude the main sites bootstrap files from affecting the installed script or vise-versa?

I haven't used bootstrap and don't know much about it, but basically if you want to save the bootstrap styles just load them after your script.
Something like this:
<link rel="stylesheet" href="css/YOURCSS.css" />
<script src="js/YOURJS.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrapJS.js"></script>

These are the files you told you are including...
public_html/bootstrap/css/bootstrap.min.css
public_html/folder/subfolder/script/theme/css/bootstrap.css
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
<link href="/folder/subfolder/script/theme/css/bootstrap.css" rel="stylesheet"/>
Two assumptions :
Both the sets of files are the same in code.
Then, no problem, but it is not, from what you said.
Both the sets are equal by name but different by content. Then, if those files contain classes (or #id rules) of similar names, all the rules will be ordered in First come first read basis, and if there are multiple rules for a single property, the last rule for that property will be applied.
Example:
h1,h2, .heading, #heading{
font-family:georgia; /* from first file in the include order they are specified in html */
font-family:verdana; /* from second file */
font-family:arial; /* from third file */
},
then,
the last rule : font-family:georgia; /* from the third file */ will be applied.
Debugging such things would be harder if you like to do. Because you can not guarantee the way how they get merged up. If all the code is written by yourself, you could have used a minifier like this which removes all duplicates. But that is not the case.
Finally, you said Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
Here, it is better to remove CSS classes that are similar in names from the ones that came along with your php script folder.

Related

Dynamic theme change in Semantic-UI

There are many questions asking how to change the theme in Semantic-UI, but I have not been able to find even a question where it refers to changing the theme dynamically, i.e. after a webpack build.
I want to allow each user of a site to save their own preference for the theme. I have some users who prefer dark themes, and others who are color-blind, and others who have weak eyes and need larger fonts, or more contrast, etc.
I know it's possible to change the theme dynamically since the semantic-ui demos all do it. Unfortunately, the Theming page and all documentation I have seen describes how to change the site-wide theme, and apply that, in a new site-wide build. Or to customize that (still) site-wide build.
I think I'd be happy to just be able to add a class to the class list for an element (e.g. "github") and have it use that theme for that user (even if it was just for that element). But ideally, I'd like to have my page load an extra .less or .css file(s) with site-wide overrides for that user, for the user-selected theme.
I'm still pretty new semantic-ui and to applying dynamic changes to a webpack site. Any suggestions for how to apply additional less variable changes after build, or to reload entire Semantic-UI themes, like the demo does?
Note that demo site is not a link to GitHub; it's a look-alike with a paint can icon near the top-right which brings up a sidebar that allows you to change themes. Dynamically.
Update:
I need to test this now, but I may have an answer for my own question here.
It seems that the gulp build process typically compiles and combines all the less and other files into the dist folder as semantic.css, semantic.js, semantic.min.css and semantic.min.js. It also produces different individual component .css files in the dist/components subfolder, but (I think) if you're loading the full css file (e.g. semantic.min.css), that you don't really need the components subfolder. That this is present for those sites who want to optimize to the point of only including the .css files for the components they use?
So it's already processed and combined, and to swap themes, I think all that is necessary is to swap one semantic.min.css file with the output of the build for another theme. The .js files are the same, at least for default vs github themes.
If this is true, it's a matter of copying the semantic.min.css to an alternative file, for example, semantic.github.min.css and use that .css file instead. Or copy it to a theme subfolder like github/semantic.min.css. Then, in either case, update the DOM with a new href on the stylesheet originally referenced.
Summary: It looks like it's all in the semantic*.css file and swapping the output of different builds allows us to swap themes. I'll test this later tonight.
Update 2:
I updated the theme.config file with all github entries, then rebuilt the dist folder, copied the semantic.min.css as semantic-github.min.css to my static folder with the original, then just updated the href to select it:
// normally: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
// non-default: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic-theme.min.css">
function swapThemeCss (theme) {
console.log('Theme change to "' + theme + '".')
let sheet = document.querySelector('#theme')
if (!sheet) {
return
}
if (theme === 'default') {
sheet.setAttribute('href', '/static/semantic/semantic.min.css')
} else {
sheet.setAttribute('href', '/static/semantic/semantic-' + theme + '.min.css')
}
}
Oh also, in the example above, I gave the link an id of 'theme' to make it easier to find it and replace the href dynamically:
<link id="theme" rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
"So it's already processed and combined, and to swap themes, I think all that is necessary is to swap one semantic.min.css file with the output of the build for another theme."
Correct.
Depending on whether you're having per-user styles, or just multiple themes the user can pick from, you can simply have separate less files with per-theme overrides that can be compiled with webpack but perhaps not inserted into your index.html. Then you can dynamically add/remove the <link>s to depending on the user preference. The dynamic adding will cause a flicker from the default styles to the per-user theme styles if you're inserting the <link> tags via frontend javascript (because it must wait for the frontend JS to load, which will render the page/default styles in the meantime, then inject the new <link> and only show the new styles once those have been loaded). Add the per-user <link> tags serverside to make it seamless.

heroku python and highlight js not working

I'm following the basic Heroku tutorial using Python (Django) to stand up a web page. I eventually want to blog, and to include code snippets, so I wanted to include highlight.js to make the code look prettier.
However, I cannot figure out how or where to include the <link ... "style/...css" /> and/or <script ...highlight.min.js" ></script> to get things to render - I end up with plain code-text even though my <pre><code>...</code></pre> tags have hljs class appended, and I can see that the stylesheet and script are linked correctly.
Instead of trying to copy and paste 16 different files with 40 lines each, I think it's easiest to just link to my testing page.
page which should be using highlight js but isn't.
Note also that I'm trying to use a highlight.js stylesheet called androidstudio; the giveaway that it's working is that the code background will be gray/black, and some of the words will be bold and different colors (ie the entire point of highlight js).
This question is different from this local static file question because I'm trying to use //cdnjs files, that is, publicly-hosted js and css files.
You forgot the quote (") before stylesheet:
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/androidstudio.min.css" />
When you view source using Firefox it highlights (no pun intended) your error:

refresh css without reloading the page in asp.net

Refresh css without reloading page, css defined in App_themes folder and theme referred through webconfig.
I do not have any reference of CSS file on the page, it is done through referring theme name in webconfig.
Tried many ways but failed to get any output:
not able to use versioning like this:
<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
Tried CSSrefresh.js to automate the process but failed to get the actual result.
So is there anything which refresh my page with the latest css without reloading the page?
EDIT: When you refresh a page, some of the elements in that page (like CSS and JavaScript files, images, etc.) may not be updated from server, because they are cached by the browser, so you may be unable to see your latest updates. What you need to do is to somehow prevent the browser from using the cached version of the files and request these content again.
One way to do it is to disable caching for your CSS or any frequently updated files. To do it in ASP.NET, you change Web.config file in the directory you want the cache to be disabled (in your example App_themes). If that directory does not contain a Web.config file, you can create one. To disable caching completely, you can add the following lines to Web.config (if some XML elements are already present, append new children to them):
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</configuration>
Instead of disabling cache completely, you can set it to a short time, like 5 minutes. To do this, change the clientCache element in the above example to this:
<clientCache cacheControlMaxAge="00.00:05:00" cacheControlMode="UseMaxAge"/>
Bear in mind that disabling caching is a very bad idea and impacts performance very badly and you shall not do it unless absolutely necessary and if all other solutions fail.
A (better) solution to the problem is using versioning (as you mentioned), and it should work. What you do is change the way you link to your CSS file from <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="style.css?v=1"> (a version is appended as a parameter). You do not need to change the name of the actual CSS file on disk. Now, the browser will cache style.css?v=1. If your CSS changes and you want this change to be applied immediately, you manually change all links to your CSS and increment the version (<link rel="stylesheet" href="style.css?v=2">). No browser has style.css?v=2 in its cache, so all browsers send a new request to get the file.
Manually changing all CSS references each time they change is very cumbersome. To automate this process, you can use the bundling and minification plug-in in ASP.NET (it is only available in later versions of ASP.NET). Bundling and minification is a very useful optimization technique that you should be using anyway to improve the performance of your site, so enabling it is a good idea. The bundling plug-in, among other things, automatically changes the version parameter once a file changes.
Enabling bundling is a little different depending on your project type (ASP.NET MVC, Web Forms, etc.). Please see documentation on how to use it for MVC here and for Web Forms here.
If you want the style of page to dynamically change, include all theme CSS files in your initial page load, but each theme CSS rule must be edited so its selector only works if there is a specific class name defined in parent. You can then use JavaScript to add/change the class name in the parent node to use different themes.
For example, your CSS would be
.theme1 body { background: red; font: 'sans-serif'; }
.theme2 body { background: blue; font: 'serif'; }
And your HTML would be:
<html class="theme1">
<body>
</body>
</html>
Then if you want to change theme, change class name on HTML element to 'theme2'.

Load <link rel="stylesheet"> raw content into an <style> tag

my platform delivers some similar widgets on the same webpage. These widgets are embedded on iframes, and share the same CSS definition among them.
Current version loads this definition using <link rel="stylesheet"> tag. But, I am thinking to change loading strategy to css inline definition inside <style> tag.
Load base javascript on target page
Create a hidden iframe, and load CSS <link> on it (async document.write call)
Set this CSS content into javascript var on target page context.
Steps 1 and 2 are already implemented and working. Now, how should step 3 be implemented?
After some new tests, I'll post here any positive results.
You don't want to use Javascript for something that can be done (or at least done easily) with pure CSS. There are a lot of people who don't have JS enabled...I don't think you want to limit their access to your site. What you are looking for can be done with the CSS #import rule. It's pretty simple -- all you need to do is place #import "path/to/css/file" above all your other style rules. The path is relative to the current stylesheet; if it's in an HTML file then it's relative to the HTML file.
For example, if you had a domain like stackunderflow.com, a stylesheet in the top-level folder, and a stylesheet called style2.css in a folder called extra-styles, then you could import the stylesheet from extra-styles via a relative path: #import "extra-styles/style2.css" Another good thing about this is that it's supported in almost all browsers.

Dynamic css file and javascript

<link rel="stylesheet" type="text/css" href="test.css"/>
in case of static css we mention css file through link tag like above. suppose in case changing page theme we need change css name dynamically after downloading css file. so i just want to know how can i down load css file dynamically and change the css file name in link tag with the help of javascript. please assist me.
If you have an external CSS, you wont want to dynamically generate it as browsers will be caching it. You can set any arbitrary file type in your webserver to render dynamically though, but I wouldn't recommend it for css.
To stop CSS files caching, timestamp the querystring after them, IE:
<link rel="stylesheet" type="text/css" href="test.css?x=15/12/14 13:00:04"/>
Again this bypasses a lot of efficiencies that browsers have in place for caching, but it's there as an option.
The dynamic parts of your CSS, you could pull out the external file and have them in an internal style sheet, and dynamically insert the colour values in that way. This would work OK, and you can modularise it as an include file.

Categories

Resources