In the current version of WordPress (4.6.1) using the code inspector reveals that the inline style for the image captions is:
<dd class="wp-caption-dd">Photo Caption Text</dd>
However, using ".wp-caption-dd" in editor-style.css has no affect - even with !important. How can I affect the class in the editor to create the same look in the editor that is live?
Please note: I am only talking about the editor ".wp-caption-text" is the correct class for live coding of the caption.
Charles
Using Chrome and Inspector I saw the .wp-caption-dd, and just putting this in your styles should do.
It should probably be more restrictive (inside the dd specifically), but this should get you started.
/* photo caption inside the Visual Editor */
.wp-caption-dd
{
font-size: 70%;
text-align: right;
font-family: Trebuchet,"Trebuchet MS",Helvetica,Geneva,Helv;
}
Related
I'm implementing Froala Editor in an Angular project. I want to be able to change the default Paragraph Format drop down and to be able to apply my own styles to the options in there.
I know there is the paragraphFormat option where I can change the list in the drop down, but it doesn't mention where I would define the CSS for those options. Anyone have any ideas where/how I can do that? I don't want to use the separate paragraphSyltes option as that introduces a separate button and doesn't have the paragraphFormatSelection dropdown feature that default paragraph format comes with.
Edit: Thanks for the help, I've created a jsfiddle for the problem. Not sure exactly what the CSS should be, this is what I have but doesn't work:
.froala-paragraph-drop-down {
.H1 {
text-align: center;
color: red;
font-size: 14px;
}
}
Can you please help me with making Heading 1, say 14px red in both the paragraph dropdown as well as when applied to the text in the editor?
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 have a Share Point 2013 web site and a blog in it. Since my posts will include a lot of special text content, I need to add more styles that I will use on all posts. Typically all styles appear in the top ribbon bar when creating a new post.
How to add the new style in Share Point Designer 2013?
What do I need to do?
What you are looking for are custom styles for the SharePoint RichText editor. The nice thing is that all you have to do is add some custom CSS and SharePoint will magically render new text styles. you can also do this with SharePoint Designer if you have a custom master page or if you just specify the alternate CSS somewhere.
The "magic" CSS is something like the following:
.ms-rteStyle-MySpecialStyle {
-ms-name: "My special style";
font-style: bold;
color: red;
}
h2.ms-rteElement-SpecialHeading{
-ms-name: "Special Heading";
font-style: bold;
color: green;
}
The difference between the two is the rteElement vs. rteStyles, but the difference becomes clear once you look at your screenshot: Page Elements and Text Styles. The difference is that you style particular elements with one, e.g. H1, H2, SPAN, and you style text passages with the other - SharePoint actually adds a span tag around the text and assigns it your style.
Enough of the words, a couple of complete blog articles to help you get started:
How to add custom styles to the ribbon in SharePoint 2013
Add new stlyes to Rich Text Editor ribbon in SP2013 Online
Do you know how to custom styles for RichHtmlEditor in SharePoint 2013?
Please try this code for custom heading and text
h2.ms-rteStyle-customHeading
{-ms-name:"custom heading";
color:gray; }
.ms-rteElement-customTest
-ms-name:"customize text";
{color:black; }
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
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