I am using html5, css, jquery mobile to develop some application. But the html elements and css are overridden by jquery-mobile default style sheet (jquery.mobile-1.0.css).
How can i overcome this problem? I just want to use my style to my page. For example If I give bgcolor="red" in body tag, it will not work..
Please give me some suggestions....
Thanking you....
Use CSS and if necessary mark attributes as !important.
body { background-color: #f00; }
If that doesn't work, e.g. because another selector from the jQuery Mobile CSS overrides it, use !important:
body { background-color: #f00 !important; }
The precedence rules are explained here: http://www.w3.org/TR/CSS21/cascade.html#specificity - however, usually simply testing if your rule already works or if it needs !important is sufficient.
What you certainly should do is including your stylesheet after the jQuery mobile CSS. This gives equally-weighted rules in your stylesheet a higher priority even without !important.
Instead of including your style.css at first, load that at last
like
<link href="query.mobile-1.0.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
bgcolor="red" is not CSS but an HTML attribute.
Alter your website to load your custom CSS file after the jQuery mobile CSS. In your custom CSS file declare your styles, e.g. like:
body { background-color: #f00; }
JQuery Mobile creates sub classes of the body style so to target the body background you need to be more specific.
Add adjustments to you CSS file which is declared after the JQM CSS file.
You can target each theme body background by using the following:
.ui-body-a,
.ui-overlay-a {
/* green 4FFF19 ellipse */
background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #4FFF19), color-stop(1, #264C73));
/* Webkit (Chrome 11+) */
}
This targets theme a for example. That took a bit of sweat to learn.
By using this, you are able to create radial gradiented backgrounds etc which the JQM theme roller does not provide for, a good page to create the CSS for various radial gradients is microsoft page of all places: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html.
Good Luck.
Related
I am encountering some issues with CSS rules on a website I am working at this moment.
It is using a custom theme based on WPBakery Visual Builder. Issue is, I need to edit the background color of a element. I have tried both:
Editing the row background color in WPBakery. The issue is that it shows correctly in the editing panel, but not on the actual website.
Adding custom CSS rules for that element.
Problem is, a stylesheet probably overrides my rules that I have set up. Explaining screenshot:
https://imgur.com/a/YI5Df4i
Any ideas on solving this?
Add more specificity to your element, for example:
div{
width:100px;
height:100px;
}
div.test{
background:blue !important;
}
.test{
background:red !important;
}
<div class="test"></div>
Without the div part in the selector the square would have taken the last css rule and apply it since they both would have same specificity same as in your case.
Unfortunately is used !important, avoid doing this. But try to be more specific, for example: .parent-div .your-class { color: pink } ... and probably you must add also !important; But I recommend you to edit your theme and delete !important at least where you have problems. Also is important order of import styles.css, add a custom file and put it last in the like:
<head>
<link rel="theme.css" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Browser will take the last declaration.
My parent page is using custom1.css and child page is using custom2.css. My issue is child page css properties are override by parent page css. How can I block parent page css acting on the child page elemenets.
CSS styles are apply as the order those are in. Check this example, first style override by the second and final width of div will be 40px.
div{
width:300px;
}
div{
width:40px;
}
linking style sheets also the same.
<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">
Here style_2.css override the same styles in style_1.css because it links secondly.
So what you have to do is, style sheet you need to apply link lastly.
Css is applied using levels.
So just adding a container around everything shoudl prevent it
You can do:
.class1 #content{ make it blue here }
.class2 #content{ make it red here }
Doing it by file is not possible.
You should make sure that never happends, this can yield unexpected results
How can i block parent page css acting on the child page elemenets?
By removing the custom1.css reference from the <head> of the child page.
If, for some reason, you cannot do that, then you need to read about css specificity in order to understand how the "parent css" is overriding rules in the "child css".
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You could either add !important; after your css styles (which is a bad example) or you could make some more specific selectors.
body div#main{
/* Style */
}
The above is more specific and will "win" over the following:
div#main{
/* Style */
}
On you your child page please check that you CSS order should be in correct way if you are using both CSS files
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="custom1.css">
<link rel="stylesheet" href="custom2.css">
</head>
so that cascading will work in correct way as per your expectation
also there are other things that you need to check like CSS Specificity, Inheritance, and the Cascade. You may like to check http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ this
Hope it helps!
I have the website using bootstrap for its css style.
What if I want to take just a little bit of part of css from other website?
What would be the best way? I tried to use one of the function 'inspection' with Firefox.
It shows all the hierarchy and its styles stated for each class.
The thing I really care about is confliction between bootstrap and the new css.
How would you guys solve this if you want to take just a little bit part of other css?
First of all don't pick up styles from other's website before a prior permission from the site administrator...
For the bootstrap..I've never used it but still according to me you can over-ride the default bootstrap styles by using CSS !important
I tried to use one of the function 'inspection' with Firefox. It shows
all the hierarchy and its styles stated for each class.
Styling a single element is never dependent on a single class, it inherits some of the properties from the parent class too...For example
<style>
.wrapper {
color: #ff0000;
}
.hello {
background-color: #aaaaaa;
/ *Width and color of the parent div is inherited */
}
</style>
<div class="wrapper">
<div class="hello">Hello World</div> <!-- So actually this uses color and width of .wrapper and background-color of .hello -->
</div>
I was checking out some of Amazon's CSS and noticed they have HTML commented out a chunk of CSS. I know there is conditional formatting for Internet Explorer with HTML comments, but I am viewing this in Chrome. What is the purpose of it?
Oh, I should note that these styles are actually being applied.
<!-- BeginNav -->
<style type="text/css">
<!--
.nav-sprite {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/BeaconSprite-US-01._V141013396_.png);
}
.nav_pop_h {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-h._V155853593_.png);
}
.nav_pop_v {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-v._V155853593_.png);
}
.nav_ie6 .nav_pop_h {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-8bit-h._V155961234_.png);
}
.nav_ie6 .nav_pop_v {
background-image: url(http://g-ecx.images-amazon.com/images/G/01/gno/beacon/nav-pop-8bit-v._V155961234_.png);
}
.nav-ajax-loading .nav-ajax-message {
background: center center url(http://g-ecx.images-amazon.com/images/G/01/javascripts/lib/popover/images/snake._V192571611_.gif) no-repeat;
}
-->
</style>
It's created by someone who thought that visitors of the site use a browser which does not recognise <style> tags.
(Ancient) browsers, which do not recognise <style> tags, will not show "weird" characters (CSS rules) because of the HTML comments.
Most browsers recognise the <style> tag, so the developer seems to use <!-- --> out of (bad) habit. It should not be used.
Let's remember that not only browsers interpret HTML. E-mail clients also do this, and some of them use old engines or very strange rules.
Generally, this is some type of trick which is used when creating a template for HTML e-mails, so that if the e-mail is opened on the client who does not correctly interpret the <style> tag then the client should not display CSS styles in the body of the message. And more modern clients should interpret styles correctly, because <! - -> is not a comment for CSS, but only an incomprehensible syntax that should be ignored by the CSS parser.
In this situation, it can only be legitimatize only if we want to include CSS rules for Media Queries in the <style> tag. Otherwise, in the e-mail templates when we use ordinary styles, recommended is using the inline CSS styles.
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );