I have CSS embedded inside the page as <style type="text/css"> and I have CSS referred as using <link href>.
How to make sure that the CSS specified in <link> gets loaded first before the <style type="text/css">?
Right now, the css embedded inside the page gets precedence, causing some style issues.
in the below image, I need .sanddbox dropdown-menu to take precedence before .dropdown-menu. I can get this if I load the css files using link tag.
But I want them to be embedded in the page.
In line styles and style blocks in the page will always over ride any external css files. The correct thing to do is remove the in line css. I am assuming you can't do that for some resaon (there are many). Then the only way to overcome that is to put !important after the attribute in the css file.
eg:
div.test {
color: blue !important;
}
Ok, going to rewrite this…
I have a project. It has 2 layers. Top layer is HTML5 animation (rollovers, slides etc). Bottom layer is kaleidoscope animation using images and CSS.
Bottom layer displays correctly. Top layer does not.
Client has requested that we use relative pathways.
Client has requested we use a strict directory structure of: Pages, Documents, PlusImages.
Pages= html/txt (where the css/javascript is attached in)
Documents= where the CSS and Javascript files are
PlusImages= where all the images are stored
Here's the issue: The images are NOT displaying for the top layer which is called by a javascript file. The program that generated this script is called Tumult Hype
How can I correct this? I thought about adding ../PlusImages/imagename.png to the agilent_hype_generated_script.js file.
Here is the pathway client wants to use:
http://www.XYZ.com/en-US/Products-Services/Services/
HTML File code connecting the CSS and JS files:
<link rel="stylesheet" href="/en-US/Products-Services/Services/Documents/main.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="/en-US/Products-Services/Services/Documents/agilent_hype_generated_script.js?55531"></script>
main.css:
.kal_main{background-image:url(/en-US/Products-Services/Services/PlusImages/Animation-Background.png);overflow:hidden;width:920px;height:510px;margin:auto}
agilent_hype_generated_script.js:
(function(){(function k(){var h="Agilent.hyperesources",e="Agilent",d="agilent_hype_container"; if(false==!1)try{for(var f=document.getElementsByTagName("script"),b=0;b<f.length;b++){var a=f[b].src;if(null!=a&&-1!=a.indexOf("agilent_hype_generated_script.js")){h=a.substr(0,a.lastIndexOf("/"));break}}}catch(n){}if(false==!1&&null==window.HYPE_316)null==window.HYPE_dtl_316?(window.HYPE_dtl_316=[],window.HYPE_dtl_316.push(k),e=document.getElementsByTagName("head")[0],d=document.createElement("script"),
b=navigator.userAgent.match(/MSIE (\d+\.\d+)/),b=parseFloat(b&&b[1])||null,d.type="text/javascript",d.src=h+"/"+(null!=b&&10>b?"HYPE.ie.js":"HYPE.js")+"?hype_version=316",e.appendChild(d)):window.HYPE_dtl_316.push(k);else{f=window.HYPE.documents;if(null!=f[e]){a=1;b=e;do e=""+b+"-"+a++;while(null!=f[e]);for(var c=document.getElementsByTagName("div"),a=!1,b=0;b<c.length;b++)if(c[b].id==d&&null==c[b].getAttribute("HYP_dn")){var a=1,g=d;do d=""+g+"-"+a++;while(null!=document.getElementById(d));c[b].id=
d;a=!0;break}if(!1==a)return}for(var a=new HYPE_316,c=[],c=[],g={},l={},b=0;b<c.length;b++)try{l[c[b].identifier]=c[b].name,g[c[b].name]=eval("(function(){return "+c[b].source+"})();")}catch(m){a.log(m),g[c[b].name]=function(){}}a.z_a({R:5,S:0,aI:0,T:0,bG:3,aJ:0,bH:2,aK:0,X:0,bI:3,aL:0,Y:1,bJ:3,bK:3,bL:3,a:0,b:0,c:0,d:0,aS:0,e:3,bQ:0,aT:0,f:2,g:5,bR:2,aU:0,bS:"NumberValueTransformer",aV:0,aW:3,A:5,l:2,aX:0,B:5,m:5,C:5,aY:2,n:5,D:5,E:0,aZ:0,G:5,t:0,bA:5,RotationAngle:2,tX:4,bB:0,M:0,N:0,bC:0,tY:4,O:0,P:0,Q:0});a.z_b({"25":{p:1,n:"../PlusImages/Overlay-Type-4.png",g:"127",t:"#1x"},"18":{p:1,n:"../PlusImages/Overlay-Type-3.png",g:"86",t:"#1x"},"10":{p:1,n:"../PlusImages/03-over-1.png",g:"101",t:"#1x"},
(you can see how the images are referenced above) - ../PlusImages/imagename.png Will this work or am I missing something??
Alright your text is a bit confusing, but I will give this a shot.
It sounds like your javascript file is being linked into an HTML page? If this is the case, then the path from the javascript to the images should be the same as it is for your HTML since that's where it's being run from.
I need to change the colors and backgrounds of an existing shopping cart web site so that all backgrounds are blue and all texts are black.
When the mouse is over an anchor element, its background should change to gray.
This site is designed using jquery, jquery plugins, jquery-ui,
ASP.NET / Mono MVC3, Razor views. . jquery ui default theme is used but in may places colors and backgrounds are specified in non-jquery ui css files.
There are number of css files so changing all of them is lot of work.
How to implement this ? Is it possible to add some jquery or other plugin javascript code to page which makes such adjustment or other idea ?
It should be changed to use blue and black colors.
How to implement this ?
Update
Most css files are included in Razon Site.cshtml file which is master page for all files.
css files are static and appear in start of every page:
<link rel="stylesheet" href="/comp/themes/base/jquery.ui.all.css"
type="text/css" title="ui-theme" />
<link href="/comp/Content/Css/jquery.ui.menubar.css" rel="stylesheet"
type="text/css" />
<link href="/comp/Scripts/jBreadCrumb/Styles/BreadCrumb.css" rel="stylesheet"
type="text/css" media="screen" />
<link href="/comp/Scripts/Pikachoose/jquery.fancybox.css" rel="stylesheet"
type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/comp/Scripts/jcarousel-0.2/skins/tango/skin.css" />
<link href="/comp/Content/Css/Site.css" rel="stylesheet" type="text/css" />
jquery-ui menubar, breadcrumb, fancybox, pikachoose jcarousel plugins are used.
First off, you wouldn't use JavaScript for this because it would create extra load time, wouldn't work for users with JavaScript disabled, and is entirely unnecessary.
To change the background colour of a page you'd find the body tag and add or change its background (or background-color) property:
body {
background:#F00; /* #F00 being the hex representation of "red" */
}
Your website may have multiple CSS files, but it should have one global CSS file for styles which are already applied to all pages. If this isn't the case, you should really consider combining any commonly used styles into one file and including that on all of your pages.
If changing your body styling doesn't change anything, you'll need to find out where the site is currently getting its background from. If there are two files with body { background:...; } declared, the latter included CSS file will override the former. That said, you can easily find which colour is being pulled through by consulting your browser's Element Inspector to find the body's "computed style".
Edit: based on your latest edit, going by the file names "/comp/Content/Css/Site.css" is the file you'd want to change.
Changing background-color for page can be achieved by applying style to body tag, but there are good chances that your page will have wired fonts because of existing css, thus asking you to push in more time finding individual fix then creating new one,
There is no shortcut to do this kind of work without good chances of failing and ending up spending more time in fixing.
Better would be:-
Create copy of css files and make you changes there, now change path to point to this new css.
If by any chance you are using themes create a new theme, if not consider having themes.
KISS principle:
Put this in a .js file and refer to it in the head or put it in the head tag as a script.
JavaScript:
function colorset(x,y)
{
document.body.style.background = x;
document.getElementById('ElementID').style.color = y;
}
HTML:
white on black
I have a website that runs smoothly, but I just saw that when I'm viewing the source, in Chrome and IE9, it shows my css and javascript inline instead of the link to the files. <style type="text/css" style="display:none">[my css]</style> instead of the <link rel="stylesheet" type="text/css" href="style.css" /> that I see in my PHP editor and that I coded on purpose. I don't see things like this on other websites, only at mine.
How is this possible? A certain change in server settings?
The browser tools are just in-lining it to make your debugging easier. This is merely a convenience to show you the flow of the page. The files are still external and shared across many pages.
There are 3 different ways of adding CSS to your HTML pages: inline, external, and attribute-based.
Inline CSS is what you have now. It's when the CSS code is directly embedded into your HTML.
External CSS is when you reference a CSS file, like your second example.
Attribute based CSS is when you directly set attributes in the HTML file. Ex:
<div style="CSS HERE"></div>
All 3 methods work the same, but for abstraction purposes, external stylesheets are recommended.
In your case, the PHP editor is probably injecting the CSS directly into your code.
I'm trying to display a website's content (preview) inside an admin interface. Thet requires the entire CSS stylesheet for the content (website) to be applied to the .preview DIV in the admin interface. The website.css file is not always the same as it depends which website is being previewed.
I' trying to use LESS.JS and Nested Rules but it will not work with Inline styles. I'm on a windows platform.
<style>
.preview {
<- Dynamically loading Website.css file content here ->
}
</style>
Problem is that LESS.JS will not act on inline styles. I'd like to keep the website.css file intact.
I could load the website.css, add the extra class, rename it to .less and write it back to the folder, and link the .less file... but it seems a bit too much for something so simple...
Thanks, ended up using LESS.JS which is pretty well suited for this task. I wrapped the Website.css file in a .class of the container DIV.
Less.JS compiles the CSS and adds the .class in front of all definitions, wich does the trick. – mfr just now edit
#*LESS.JS CSS*#
<style type="text/less" >
.preview
{
#File.ReadAllText(Server.MapPath(DesignHelper.GetTemplateFileName("Website.css")))
}
</style>
Notice the 'less' in <style type="text/less" >