I would like to center heading cells in IPython notebook.
I know it is possible to create centered headlines by writing HTML, but then I can't get a reference to the cell when using table of contents (nbtoc ext.)
Is there a way to write HTML headings with reference or heading cells with centered text?
Thanks!
If you want to center a heading without custom css, you can surround your text with center tags.
For example, if you wanted to make a centered h1 title cell:
# <center>Title</center>
Another option is to use:
<h3 align="center">This is a centered header</h3>
as shown here.
This could be done using a custom css; see this question for more details on setting up the profile and the appropriate files.
An example custom css can be found in Barba's 12 Steps to Navier Stokes course although the actual file may contain more detail than you need. The actual ipython notebooks there directly load the css, rather than using a profile method, which also works. To center the headings, just modify the css file to
h1 {
...
text-align: center;
}
as usual.
Related
I am looking to open an HTML/CSS file with MS Word. I have a table in the file and would like to set the table properties, text wrapping to NONE using CSS. I understand Word should be able to interpret the HTML/CSS.
I cannot find any CSS to apply NO text wrapping to an entire table. Can anyone help?
If you are writing your styles separately, you can define your css as such:
table th,
table td {
white-space: nowrap;
}
That is going to make ALL table header and regular cells not wrap, so be aware of that. If you are trying to make this change and you need to target a cell directly, you would have to make the above CSS more specific by adding class names to the cells you want to target. Or add the CSS inline to the cell: <td style="white-space:nowrap"></td>
On the homepage of my developing ecommerce store just below the carousel, there is an image under the H1 "I Wish I Were Knitting..." that has a paragraph sort of wrapped to it.
I have applied a float class to the img tag which is located within the p tag. I have one line of text floating correctly by removing the bootstrap img-responsive class from the img tag.
Why won't the full paragraph wrap? I would put markup and CSS in this text here but because this code in question is part of a huge .asp system, I wonder if folks would please check out the markup and CSS with the Inspect Element on the page itself where you can see the other code and CSS around it.
I see you added class="floatleft" but you need to add the css float: left;. Tested using Chrome Dev Tools and it works :).
You can always add the class to your css using the following :
.floatleft {
float: left;
}
Then you will only need to change the CSS and not your HTML. Good luck!
I found my main error. It's an understandable error given the state of my development. Turns out I was editing the wrong css file. When I put my css in the correct file, everything worked. I'll examine your kind ideas and observations with appreciation. Yes, padding will help.
I have below ipython notebook code (markdown):
#### example table
|Name|Description|
|--|-------------------------------|
|Mary |She is a nice girl.|
|Jackie |He is a very naughty boy.|
The output looks like below:
How can I:
Left align the table of the cell, it's center by default now.
Right align the second col text.
Well, yes !
| Name | Description | age
| :- |-------------: | :-:
|Mary| She is a nice girl. | 20
| Jackie Junior | He is a very naughty boy. | 5
:--- or --- = left align
---: = right align
:---: = centered
Answer to the 1st question - left-align the table - create and run a code cell above the table markdown cell, with the following content:
%%html
<style>
table {float:left}
</style>
I would suggest to use this variant of the knuth's answer that doesn't affect the flow of the remaining elements around the table. Put this code inside a cell above the one containing the table:
%%html
<style>
table {margin-left: 0 !important;}
</style>
You can make a custom preference in Ipython.
Just make the following file
~/.ipython/profile_default/static/custom/custom.css
and add the following code.
table {float: left};
and You don't have to put the custom css in all ipython files.
I know many have already answered this, but personally, I found their answer lacks a little more description, and because of this many are not able to implement this.
Clarification
Also, I want to clear one thing that I am not giving the solution for aligning the values inside the table but for aligning the whole table rendering itself. And if you are looking solution for the table's cell alignment then you can consider the first answer itself
Solution
Here are the steps:
First create a Code cell (not markdown) just above your markdown cell where you want to show your table.
Then write the following in your Code cell inside it.
%%html
<style>
table {float:left}
</style>
Run your Code cell.
Now just create your table as normally you do, no need to add anything extra. And Voila! Your table should now render to the left.
For every notebook, you have to do this step for changing the table alignment. But if you don't want to do this, you can follow #Anderson answer. For ease, I am copying his answer here.
First you need to create a file named custom.css where you will put the following code
table {float: left};
Then you have to move this file to your ipython directories, it will be something like this
~/.ipython/profile_default/static/custom/custom.css
Hope it helped 😊
Yeah, I don't like that centered table either. Insert this at the top of your notebook after the imports section:
from IPython.core.display import HTML
table_css = 'table {align:left;display:block} '
HTML('<style>{}</style>'.format(table_css))
The IPython.core.display namespace allows you to imbed audio, local filelinks among others - as well as HTML within your notebook.
!important overrides the css of rendered _html
Use your styles with !important
<style> table td, table th, table tr {text-align:left !important;} </style>
Answering the fist question: When creating a table and assigning it the float: left attribute you end up having to add more CSS to resolve the text that surrounds the table. Place this in a code cell before your markdown cell
%%html
<style>
table {
display: inline-block
}
</style>
However, if you have a lot of CSS, might be best to put it in another file for the overall beauty of the document.
#jrjc answers the 2nd question perfectly ;)
If you look at the table in the inspector, you'll see that the cause of the issue is the fact that the margin-left and margin-right CSS properties on the table are set to auto, making it centered. You can make it left-aligned by doing something like this in your custom.css:
.rendered_html table {
margin-left: 0px;
}
That should only left-align those specific tables and not affect anything else.
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
I want to add more formatting elements than provided by the Markdown synthax in an IPython Notebook.
For example, I want to add a "Warning Box" or a "Memo Box" that are basically paragraph with different styles (for example different background color, border, an icon, etc...).
I guess I can add HTML code in the cell, for example a <div> with an inline style. But what is the "proper" way to do that, I mean the one that ipython developer promote?
Examples appreciated.
NB: I'm using the current 1.0dev version from git master.
Answering to my own question...
Other solutions
Jim proposed to add some custom CSS style in a markdown cell of each notebook. This solution works, but is not convenient since you need to embed the style on each notebook. In my case I want a global style and I don't want to modify all the notebooks after every the style modification.
A natural solution would be using a custom file (custom.css) containing the style. However after trying these instructions
the style is not applied to the notebook (it can be downloaded from the server though).
Best solution (so far)
I found a solution looking at this impressive book written as a collection of IPython notebooks. The author adds at the end of each notebook the following code cell:
from IPython.core.display import HTML
def css_styling():
styles = open("./styles/custom.css", "r").read()
return HTML(styles)
css_styling()
Putting a file custom.css in your notebook folder (in the styles subfolder), the style will be loaded after the first cell execution. Moreover the style will be magically loaded every time the notebook is opened, without the need to execute the cell again!
This magic trick works because the style is saved in the ouput cell the first time we execute it, and although being invisible, will be saved like any other output. So when we load the notebook, and conseguentely the output cells, the style will be applied.
Sample CSS
To complete the answer I post a CSS style I used to create a "Warning box":
<style>
div.warn {
background-color: #fcf2f2;
border-color: #dFb5b4;
border-left: 5px solid #dfb5b4;
padding: 0.5em;
}
</style>
Save this style and load it using the code cell shown before. Now, to insert a warning box in your notebook use this syntax:
<div class=warn>
**Warning:** remember to do bookeping
</div>
That will be rendered like this:
For more general notebook styling you can take inspiration from the custom.css
of the book mentioned above.
A simple way to add warning, note, success (etc...) boxes (also called admonition or alert boxes) is simply using the bootstrap classes already included with the notebook. The only caveat is that links and other styles (e.g. bold) must be specified in HTML inside the box.
Example
A markdown cell containing this code:
# Upload data files
<p class="lead">This Jupyter notebook
shows how to upload data files to be converted
to [Photon-HDF5](http://photon-hdf5.org) format. </p>
<i>Please send feedback and report any problems to the
[Photon-HDF5 google group](https://groups.google.com/forum/#!forum/photon-hdf5).</i>
<br>
<div class="alert alert-warning">
<b>NOTE</b> Uploading data files is only necessary when running the notebook online.
</div>
will result in this output:
You can change alert-warning with alert-success, alert-info or alert-danger to get different colors for the box.
Update: This technique no longer works in IPython 4.0 / Jupyter since the way the notebook is rendered has changed.
I believe the best way to do such styling is to create a markdown entry at the top of your document and to collect your styles there. Since a markdown cell can contain any valid HTML code, it could contain (for instance)
<style>
.warning { color: red; }
</style>
See Matt Davis' PyCon 2013 talk, about 22 minutes in during the Q&A for an example of this in use.
These custom css styles are already added in ipython version 2 and higher.
<div class="alert">
As of IPython 2.0, the user interface has changed significantly
</div>
<div class="alert alert-success">
Enter edit mode by pressing `Enter`
</div>
<div class="alert alert-error">
Don't try to type into a cell in command mode
</div>
Just paste this in the cell and change it to markdown type.
Check this for the examples and ipython in depth for the cutting edge features of ipython.
Another mean consists to simply create a style chain and open it with iPython HTML object in a code cell:
from IPython.display import HTML
style = "<style>div.warn { background-color: #fcf2f2;border-color: #dFb5b4; border-left: 5px solid #dfb5b4; padding: 0.5em;}</style>"
HTML(style)
Then use it in a markdown cell:
<div class="warn">Warning!</div>