My goal is to show a logo everytime I open my a notebook with jupyter. The way I went about this was to create a
custom.js
custom.css
file inside .jupyter/custom/ .
custom.js:
var html_outlie = `
<div id="test-container" class="container">
<div id="test-logo">
<img src="<what_location??>/logo.png"></img>
</div>
</div>
`
jQuery("#notebook_panel").prepend(html_outlie)
and my custom.css has:
#test-container {
background-color: white;
padding: 50px 0;
}
#test-logo {
text-align: center;
padding-bottom: 50px;
}
The problem is, depending on which path I start the notebook, the logo will not show. How can I use an absolute path so that no matter where I start my notebook, the logo will always show?
The next step would be that everyone working on their own computer, and uses the same customizations, will see the logo.
You cannot out of the box make requests to absolute paths for security reasons.
What you are actually trying to do is a write a server extension with custom handlers, and one that can serve the logo file under a relative url of your choice.
This extension will have complete access to the local filesystem and do whatever it wants.
You may have to handle "base_url" on the javascript side, in case the notebook is deployed on JupyterHub behind a prefix, but that's not necessary for most users, nor when developping.
Related
I'm following a tutorial of a responsive website using Jekyll.
I'm working on the header now and I'm trying to use an image as the background of the header, but I'm having problem to find the relative path for this image.
This is the path of the image in my computer: /Users/CaroleCarlos/Pictures/60H.png
and
This is the path of the folder I'm saving my project: /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit
I'm using the following code to set the image as the background using sass:
header {
height: 450px;
background: url(../Pictures/60H.png);
}
but I does not work. I've tried another paths also but I don't know what I'm doing wrong that I can't find the image.
I'm using Expresso as my text editor.
I know it is not a hard thing to solve, but I've been trying to make it work for a while now, and I can't figure it out.
You need to go two directories back like the below code. ../ is a filler for each directory level in relative paths.
header {
height: 450px;
background: url(../../Pictures/60H.png);
}
I would recomment you to make your projet in on folder to prevent this.
you should make a folder images like so : /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit/images
Then your path should me background: url(images/60H.png)
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
sorry i am new to CSS. I am doing a school unit where i have to create a web page using CSS based on an image design. Anyway, i finally finished and everything works great. though i found out that as a requirement for my unit i need to have my CSS file in a folder called 'styles'. so i created a new folder called 'styles', i placed my site.CSS file in there then updated my css link from:
<link href="site.css" rel="stylesheet" type="text/css">
to
<link href="styles/site.css" rel="stylesheet" type="text/css"> to cater for the new file path.
When i open the webpage every thing remains the same except for my unordered list background image does not display? everything else that is styled in the CSS file all works fine, just only the background image for my UL disappears. But when i put the CSS file back where it was originally from(same path as my Index.html file) and change the path back to it all works fine again and the background image re-appears.
What could i be doing wrong? i just can't figure out what to do.
the css code for the particular style:
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 10px;
background-image: url('images/pg_menu_bg.png');
}
Thanks for your help, i hope this isn't a stupid question!
This is because you've changed the directory structure of your project.
When you reference a filepath in css without a slash at the start, the browser assumes you are referencing relative to where the CSS file is, so when you place the CSS file in the styles directory, it's looking for the image in:
/styles/images/pg_menu_bg.png
Where the image actually exists in:
/images/pg_menu_bg.png
This is why it works when you put the css file back in the root directory (I hope that makes sense?)
You should be able to get around this by changing your background css to:
background-image: url('../images/pg_menu_bg.png');
the ../ essentially means go up one directory from the directory the css file is located in.
It would be even better to write is as:
background-image: url('/images/pg_menu_bg.png');
The slash at the beginning tells the browser to look in the root directory, this means that regardless of where your css file is located the code should work. Unfortunately this doesn't work if you're accessing the html files on your computer (as the root of your computer is C:/)
You have to change the path of your background image also. Now your CSS file isn't in the root location anymore. So you have to use something like this -
background-image: url('../images/pg_menu_bg.png');
I have published an android Chromecast app. My receiver app is using the default receiver. Now I'm trying to customize the receiver using a css.
I followed the developper guide (https://developers.google.com/cast/docs/styled_receiver) and I tried to host this css file on my drive account as it's explained here https://support.google.com/drive/answer/2881970?hl=en
But something must be wrong because after having updated my receiver app with the CSS url and restarted my chromecast I don't see any modification. I guess the way I shared the drive hosted css file must be wrong.
Here's my css :
.logo {
background-image: url(logo.png);
}
.progressBar {
background-color: rgb(244, 132, 45);
}
.watermark {
background-image: url(watermark.png);
background-size: 57px 57px;
}
both images have also been shared publicly.
BTW looking at Google documentation, it looks like there should be a preview button in the chromecast console, but I don't see it.
Any idea what's going on ?
I finally got it to work.
The default url when sharing the css file was
https://drive.google.com/file/d/XXXXXXXXXX/edit?usp=sharing
In fact I just needed to change it into
https://googledrive.com/host/XXXXXXXXXX
To make it work
Then in my css file I had to change both logo.png and watermark.png into absolute url, both hosted on drive in my case so i had to use their shared url (https://googledrive.com/host/yyy)
I have created a basic MVC3 site and have added image paths into the site.css file (part of the original template).
When I run the application through dev studio the site looks OK and the images are displayed.
When I build my installer and deploy the site onto my server the images aren't displayed.
Here is a sample of my css file:
#CustomerLogo
{
position: relative;
margin-left:auto;
margin-right: auto;
width: 300px;
height: 96px;
background-image: url(/Content/themes/base/images/CustomerLogo.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: rgb(41,139,178);
}
Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/... which is the root rather than at facebook.com/myGreatApp/Content/...
As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.
Seems like issue with deploying your site to virtual directory. Anyways, you should include images relative to css file, not to application. Try
background-image: url(themes/base/images/CustomerLogo.jpg);
Have you tried a relative path? Assuming your css file resides in ~/Content/themes/base, this should work:
background-image: url(images/CustomerLogo.jpg);
You may need a .. to assist in finding the Content folder,
Example:
background-image: url(../Content/themes/base/images/CustomerLogo.jpg);
Are you sure that the URL is working? If you try to access the URL directly through the address bar, do you see the image?