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'm facing a strange issue where an image uploaded from a mobile device to my website appears rotated on Chrome and Firefox when viewed on a desktop. However, it displays correctly on mobile browsers like Chrome Mobile and Safari Mobile. It seems tha ...
I have been struggling to implement a pure CSS menu that shows on hover. Although everything seems to work fine, I encounter an issue when trying to hide and then show the menu again upon hover. Here is the HTML code: <ul id="nav-menu"> <li& ...
I created a form with PHP code to send emails, but I'm struggling to add an alert without page refresh upon submission. The alert needs to display in green or red text below the button. Validation for email input is needed, as well as protection again ...
I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this? ...
Utilizing the default Bootstrap3 CSS files for my project. I've come across an issue where the modal-dialog width is set to 600px by default, while I require it to be 1000px for my screen size. Regardless of the screen size exceeding 1000px, I need t ...
I am facing an issue with two buttons in my code. One button is used to increase a count and the other button is meant to submit the count and move to the next page. The problem is that when I click on the "Proceed" button, it requires two clicks to procee ...
With three divs displayed inline, each containing an image, heading, paragraph, and anchor tags, a design issue arises. The inconsistency in text lengths under the images causes visual discrepancies when resizing the window. For example, while the first tw ...
Seeking guidance on creating a seamless html/css gallery without any spacing between each gallery element. All elements are identical in size, housed as list items within a ul inside a div. Media queries have been established to adjust site and image siz ...
My list is not loading and I can't figure out why. I've included my json, jquery, and HTML below. The console isn't showing any errors, but the list is still blank. Any help would be greatly appreciated as I am new to working with json. Than ...
Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin? I want the final result to resemble this: https://i.stack.imgur.com ...
As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...
I have a scenario with two different sized divs: <div class = "bigger"> </div> <div class = "smaller"> </div> The goal is to hide the bigger div and show the smaller div when the screen width is ...
I'm currently tackling this school assignment and have hit a roadblock with two issues. The HTML Validation error I'm encountering is regarding a table row that is 5 columns wide, exceeding the established count by the first row (4). From line 7 ...
I'm having trouble separating the two photos on this page. When I hover over one, the other also fades in. Additionally, the text box is overlapping the first photo. My goal is to have a total of 6 photos on the page, each with a dropdown list contain ...
I wanted to create a hover effect where the image would enlarge when hovered over. I achieved this using a JavaScript function that applies the transform property with a scale of 1.2 to the picture. However, during the animation, a black line appears at th ...
I am currently working on a project that involves querying a server for user authentication using C# and ASP.NET, as I am still learning these technologies. Previously, I worked with JSP. The issue I am facing : For some reason, my methods are always re ...
Connected to this AngularJS issue on IE10+ where textarea with placeholder causes "Invalid argument." and also this AngularJS 1.1.5 problem in Internet Explorer with ng-show and objects (Bug), we had to resort to using the textarea element as a self-closin ...
Hey there, I created the design like this. However, the submit Tabindex is not working as expected. Can you please take a look at it and let me know what might be causing this issue? <input id="id" type="text" value="" class="input" tabindex="1"/> ...
import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...
I've been struggling to get this to display side by side in a two-column grid. Even after following Bootstrap tutorials, I can't seem to make it work. Check out the code below: <div class="row"> <div class="col-md-8 ...