I feel like this could be a possible issue with how CodePen interprets things. I am new to CSS, so, would appreciate any explanations.
I have code running on CodePen. https://codepen.io/jay-pancodu/pen/bGjdbry
The output looks like this.
Now, that code, I also run locally. that code is available here. https://github.com/Jay-study-nildana/StackOverDoubtsWeb/tree/main/CalculatorwithBootstrap
When this is run locally, I get an output like this.
All I did was create a new Pen, copy pasted the code from the local files to the online codepen editor.
Why would this happen? is this normal CodePen behavior that I should simply anticipate?
Further, The original code is available here, https://codepen.io/giana/pen/GJMBEv. That looks just fine, and oddly enough, when I copy paste this codepen code to run locally, the layout gets screw up again.
So, I am just confused. And, I am new to CSS.
Adding some lines of code, because, the editor won't let me post without some lines of code.Please ignore this below code snippet.
body {
color: #181ce9;
font: 300 18px/1.6 "Source Sans Pro", sans-serif;
margin: 0;
padding: 5em 0 2em;
text-align: center;
}
I find that the normalize.css is the main reason why your CodePen won't work. Take note that CSS will make the last line for the main style. In CodePen CSS will always take the style on the top. And this normalize CSS is under the CSS Codepen style, different from your local that the normalize CSS is on top of your style.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
Related
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
I copied all the htmls and css in demo, except kendo.all.min.js, since I'm only trying out the opensource version.
However, the look and feel is different. I checked the code on the demo and I am doing the same thing. Any ideas?
DEMO
http://demos.kendoui.com/web/grid/editing-popup.html
MINE
http://i.stack.imgur.com/PAzxR.png
Set the font-size of your page. The Kendo UI demos have the following CSS rule:
html {
font: 75% Arial,Helvetica,sans-serif;
}
I am looking for a ressource where I can download CSS styles suitable for Rstudio/knitr markdown output?
The default look of the default CSS-style is fine, but I would like to find a CSS style where the content is positioned in the middle of the screen.
something like this (ignore content, colors, sidebar etc):
http://www.barackobama.com/news/
not like this (which is similar to the default):
http://stat.ethz.ch/R-manual/R-patched/library/stats/html/Normal.html
I don't really know CSS so I can't do it myself. I have tried to change the margin in the default CSS style from 0px to 200 px:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 16px;
margin: 200px;
}
The problem with this "solution" is that it only works when the browser window is maximized, and pdf printed from the browser are too narrow also.
edit: This is good:
https://gist.github.com/andyferra/2554919
edit2: The preview version of Rstudio ( RStudio 0.98.932 - Windows XP/Vista/7/8) has a nice default CSS. Get it here: http://www.rstudio.com/products/rstudio/download/preview/
edit3: The newest version of Rstudio now includes some very nice CSS-styles to choose from :) http://www.rstudio.com/products/rstudio/download/
Not just a CSS resource, but you can take a look at the knitrBootstrap project, which provides a way to convert Rmarkdown to HTML styled with the bootstrap framework, including a CSS style chooser and some fancy javascript add-ons :
https://github.com/jimhester/knitrBootstrap
I just upgraded to IPython 1.0 and the new notebook interface performs really well. On my screen it now has a default width of about 50% of the page which improves readability. However, i often work with long timeseries which i prefer to display as wide as possible.
Very wide pictures will only extend further to the right. Is there a way to display output wider then the default to expand in a centered matter?
The attached picture shows a normal inline plot in the first cell, which is less wide then the default notebook width. The second plot is wider and expands to the right. This leaves about the left quarter of my screen unused.
What I do is the following. This might help, but it also creates a beautifully rendered notebook.
Have a look at this online book about Bayesian Statistics. This is really nice.
They load a custom CSS at the end of the notebook using this code:
from IPython.core.display import HTML
def css_styling():
styles = open("custom.css", "r").read() #or edit path to custom.css
return HTML(styles)
css_styling()
You can download this custom CSS from the books github repo HERE: Drop it in the notebook folder and call the code above
Also note their nice matplotlibrc file. You can change the look and feel of the plots calling this code. Call this early in the notebook and all matplotlib plots will look pretty cool.
import json
s = json.load( open("bmh_matplotlibrc.json") ) #edit path to json file
matplotlib.rcParams.update(s)
Download the JSON file HERE from GITHUB
In short you have two options. Both add CSS styling to the notebook to achieve the effect:
Global Jupyter CSS (affects all notebooks)
Edit or create ~/.jupyter/custom/custom.css and add:
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Modify the style of the current notebook by executing a code cell with:
from IPython.core.display import HTML
HTML("""
<style>
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
""")
Note that in the first case there is no <style></style>.
I prefer the second option, specially if I'm going to share the notebook (since its self-contained).
The answer given by #tooblippe, although changes the style of the notebook, does not address the question. However, using the first part of that solution, you would be able to achieve the centering of the plots. This solution works for ipython==3.1.0. For higher versions that include Jupyter, you would want to edit the styling of Jupyter instead.
So, the solution would be:
You can either modify the above css file or add this line to the styling of your ipython environment in the ipython folder:
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
vertical-align:middle did not work for me. Also, in the latest Jupyter (maybe others, but at least) there is a class called .prompt that takes up space only on the left of the page. I was able to work around both using this:
.output_png {
display: table-cell;
text-align: center;
margin:auto;
}
.prompt
display:none;
}
Just know that setting display:none on .prompt will cause all of the in[] and out[] displays to disappear and know that's what you want if you're going to do it. Hope that was helpful.
All of the answers posted (at the time of writing) don't appear to work for Jupyter Lab v3.
Instead of changing the CSS for output_png, I've found that changing it for jp-RenderedImage does what I want. If this changes or is different for you for any reason, just inspect the element and choose the relevant class to modify.
The Plots in the Jupyter Notebook can be Centered by Using HTML CSS Code Snippet.
The Code for aligning the plots at center is shown below, by using this Code Snippet all the plots can be centered in the Jupyter Notebook.
from IPython.core.display import HTML as Center
Center(""" <style>
.output_png {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style> """)
Make Sure you run this Code Snippet in Code Cell, not in Markdown Cell.
When I save a document in CKEditor (CKEditor 3.5.2), the saved HTML is right. But when I open that HTML again for editing (putting the HTML in a textarea and then load CKEditor), CKEditor parses the style setting wrong.
If I have a code that looks like this:
<div style="font-family: arial; font-size: 11px; background: green;">Hello</div>
And then open it with CKEditor, it looks like this:
<div style="font-family: arial font-size: 11px background: green">Hello</div>
The ; has disappeared. It does not matter which style settings I use, the semicolon disappears in all cases.
It does not matter what element the style setting is in. The same problem appears in img, div, a, span... and so on.
What shall I do? I am about 100% sure it is ckeditor that is the problem. I open the HTML right from the database. But what else than ckeditor could it be?
I do not use any CMS site, just pure php.
might be some configuration issues.
reinstall properly because i am also using ckeditor it's works fine in all browser and support all kind of html or css tags