Is it possible to customize the landing page of an iPython notebook server (version 2.3)?
By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the current banner.
Is this feasible?
If you want to customize the banner logo on your website, you can easily do so by editing your custom.css file.
To change the text displayed on the banner, just insert these lines into your custom.css:
#homepage_banner::before{content:"Explore our website"}
#homepage_banner img{display:none;}
You may need to add some extra styling for a better look.
To replace the banner logo with your own image, upload your logo to ~/.custom/static/logo.png and then include the following code in your custom.css file:
#homepage_banner img{
display:block;
background: url(/static/logo.png) no-repeat;
width: 200px;
height: 50px;
padding-left: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
By following these steps (and tweaking the CSS), your homepage will have a fresh new look :)
I found most of this information from this recent email thread, and the necessary CSS tips from here. You might also find these "hacking" notebooks interesting.
Here is the tailored custom.css I created for enhanced customization:
body { background-color: #fcfcfc !important; }
body, p, div.rendered_html {
color: #336699;
font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
font-size: 11pt;
}
h1, h2, h3, h4, h5, h6 {
color: #003366;
}
#notebook {
background-color: #ffffff !important;
}
/* Additional styling for notebook header */
#ipython_notebook a img[src*="ipynblogo"] {
display: none;
}
#ipython_notebook a{
display:block;
background: url(banner.png) no-repeat;
width: 250px;
height: 70px;
padding-left: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
span#notebook_name {
color: #993333;
height: 1em;
line-height: 1em;
padding: 2px;
border: medium none;
font-size: 90.0%;
font-variant: small-caps;
}
#menubar-container {
font-size: 9pt;
}
#menubar .navbar-inner {
min-height: 12px;
border-top: 1px none;
border-radius: 0px 0px 2px 2px;
border: 2px solid #cccccc;
}
.navbar-default, .navbar-static-top {
background-color: #ffffff !important;
color: #999999 !important;
}
#maintoolbar { padding-top: 0.1em; padding-bottom: 0.1em; }
/* Styling for Forms and Menus */
.dropdown-menu { background-color: #ffffff !important; border: none !important; }
.dropdown-menu > li > a { color: #003366 !important; }
.dropdown-menu > li > a:hover { color: #ffffff !important; }
.dropdown-menu > li.disabled > a { color: #cccccc !important; }
/* Cell Formatting */
div.cell {
border-radius: 0px 0px 2px 2px;
border: 1px solid #fcfcfc !important;
}
div.cell.selected {
border-radius: 0px 0px 2px 2px;
border-color: #f0f000 !important;
}
div.cell.edit_mode { border-color: #f00000 !important; }
div.input_prompt { color: #ff6600 !important; }
div.output_prompt { color: #ff0066 !important; }
div.input_area {
background: #fefefe !important;
border: 1px solid #d1d1d1 !important;
}
.celltoolbar {
background: #eee8d5 !important;
color: #586e75 !important;
border: 1px solid #002b36 !important;
}
/* Custom CodeMirror Styling */
.cm-s-ipython {
font-family: Andale Mono,AndaleMono,monospace;
font-size: 12px;
line-height: 1.15em;
color-profile: sRGB;
rendering-intent: auto;
background-color: #fbfdff;
color: #93a1a1;
text-shadow: none;
border-radius: 4px;
}
...
... (continued code)
I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...
I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...
My code is supposed to display a lightbox as soon as the page loads, similar to a popup window. However, there seems to be an issue with closing the lightbox when clicking on the 'x' button at the corner of the box. Unfortunately, the current cod ...
Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...
I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...
I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...
I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...
I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...
Hi there! I am facing an issue with dynamically adding multiple select boxes. Currently, I have 4 color-coded options under the selection boxes, which work fine when there is only one box. However, when I add more than one select box, the color coding doe ...
When a link is clicked on a website, the URL remains unchanged but a popup appears on the screen containing elements that can only be accessed after running driver.switchTo().defaultContent(). To access these elements, I have used a javascript executor com ...
I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...
index.js: function Home () { return <div> <html> <head> <title>Site</title> </head> <body> <div class= 'v5_3' onclick = "func_click()"></div> </b ...
When trying to pass a parameter to the URL path to specify which user's role I want to change, I keep encountering an error. NoReverseMatch at /manageuser/ Reverse for 'editrole' with keyword arguments '{'user_name': &apo ...
Take a look at the screenshot below - what you see on the left side is my current setup, while on the right side is the desired outcome achieved without any plugins or HTML5 attributes The left side scenario occurs when I have 2 input fields - one with th ...
I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...
I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...
I am making an electron app that converts data from .txt files to Javascript arrays. This data is stored inside a folder called faces in the main directory. I also have a button in my app which, when clicked opens file explorer at the faces folder so the u ...
Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...
I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...
Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...