I'm using HTML_EXTRA_STYLESHEET option to override default css rules. I can easily override some rules like span.mlabel or .SelectItem but .SREntry can't be overriden for some reason. In Firebug it's like my new rule never existed.
Css rules that I'm using:
.SREntry {
font-size: 10pt;
}
span.mlabel {
font-size: 11pt;
}
.SelectItem {
font-size: 10pt;
}
.SREntry is responsible for formatting search box results. It's defined in search.css and it seems that no rule from this file can be overriden.
Why is that I can override rules defined in doxygen.css but not in search.css?
[EDIT] Link to generated documentation. It uses a custom css file Custom.css with described above rules.
If you look closer to html that generated by search.js at runtime you will find out that
<iframe id="MSearchResults"> block contains another section of html document with
its own <head> section.
That is why you can't override this style.
<!--
HTML header for doxygen 1.8.7
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="cursor: auto ! important;">
<head>
... removed some html here ...
<script src="search/search.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="search/search.css"></link>
<link type="text/css" rel="stylesheet" href="custom.css"></link>
</head>
<body>
<div id="top"></div>
<div id="MSearchSelectWindow" onkeydown="return searchBox.OnSearchSelectKey(event)" onmouseout="return searchBox.OnSearchSelectHide()" onmouseover="return searchBox.OnSearchSelectShow()"></div>
<!--
iframe showing the search results (closed by defa…
-->
<div id="MSearchResultsWindow" style="display: block; top: 182px; left: 236px;">
<iframe id="MSearchResults" frameborder="0" name="MSearchResults" src="javascript:void(0)">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta content="text/xhtml;charset=UTF-8" http-equiv="Content-Type"></meta>
<meta content="Doxygen 1.8.7" name="generator"></meta>
<link href="search.css" type="text/css" rel="stylesheet"></link>
<script src="all_1.js" type="text/javascript"></script>
<script src="search.js" type="text/javascript"></script>
</head>
<body class="SRPage">
... and so on...
You can fix this with either modifying search.css somehow or using
this kind of code in custom js file with MutationObserver or setInterval based solution. Notice the ../ in path, you need to go one level up to find correct css.
var cssLink = "../custom.css"
var searchDocument = document.getElementById("MSearchResults")
.contentWindow.document;
var head = searchDocument.getElementsByTagName("head")[0];
var customStyle = searchDocument.createElement("link");
customStyle.setAttribute("href", cssLink);
customStyle.setAttribute("type", "text/css");
customStyle.setAttribute("rel", "stylesheet");
head.appendChild(customStyle);
Related
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
Bear with me, i am very new to web programming.
here is my simple code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlton Banks</title>
</head>
<body>
<h1>CLICK ON CARLTONS HEAD!</h1>
<a href="http://youtu.be/zS1cLOIxsQ8" target="_blank">
<img src="hey.jpg" alt="A picture" style="width:300px">
</a>
</body>
</html>
Here is the extremly simple css file:
body{
h1: green
}
When opening the site on a browsers nothing at all shows up, just this error message:
This page contains the following errors:
error on line 7 at column 10: Opening and ending tag mismatch: link line 0 and head
Below is a rendering of the page up to the first error.
As you are using XHTML, all tags needs to be closed.
The link tag should have a slash at the end to close it:
<link rel="stylesheet" type="text/css" href="style.css" />
The same for the image tag:
<img src="hey.jpg" alt="A picture" style="width:300px" />
The CSS is incorrect. I think that this is what you are trying to do:
body h1 {
color: green;
}
I would like to apply jQueryUI's tooltip to elements in the TinyMCE editor, however, they do not appear using FF, and are buggy using IE and Chrome. I've experimented applying jQueryUI's tooltip to elements in an iframe, and get similar results. My script is below, and a demo is at http://jsbin.com/abEkOnO/1/ (note that the iframe JS had to be disabled as it causes a proxy error using jsbin). I think the tooltips are being created, however, maybe the CSS is relative to the iframe and not the document. I've also experimented by creating my own tooltip plugin (http://jsbin.com/AzaKARe/1/), but also get funky results.
How can I use tooltips on elements in the TinyMCE editor?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>IFrame and tooltips</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({'selector': "#tinymce"});
$(document).ready(function(){
$('.tooltip').tooltip();
$('#click').click(function(){
console.log($('#iframeID').contents().find('.tooltip'));
$('#iframeID').contents().find('.tooltip').tooltip();
$('#tinymce').html('<div class="tooltip" title="Some Div4">Some DIV4</div><div class="tooltip" title="Some Div5">Some DIV5</div><div class="tooltip" title="Some Div6">Some DIV6</div>');
var t=tinymce.editors['tinymce'];
t.load();
console.log($(t.getBody()).find('div.tooltip'));
$(t.getBody()).find('div.tooltip').tooltip();
});
});
</script>
</head>
<body>
<button id='click'>Click</button>
<iframe src="iframe_page1.html" id="iframeID"></iframe>
<div class="tooltip" title="Some Div1">Some DIV1</div>
<div class="tooltip" title="Some Div2">Some DIV2</div>
<div class="tooltip" title="Some Div3">Some DIV3</div>
<div id="tinymce"></div>
</html>
iframe_page1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Bind</title>
<style type="text/css">
.toolTip {width:100px;}
.myTooTip {
z-index:99999;
border:1px solid #CECECE;
background:white;
padding:10px;
display:none;
color:black;
}
</style>
</head>
<body>
<div class="tooltip" title="Some Div7">Some DIV7</div>
<div class="tooltip" title="Some Div8">Some DIV8</div>
<div class="tooltip" title="Some Div9">Some DIV9</div>
</body>
</html>
In your case the e.pageY was problem,
as tinymce creates a iframe, the e.pageY is set to 0 from current location(of tinymce),
So the tool tip again goes to Y=respective to mce position. You need to handle it manually,
I have updated the JSbin with some tweaks,
this will solve the issue,
although you have to do some small tweaks, for 100% accuracy
Edit : Updated JSBin with JQuery UI,
Undated Link of JSBin
This works fine without any problem on my side, the problem was we were calling the same function twice and in iframe the mouseOut event is not passed to its parent window, that's why tooltip generated was not getting closed.
I have changing codes and this is simple tooltip that works same as in the iframe above. in example.
I have just removed redundant instance of the tooltip by changing class name :)
I hope this will do finally
I can't set the font-size of a text input from the style sheet. However, it works fine by setting the style attribute.
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" style="font-size:21pt;" />
</body>
</html>
This does not work (font-size is ignored):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text-htmlcharset=utf-; 8" />
<title>Test</title>
<style type="text/css">
#about {
font-size:21pt;
}
</style>
</head>
<body>
<input id="about" type="input" value="anything" />
</body>
</html>
What am I missing? Surely, you're not expected to use inline style for all text inputs? That seems pretty tacky and redundant in some cases. Thanks a bunch!
Change <style type="text/javascript"> to <style type="text/css">
You are confusing the browser because it is looking for JavaScript code, but you are feeding it CSS. <script> tags should be used for javascript, and <style> tags for CSS.
Your style block has a type of text/javascript. Remove that and it'll work fine.
I have a HTML file with inline CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
I am trying to parse the inline CSS using Ruby's css_parser library. Note that the inline CSS has 2 classes .ft0 and .ft1.
My code is:
require 'css_parser'
parser = CssParser::Parser.new
parser.load_file!('filename.html')
puts parser.to_s
Which outputs:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD> \n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0 {\nfont-size: 108px; font-family: Helvetica; color: #000000;\n}\n.ft1 {\nfont-size: 16px; font-family: Times; color: #000000;\n}\n"
when I do:
parser.find_by_selector(".ft0")
it returns an empty array.
It appears as though css_parser is seeing the entire string
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n<HTML>\n<HEAD>\n<TITLE>Page 1</TITLE>\n<META http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<DIV style=\"position:relative;width:612;height:792;\">\n<STYLE type=\"text/css\">\n.ft0
as the selector instead of just the class .ft0
Is there a way that I can fix this, so that it just finds the class .ft0?
CssParser doesn't find the target in HTML, it only wants a style-sheet definition. You need to parse the CSS from the HTML then pass it to CssParser.
This might get you started:
require 'nokogiri'
require 'css_parser'
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Page 1</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<DIV style="position:relative;width:612;height:792;">
<STYLE type="text/css">
.ft0{font-size:108px;font-family:Helvetica;color:#000000;}
.ft1{font-size:16px;font-family:Times;color:#000000; }
</STYLE>
</HEAD>
<BODY bgcolor="#A0A0A0" vlink="blue" link="blue">
<DIV style="position:absolute;top:457;left:225"><nobr><span class="ft0">Sample</span> </nobr></DIV>
<DIV style="position:absolute;top:62;left:241"><nobr><span class="ft1"><b>HTML</b></span></nobr></DIV>
</BODY>
</HTML>
'
doc = Nokogiri::HTML(html)
stylesheet = doc.at('style').content
parser = CssParser::Parser.new
parser.add_block!(stylesheet)
puts parser.find_by_selector(".ft0")
Which outputs:
font-size: 108px; font-family: Helvetica; color: #000000;