I'd like to increase the size of all body text (I don't know the right term, but text that is not in a special markdown category) in a dozen Jupyter notebooks. The notebooks are all stored in one repo, so they can share a css file. But I've no expertise in css.
The directory containing these notebooks has this custom.css file
h4 {
font-weight: normal;
text-align: justify;
}
#TOC, #book-cover {
width: 50%;
float: left;
}
#TOC {
font-size: 130%;
}
#main_content_wrap p, #main_content_wrap ol {
text-align: justify;
}
#main_content_wrap ul li {
list-style-type: none;
margin-bottom: 5px;
}
#main_content_wrap ul li a {
font-weight: bold;
}
#image-cc {
width: auto !important;
}
but I do not know if it is being used. The system (a Docker container) contains a .jupyter directory, but it contains no css files.
Ideally, I'd like a reference to a clear, fairly simple manual on using css for Jupyter notebooks. I'm aware of this good CSS reference, but it does not consider Jupyter notebooks. ("Give a man a fish ..., teach a man to fish ...")
Thanks, Arthur
If you set the body tag font size, it will change the text everywhere. This includes relative sized css like your #TOC id which is based in % and also will impact any relative size values like em.
body { font-size: 20px; }
Related
I have an app for the 2018 World Cup calendar and I want to update it to 2022. I ran into a couple of problems:
The form in the title used to show a background image and now I can't get it to appear. I have tried with tbMenu.getTitleComponent().setUIID("TitleArea"); and it does not work.
TitleArea {
background-image: url(images/rojo.png);
background-color: red;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also put buttons that change when pressing a forward or back command and now it only shows the first time and when I press the command the area appears blank.
Try "tbMenu.setTitleComponent(cnP);" which works for the first time but it doesn't update when i press the command.
I appreciate the support
Hi,
I have placed an image in drive because stackoverflow sends me an error when trying to place it. https://drive.google.com/drive/folders/1LVBZPMCTTTEZxEYfwrh3S2_fPzyktTiN
As you can see, I tried several combinations and not from what I deduced the problem is about the title area because in certain parts it works. I copy the changes I made to the CSS and the image shows the result in the hope that it will tell me which is the correct way.
Title {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: red;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
TitleArea {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCommand {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCustom {
background-color: transparent;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also include the method where I load the titles for the first time.
final Toolbar tbMenu = new Toolbar();
this.setToolBar(tbMenu);
Vector vGP = grupoResultadosActivos("A");
Container cnP = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label lbTitulo = new Label("GRUPO A");
lbTitulo.setUIID("Title");
cnP.addComponent(lbTitulo);
if (vGP.size() > 0) {
int cnt = contadorBarraPaises(vGP);
if (cnt > 0) {
cnP.addComponent(cargaBarraPaises(vGP, cnt));
}
}
cnTitleArea.add(cnP);
cnTitleArea.setUIID("TitleCustom");
tbMenu.setTitleComponent(cnTitleArea);
tbMenu.repaint();
It's hard to tell with things like this. I suggest using the component inspector and reviewing the components in the hierarchy to see what went through then editing the CSS dynamically to see the changes.
Important: sometimes changes don't apply in this way!
You will need to stop the simulator and delete the res file. Then do a clean build. It's rare but it happens in some configurations and might be misleading.
About the specific issues. For the first try adding:
cn1-background-type: cn1-image-scaled-fill;
setTitleComponent is problematic since it overrides the entire title area. Many generic behaviors will stop working if you do that. It's an all or nothing situation and might be the reason other things don't work.
I'm trying to create custom blocks for use in my book, written in bookdown. Unfortunately clicking Build Book in RStudio produces no output for the block. That is, the block does not appear in the output HTML but everything else in the book does.
I don't really know anything about CSS so decided to copy code from the bookdown book as a starting point. All the files below are located in the root folder of my book.
My style.css file looks like this:
.rmdcaution, .rmdimportant, .rmdnote, .rmdtip, .rmdwarning {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5 5px center/3em no-repeat;
}
.boo {
padding: 1em 1em 1em 4em;
margin-bottom: 10px;
background: #f5f5f5;
position:relative;
}
div.boo:before {
content: "\f518";
font-family: FontAwesome;
left:10px;
position:absolute;
top:0px;
font-size: 45px;
}
p.caption {
color: #777;
margin-top: 10px;
}
p code {
white-space: inherit;
}
pre {
word-break: normal;
word-wrap: normal;
}
pre code {
white-space: inherit;
}
The first style block was copied from the bookdown book and the second was based on the SO example here.
Next, my _output.yml file looks like this:
bookdown::gitbook:
css: [style.css, fontawesome.min.css]
config:
toc:
before: |
<li>Surviving Statistics</li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
Finally, I call the blocks in my rmd file thus:
```{block, type='boo'}
Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block.
```
```{block2, type='rmdnote'}
If you are planning on printing your book to PDF, you will need a LaTeX distribution. We recommend that you install TinyTeX (which includes XeLaTeX): <https://yihui.name/tinytex/>.
```
As you can see, the first is a copy of the SO example above and the second is a copy of the bookdown book itself.
Any help much appreciated!
I'm trying to create a word cloud type output with only CSS. Basically, I have a div box and a X number of text elements which need to go inside the box. However, they need to be of different font size. For example, let's say I have this:
.box { display: flex; width: 40vw; height: 30vw; overflow: hidden; }
.text1 { font-size: 5vw; }
.text2 { font-size: 4vw; }
.text3 { font-size: 3.5vw; }
.text4 { font-size: 3vw; }
I can position the text elements inside the box but I have a few questions regarding the layout. My lack of thorough CSS knowledge prevents me from telling if this is possible at all with just CSS or not:
How can I avoid collision of the text elements?
How can I ensure they stay within the boundaries of the box?
I believe it's not possible to make Word Cloud using CSS only, you need to have Javascript function or lib like WordCloud2.js that handle element positioning.
Demo:
https://timdream.org/wordcloud/#wikipedia:Cloud
References:
https://github.com/timdream/wordcloud2.js
https://github.com/timdream/wordcloud
I want to open a subbreddit in hebrew and i want to "mirror" the site using the css sytlesheet so it will fit nicely with the hebrew. I want that the tree structure of the comments will be aligned to the right.
here is an example of what i want to achieve:
before:
image1
after (with damaged text):
image2
so, i want to make the structure of the site to look like in image2, but without damaging the text.
is it possible?
update:
here is the css code that i have right now:
there could be non-relevant selections, i'm just experimenting withe the stylesheet by trial and error:
.thing {
display: inline;
}
.sitetable {
display: inline;
}
div.content {
display: block;
float: right;
}
body {
direction: rtl;
}
.midcol.likes {
float: right;
}
Update2: solved!
i added this line and it fix it:
.child {
padding-right: 25px;
}
solved! i added this line and it fix it:
.child {
padding-right: 25px;
}
See section /* Common Classes */ of this page.
http://webdesign.about.com/od/css/a/master_stylesht_2.htm
are these css classes good, to use in any project? in terms of semantic?
/* Common Classes */
.clear { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.noindent { margin-left: 0; padding-left: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }
.nobullet { list-style: none; list-style-image: none; }
No. They are not good choices. The whole point of css and in particular about the concept of class is to describe "what" something represents, not "how" it should appear. What something means (i.e. its semantics) and how it appears (i.e. its presentation) are two separated concepts. The fact that something is, say, a menu does not change if you decide to show it blue on light blue with one stylesheet and high contrast black on white on another stylesheet made for colorblind people.
If you give class a presentation meaning, changing how a document appears would require changes in the web page html, defeating the whole point of having CSS as a technology specifically designed to provide and encapsulate presentation. To prevent this, the alternative would be to end up having classes whose names do not represent reasonable information (e.g. class called "bluefont" which actually contains a color:red directive). Hence, having "bluefont" as a name is totally arbitrary, and here becomes desynchronized with the actual content. It could have been a random string "abgewdgbcv", but then it's better to choose something that is unrelated to presentation and conveys meaning: its associated semantics.
And we close the circle: it's the whole point of classes. See also this document at W3.
No, not really.
Preferrably a class name should describe what you use it for, not exactly what it does.
If you for example name a class "bluebold" and then decide that you want the text to be red and italic, you either have to create a new class and change it everywhere it's used, or you end up with a class name that no longer fits.
One point that I would like to suggest is, when you are extending these just make sure that you just use verbs instead of using any adjectives as names for the classes and you should be good!
Edit:
I agree with others point of class names representing what it is used for, not exactly what it does.
Common CSS classes are way too granular and promote classitis problem. Pseudo selectors can mitigate the problem to some extent. Assuming a new website is being designed I would do the following:
*{
margin:0;
padding:0
}
li {
list-style: none;
list-style-image: none;
}
The rest are difficult to address, floatLeft and floatRight are to be defined by the layout,
<div id="main">
<div class="searchPanel">
</div>
<div class="resultsPanel">
</div>
</div>
The CSS ideally should look like ( layout driven)
#main searchPanel {
float: left;
}
#main resultsPanel {
float: right;
}
Hope you get the idea. I however, face problems with bold/underlined text. Underlined text is indicative of ugly design. Users tend to confuse such with hyper-links
some recomendations:
.floatLeft --> .float-left:
no camel cased.
.bold --> .important
name should tell the goal no showing how to do it
.nobullet --> ul.nobullet
is better to be most specified to avoid conflict with other css.