override inline style background-image - css

I need to override the following inline style:
<div class="header" style="background:url(http://domain.org/headers/header_image.jpg) top right repeat-y;">
I have tried the adding the below in an external style sheet but it is not working.
.header[style] {background-image:none;!important}
Any suggestions please?

You have almost got it, just do the following changes and it should work
.header[style] {background-image:none !important;}
The !important rule should be within your rule declaration only!
For a reference.. click here

Related

Add a .CSS style element to a link button in JQuery Mobile

I want to add a Style to a link button element in JQuery. Following is my code which is not working. How can I achieve this? Any suggestions?
Here is the HTML
<div data-role="content">
EXIT
</div>
Here is the CSS.
.linkBUTTONS{
color: #1dace3;
}
Any help is much appreciated, as I am pretty new to HTML/CSS and JQuery Mobile.
UPDATE
When I put it like this, style as an attribute of the given link, it works.
EXIT
But when I put it in a separate StyleSheet it doesn't work.
Check for the precedence. There maybe other rules that override your style. You can check all this in developers mode. Also you can try writing rules with !important. Did you try changing class name to link-buttons or something other? Example
.link-buttons {
color: red!important;
}

Why wordpress add inline CSS style to images automatically?

I have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.

ignore css styles on certain type selectors

Say I have 2 sites, http://1.example.com, http://2.example.com.
My issue is this : I am to dynamically add content to 1.example.com and 2.example.com, as part of this dynamic content addition I need to download and apply a css file via javascript. Now there is a <hr> tag in my dynamic content I'd like to style. When I apply this on 1.example.com, all works fine, but when I try to apply it to 2.example.com, the issue is that 2.example.com has a stylesheet that already defines stylerules for the <hr> tag. Like say padding. I don't want to override the properties manually. Is there a way to ignore <hr> styles defined in 2.example.com for my dynamic content and only apply styles I downloaded?
Be more specific. Learn about CSS specificity to override styles.
You could, for example, add a class to the <hr> and style that.
Try like this,
You may find parent div in your dymanic content,
For example: .parent-div hr{ your styles }

customizing the drop down autocomplete box

I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.

Is it possible to make a css declaration override a style set in the element's style property?

Is it possible to make a css declaration override a style set in the element's style property?
eg:
<div class="root"><p style="font-size:13px;">hello</p></div>
Is there someway I can override the font size with css?
I already tried .root p{font-size:16px !important;}
The reason I want to do this is that I am making a javascript rich text editor, and sometimes when someone pastes into the editor, it adds styles like that. But I don't want it to appear as smaller text.
The following code looks wrong , remove the class=root on closing div.
<div class="root"><p style="font-size:13px;">hello</p></div class="root">
with jquery you can do it as below
fontsize can be a variable which you set dynamically
('selector').css('font-size',fontsize);

Resources