I am currently using bootstrap and knockoutjs to display a webpage that has a live preview of some data. For instance, a user enters a title, in a textbox, on the left hand side. Then, the right hand side of the page updates to format that text based on some other settings. So it might be something like <h1>{title}</h1> or it might be <u>{title}</u>. However, all that is requested from the user, at this point, is the title in plain text.
The issue is, as the preview is actually a HTML document created by the users. So, some of the bootstrap CSS overrides the CSS specified by the users. So the above <h1> will inherit bootstraps h1 CSS class, rather than using whatever is in the users HTML template. This means at the time of using the created document, the preview may differ to what is actually happening.
JSFiddle example: http://jsfiddle.net/Piercy/4fcmk/
HTML:
<div class="content">
<h1>Header 1</h1>
<div id="Preview">
<!-- Start Html Template -->
<style>
.header
{
color: red;
}
</style>
<h1 class="header">Header Class</h1>
<!-- End Html Template -->
</div>
</div>
CSS:
.content h1
{
color: blue;
}
The user would expect "Header Class" to be red as they do not know anything about the content css. In my code i am using bootstrap but this shows a simplified version of the issue. Normally, you would just make the CSS more specific but because the user doesn't know about bootstrap (or in the jsFiddle example content) we can't really expect them to modify the CSS.
I need to try figure a way to either stop a certain container (preview div in the jsFiddle) using the stylesheet thats being used by it's parent or figure a way i can modify the bootstrap CSS so that overriding issues are less likely.
Of course, sticking it in an iframe would accomplish this but then I will have issues trying to access and modify the preview.
I am open to all ideas, just want to try find the most appropriate way to deal with this situation. I found this rather difficult to put down on paper so I apologise if it is hard to understand.
To my understanding, there is no way to tell CSS to not inherit styles. However, here's an interesting idea for a workaround.
Take the bootstrap.css file and drop it into your CSS preprocessor of choice (I used LESS).
Next, wrap ALL of the styles with an ID or class of bootstrap like this:
#bootstrap { ...all the bootstrap styles go here. }
Then, save it as a .less file and compile it. Your result will be all the bootstrap styles inheriting from #bootstrap or .bootstrap (depending whether you used an ID or class to wrap bootstrap's styles).
Finally, wrap whatever markup in your template that your users will not be editing in a div and give this div an id of #bootstrap or class of .bootstrap, and include only the bootstrap file we just processed using LESS.
That takes care of the user's CSS not inheriting from bootstrap. However, your users can still write styles that bootstrap will inherit. To get around this, wrap the user's content in an id or class of something like #user or .user and ask them to begin all of their styles with .user > likes this:
.user > h1 {color: red;}
.user > p {font-size: 18px;}
This should separate your HTML template's styles from your users' styles - it just takes a little bit more work from your users.
Here's a jsfiddle to demonstrate:
Related
I have a Wordpress page and I have added a Sidebar widget for an air quality measurement device. The script generated by the device is written looks like this:
<div name="airvisual_widget" key="somecodehere"></div>
<script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script>
And this generates a widget that looks like this:
So the layout is very weird and gets off limits and there are not really many layout options on the website that generates that widget code. Is it possible to overwrite or edit the standard layout inside this javascript code? And how can one do that?
I did take a look at the widget code. And was able to change the layout using CSS.
You can add CSS for these classes and use !important to override existing properties of the widget
Once you know the dom structure and CSS selectors, you can add custom css targetting these selectors. For example, in the above screenshot, if you want to change the height of div with class bodyAirvisualWidget, you can add custom CSS like
.bodyAirvisualWidget {
height: 200px;
}
You can choose to add !important to force your css. However you need to be careful as same css selector may be targetting multiple element. In that case you may want to make your css selector more specific like div.className > div.anotherClass > .bodyAirvisualWidget to avoid unintended side effects
If it was a simple html page, you can add CSS directly in a <style> tag or in a CSS file and include css file into your page.
In case of Wordpress, you can add custom CSS via Wordpress CSS editor (My Site → Design → Customize → Additional CSS)
first of all excuse my language, this is my third language and I'm new.
I'd like to do a little website with html, css and bootstrap that doesn't need to be responsive.
So I did a sticky Navbar with javascript and css which looks pretty good. Because I want to use ajax (for not having to write the navbar on each html-file) and Bootstrap (for some buttons, modals etc..)
So I added Bootstrap in my html-doc and now the style of my whole navbar is different. It's not even sticky anymore and has a weird white border at the bottom.
Would be great if you could help me.
I am using Brackets, so all this stuff is local and I am not planning to make a real website out of it.
Merry Christmas to you all!
Basti
WHY?
Your css declaretions had overrided by bootstrap declaretions:
For example I tried to set color:red but look what happend:
You have to use this steps to minimize the conflict between your css and bootstrap css:
Set your css link below bootstrap links
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="yourCss.css" rel="stylesheet">
Use Specificity in css as own id or class
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of different sorts of CSS selectors.
In case that your css declaretion had overrided use !important
For eample color:red!important
Bootstrap is the frontend framework it comes with pre defined classes that is the main reason your website style got changed to fix this you can add a custom css so for example one of the pre defined class in bootstrap looks like this
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
Notice that "alert alert-primary" classes (there are 2 classes used first one is alert and second one is alert-primary), This is responsible for the pre defined styles.
So, To fix your issue you can add another class similarly and define its custom style in CSS file as per your need.
So adding another class in the above example will look like this
<div class="alert alert-primary anotherClass" role="alert">
A simple primary alert—check it out!
</div>
and then style this by targeting the same class in CSS like this
.anotherClass {
/*your styles go here*/
}
Do not forget to link the CSS file.
The title pretty much says it all. I am attempting to apply Bootstrap's CSS/JS only to div's with the class "bootstrap", but only when the <article> element has the class "tag-load-bootstrap".
So, in the following code:
<html>
<head></head>
<body>
<article class="tag-load-bootstrap">
<div class="bootstrap"></div>
<div></div>
</article>
</body>
</html>
Bootstrap's CSS/JS would be applied to the first div, but not the second. I've tried going about this a number of different ways (e.g., jQuery, LESS), but haven't had much luck yet. Any help will be greatly appreciated. Given the requirements of this particular site, an iframe isn't an option.
Update: Here is a link to a page on which I am attempting to get this working: http://coreyjmahler.com/2013/12/21/writer-pro-for-os-x-and-ios/. As you can see, the links at the bottom of the page are designed with Bootstrap in mind, but the Bootstrap CSS/JS are not being applied. I've tried two separate ways so far:
I used an #import in my site's custom CSS file (i.e., coreyjmahler-com.css) and directed it at bootstrap.less, which in turn references the Bootstrap CDN. I'm uncertain as to why this didn't work, but it didn't.
Currently, the site has a <link> in the <head> to the aforementioned bootstrap.less file, which retains the references to the Bootstrap CDN. This, as you can see, is also not working.
This will give you a really bloated css, but using LESS:
.tag-load-bootstrap > .bootstrap{
#import "bootstrap.less";
}
Instead I would suggest only extending the pieces of code you need.
As for the JavaScript, just use whatever you need on a specific element, either with the data attributes or programmatic API.
It would be helpful, if you give a link to a jsfiddle with a demo code in it.
But, based on the info you gave, I might instead use the css selector:
.tag-load-bootstrap .bootstrap { /*css here*/ }
I have an entire page that will be PHP included onto an already established website. The website will include my site after the <body> tag on their own site. I do not have access to the <head> section of the page. I am including my <link> and <script> tags in my page (so after the <body> of the parent page). I can change the title dynamically with javascript after the fact.
However, the CSS from the parent page is causing some interference with some of my elements that aren't explicitly styled. I would like a blanket way to stop CSS from cascading to my own elements without using an iframe. Is there a CSS reset that will work? How about a javascript solution? Would HTML5 scoped styles fix this issue eventually?
I can't give you a good answer. The closest I can think of is to take one of the CSS Reset scripts and apply them to your root <div>.
It's still a long list of things you're cancelling but at least it's maintained by someone else...
You can try by wrapping content and appending CSS rules only to wrapped content, for example.
CSS
#wrapper1 .className{/* RULES */}
#wrapper1 div{/* RULES */}
#wrapper2 .className{/* OTHER RULES */}
#wrapper2 div{/* OTHER RULES */}
HTML
<div id="wrapper1">content 1</div>
<div id="wrapper2">content 2</div><!-- CONTENT YOU APPEND LATER -->
Another solution, not the best1 is maybe to use jQuery and replace all class-es or ID-s in body when content is changed, here again you should define CSS before.
There is one thing I must note, in my experience appending HTML as pure text (like innerHtml='html') get right CSS rules in Google Chrome and Mozilla, but on IE you need to use proper JS and append content differently to get those CSS rules used. By different I mean like creating element should really be creating new element with JS function.. that was before I am not sure anymore if this thing is changed.
This question is not about how to toggle a div. But instead how to toggle visibility in a big web app. My web app needs only to run on Chromium (Webkit). The problem I have is probably more related to infrastructure and best practices, and I wonder if anyone has experience with this.
My app runs on node-webkit, which means all files are local, and loading is quick. To feel really snappy, I add all content to the DOM I possibly can. I want to stay away from state changing my app with Javascript, so no $('.view-projects').addClass('visible');. Because it will get messy really soon, and I feel it's not really the task of JS.
Instead the approach I have chosen works like this.
// javascript sample (I actually code in CoffeeScript)
// catch all click events on elements with data-trigger attributes
app.on('view:addProject', function () {
// add a class to the root view
$('#app').addClass('view-addProject');
}):
Markup:
<!-- markup sample -->
<div id="app">
<div class="projects">
<div data-trigger="view:addProject"></div>
<div>etc.</div>
</div>
<div class="addProject">
etc.
</div>
</div>
Css, used as the state machine:
app.view-addProject .addProject {
visibility: visible;
display: block;
}
What I want to know is if other people have tried something like this, have good experiences with other approaches etc. Or maybe I am missing something, I feel I am getting myself in trouble with dynamic content.
Note: I can't simply use show/hide, since my elements use display: -webkit-flex/-webkit-box; etc.
If you want to toggle visibility, here are some alternative approaches:
Control state by changing CSS via the CSSOM
Change state by changing data- attributes
Change state by changing DOM nodeNames