I want to use the cytoscape-panzoom plugin distributed with Cytoscape.js. In my html page, I have included the according files from the cytoscape-web/plugins directory, as well as jquery and jquery-ui:
<link rel="stylesheet" href="javascript/jquery.cytoscapeweb-panzoom.css" />
<script type="text/javascript" src="javascript/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cytoscapeweb-panzoom.js"></script>
In the css file jquery.cytoscapeweb-panzoom.css I have modified the locations of the png files containing the ui-icons as advised in the comment (the png files are accessible, I can see them when I paste the link in the browser):
.ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_ffffff_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_ffffff_256x240.png");
}
.ui-cytoscapeweb-panzoom-pan-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
.ui-cytoscapeweb-panzoom-static .ui-cytoscapeweb-panzoom-zoom-button .ui-icon {
/*background-image: url("../images/ui-icons_000000_256x240.png"); /* point to your copy of the img */
background-image: url("http://cpdb.molgen.mpg.de/download/ui-icons_000000_256x240.png");
}
However, after the page loads, the panzoom controls (the circle, slider, etc.) are missing their icons, as can be seen in this screenshot (resource does not exist anymore). Does anyone have a clue what I'm doing wrong?
If you're building from the master branch, you may have to redownload the stylesheet. I think the selectors you have are out-of-date since the name change. The class names wouldn't have cytoscapeweb in the name anymore.
Related
I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
I am looking for a way to create PDF from (BLADE )HTML with CSS
I am using this.
"barryvdh/laravel-dompdf": "^0.8.7",
but its output looks misconversion.
$pdf = PDF::loadView('test'
)->setPaper('a4', 'portrait');
return $pdf->stream("aaa.pdf");
I use this html
https://github.com/okoppe8/PaperFormToHTML
result here.
Use Custom font to display.So download simhei.ttf from any source.and place it public folder.Then you can use below css
<style type="text/css">
#font-face {
font-family: SimHei;
src: url('simhei.ttf') format('truetype');
}
* {
font-family: SimHei;
}
</style>
As per github issue
Ref:https://github.com/barryvdh/laravel-dompdf/issues/198
Download font from
https://www.wfonts.com/font/simhei
I'm trying to apply css to my PDF when using ABCPDF. I set the media type to MediaType.Print in the code behind like so:
doc.HtmlOptions.Media = MediaType.Print;
I then add the HTML using the AddImageHtml function.
In the HTML markup I added the following:
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio 6.0">
<style type="text/css">
#media print {
table {
background-color: red;
}
}
</head>
Unfortunately this does not work and my tables do not change to red. If I change the CSS from #media print to #media screen it works perfectly fine, which is puzzling because I set the media type to print in the code. Is there another option I'm forgetting to set?
use Gecko as your engine;
doc.HtmlOptions.Engine = EngineType.Gecko;
Gecko engine supports both print and screen media types. The default MSHTML may only support screen.
Following the Visualizing Your Grids https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids instructions, I've been attempting to get the toggling functionality to work.
First off, can someone explain what the following is actually suppose to do?
compass install singularitygs/grid-toggle
I am assuming create a folder and some files, but when I run the command, nothing happens. If I do the following..
compass install singularitygs/box-sizing
It creates directories and files as expected.
My project works fine with Singularity (this is just 1 SASS file, 1 html file)
#include background-grid works within the SCSS file, but that's the first way of doing it and I'm interested in the toggle version.
I have tried to manually include the grid.js AND grid.min.js file provided and referenced them in the head of my index.html file. I added the data-development-grid="show" to the body tag as suggested. I can't even get the grid to show by default, let alone getting it to work with the toggle.
Here is part of my gem file
gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'
group :development do
gem 'guard'
gem 'guard-compass'
gem 'guard-livereload'
end
And my simple HTML file
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
<h1>test</h1>
<div id="mydiv" class="no-mqs container">
<p>This is my div</p>
</div>
</body>
</html>
And my 1 SCSS file
#import 'compass';
#import 'compass/reset';
#import 'toolkit';
#import 'singularitygs';
#import 'breakpoint';
There are some grid variables, a container class, some other basic styles below all of the above imports.
Any help appreciated.
Thanks
The quick answer is to refer you to my question and answer on the same topic, about two questions ago. However, basically, there are three ways. The first you have found and you can place '#include background-grid' in the element that you wish to have a grid shown. I think you will find that you can't install grid-toggle, as directed, but I don't think you need to. The second method is the toggle. You have to place '#include grid-toggle' in your style.scss in either a * { ... } selector or an html{ ... } selector. You reference the script grid.js in the head of your web page. However, that script assumes you want the grid on your body div. You add data-development-grid="show" (or "hide") inside the body opening div.
You can put the grid on another element such as a wrap div (don't we all use wrap?), by adding data-development-grid="show" to the wrap div, but then you need to modify the grid.js file. Here is my javascript version as a guide (seems to work, but I'm no programmer!):
(function() {
window.onload = function() {
var body = document.body;
body.onkeypress = function(e) {
if (e.keyCode === 103 || e.charCode === 103) {
var wrap = document.getElementById('wrap');
var dev = wrap.getAttribute('data-development-grid');
if (dev === null || dev === 'hide') {
wrap.setAttribute('data-development-grid', 'show');
}
else {
wrap.setAttribute('data-development-grid', 'hide');
}
}
};
};
})();
BTW, your body or wrap (whichever you choose) must not have a background colour or image because the grid will be underneath and therefore invisible.
The third method is the overlay, which I particularly like because it sits over the background colour. for this, add #include grid-overlay('#wrap'); to the *{ ...} or html{ ... } element in your style.scss file. You will get a 4-line symbol in the bottom left and when you mouseover it, it causes the grid to appear - mouseoff = disappear.
I've assumed that you want the grid in a wrap div, but you can put it where you like.
I hope this helps.
For me it worked using the command: bundle exec compass install singularitygs/grid-toggle
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.