How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
Related
I have the following in the .css file when the application is not running:
#tabsuseradmin .ui-tabs-panel {
height: 500px;
overflow: auto;
margin-right: 10px;
}
But during runtime, in the browser developer, the same styling comes as:
#tabsuseradmin .ui-tabs-panel {
height: 900px;
overflow: auto;
margin-right: 10px;
}
I searched "900px" in my entire Visual Studio project, and did not see it anywhere for a height attribute. I am stuck on this and don't know what is happening to cause this to become 900px. What should I do?
Load order of my CSS files:
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/content/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<link href="/content/docsupport/style.css" type="text/css" rel="stylesheet">
<link href="/content/uielements.css" type="text/css" rel="stylesheet">
<link href="/content/headerfooter.css" type="text/css" rel="stylesheet">
The uielements.css contains the styling in question, and the headerfooter.css doesn't contain anything that overwrites in the css above it (I tested by removing it entirely).
Thank you.
Load your css files inside of your head tag, after the loading of the files create a style tag with the rules that you want to take precedence immediately after the css file loading. This will allow your rule to overwrite preexisting rules set in the css library files.
If I use css code directly inside of the html code it works.If I use by linking css file inside of the html by tag it is not working.But I tried with ffox viewsource and link for css redirects to the perfect CSS.Please enlight me in this Case.Thanks in Advance.
CSS(POStyle.css) File included like this in HTML :
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
POStyle.css has
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
CSS inside the html directly :
<style type="text/css">
.popupCSS td, .popupCSS td
{
border:1px solid black;
background-color:#EAF2FB;
color : red;
}
</style>
When using:
<link href="$contextpath/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
The browser uses the string literal $contextpath/css/yes/POStyle.css to request the CSS file. There is no replacement that occurs as you would expect in JSP files or some other view technology.
You must use either an absolute or relative url to the file:
Relative
<link href="../css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Absolute
<link href="http:/www.mydomain.com/context/css/yes/POStyle.css" rel="stylesheet" type="text/css"></link>
Use {$contextpath} instead of $contextpath. It is a smarty variable.
I am cleaning up my web portfolio directory by placing CSS, images etc into respective folders.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/contact.css">
However, I can't seem to load certain DIV elements from my CSS file if it's inside a directory.
The DIV is below:
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url('img/form-bg.png') no-repeat;
min-height: 768px;
}
Is there a way of solving this? Everything else seems to load except for the div above.
Try this...
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url(../img/form-bg.png) no-repeat;
min-height: 768px;
}
Make sure that you're using the ID and not a class when using #contact-form-wrap. That is the only thing I can really think of.
Example:
Incorrect:
<div class="contact-form-wrap"></div>
Correct:
<div id="contact-form-wrap"></div>
don't forget to add type="text/css" to your css declaration like this :
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!
Here is an example:
<html>
<body>
<img src="Snapshot_20120326.jpg"/>
<h1>Mezoo</h1>
<h2>The big member</h2>
<button onclick="window.print();">print</button>
<style media="print">
h1 ,img {
display: block;
}
h2, button{
display: none;
}
</style>
</body>
</html>
It'd probably be best to set #media print styles in a separate CSS stylesheet ...
So for example, to hide the header:
#media print {
.header, .hide { visibility: hidden }
}
You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/
You can use the media tag on a link.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The print css could then turn off visibility on things you don't want to see.
I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?
<html>
<body>
<style type="text/css">
body
{
font-size: 62.5%;
background-color:black;
}
h1
{
color: red;
}
#media print
{
body{
background-color:yellow;
}
h1 {
color: black;
}
}
</style>
<h1>This is just a test</h1>
</body>
</html>
The easiest way would be to create a print.css style sheet that's normally included with print media specified.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Then on your print preview screen, you could use the same print.css with screen media set:
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.