I'm trying to change the default font color / size etc in the area of my ckeditor instance, but it's not working for me.
In chrome inspector I can add this style to the header and it works:
.cke_editable {
color: #fff;
font-size: 14px;
font-family: "Calibri";
}
However when I add this to my editor.css it has no effect. I've tried at the start and at the end, with no success. When I reload and check the resources in inspector, the correct css file is being loaded. Why aren't my styles applied?
When I inspect the iframe the style tag in the header doesn't contain the styles either.
Figured it out by removing my config and re-adding it a part at a time.
The very first line was
fullPage: true,
I had copied this from another source which used fullpage. I don't need it so I removed it.
According to the documentation, having fullPage on will stop contentsCss being implemented. From the ckeditor documentation:
Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.
However, what they fail to mention is that having fullPage set to true will also stop any changes to editor.css from being loaded. Once it was removed my custom styles shined through
Handy tip:
contentsCSS does not have to point to a css file. You can put straight css in there instead of a url, like so
contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',
This will apply these styles directly to the editor. This appears to be undocumented as the documentation only mentions stylesheet urls.
You need to change the content.css in the main ckeditor folder or add the following setting http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
It sounds like your CSS styles are being overridden - try adding !important to each style like below:
.cke_editable {
color: #fff!important;
font-size: 14px!important;
font-family: "Calibri"!important;
}
Related
I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Based on my research, this would be the lowest level of specificity. Anything would override that setting.
My goal is to change the font on the entire page to improve legibility. I am using Python / Selenium webdriver with Firefox to modify the tag's style setting with this Javascript, which results in the following inline HTML:
document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;";
<body style="font-family:Lucida Fax;" >
The change is propagating to the sheet. However, the font doesn't change. Under the "Computed" view, I see the following:
font-family: Helvetica,Verdana,Arial,sans-serif;
------------------------------------------------
* > Helvetica,Verdana,Arial,sans-serif core.css;
BODY[1].style > Lucida Fax element;
When I disable the * CSS property in the Firefox Inspector after making the change, the font change will occur. So something is overriding my inline style change.
I am in a blackbox environment as an end user, so I can't account for everything happening.Could this be caused by an actively-running Javascript that is forcing the stylesheet to take precedent over inline styles?
The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)
What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body>:
body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }
That allows you to have overrides for some elements (like various sorts of form widgets or whatever).
I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?
The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)
Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');
I want to increase the font size of the rich text editor "ckeditor".
The first demo of this page (http://ckeditor.com/demo#toolbar) I am using. I want to make the font size of the body to say 44px.
I found this link http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups . It seems I can configure my font size from this page. But still could not point out which config is suitable to increase the font size.
you can use setStyles function :
CKEDITOR.replace('editor1', {
on: {
instanceReady: function (evt) {
evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '72px'})
}
}
}
If you want to modify the content displayed in the editor, customize contents.css.
If you want to add some new, pre-defined styles to style combo, see the official styles.js guide.
If you develop a plugin which adds some features that need styling, use CKEDITOR.addCss() method.
If you want to parse existing CSS file and use rules as pre-defined styles, see stylesheetparser plugin.
Add a contents.css to modify the content displayed in the editor the default font and size:
body {
font-family: Arial;
font-size: 44px;
}
And setting :
config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '44px';
config.contentsCss
See the documentation :
http://docs.ckeditor.com/#!/guide/dev_styles
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
Open the contents.css inside the /ckeditor/ directory
And you can change font-size:
background-color: #ffffff;
font-size:16px; /* Just added this */
Just add this to your page
CKEDITOR.replace('editor1', {
on: {
instanceReady: function (evt) {
evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '18px', 'font-family': 'Verdana'})
}
}
});
i am using ckeditor 4.4.6 and changing content.css works,please note that changing the 'body' class wont work , the '.cke_editable' class needs to be changed.
Background
I am using Twitter Bootstrap LESS source with LessJS
I'm using font-awesome.less (referenced from within Bootstrap.less)
I've removed the icons section from bootstrap so they don't conflict.
I have a site.less file which I also reference from within Bootstrap that contains some site-specific styling.
Goal
I would like to be able to do something along the following lines in my site.css file:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
Problem
When I try the approach above, I get the following error:
This error makes sense; I'm just not sure how best to correct it without creating an additional import of font-awesome.less in my site.less (which I imagine would be its own issue).
To clarify: Per comments below: I have a class name that I'm using from a Knockout viewmodel. (for example, if "Praise" is selected, it will apply the class "FeedbackItemPraise"). If FeedbackItemPraise is selected, I'd like it to apply the .icon-thumbs-up class from font-awesome (which displays the icon via a web font) and then also make the color green.
What I have so far
Bootstrap.less customization (only relevant parts shown):
//Sean's customizations
#import "background.less"; // Background images and colors
#import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
#import "site.less"; // site-specific LESS
Class within site.less:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
UPDATED
Upon looking at Font-Awesome again, looks like they have now included mixins for the icons. See the following two files.
https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less
https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less
Use like:
.feedbackItemIconPraise
{
.icon(#thumbs-up-alt)
color:Green;
}
ORIGINAL
If you look at font-awesome.less you will see that class doesn't exist, it's actually .icon-thumbs-up:before. Unfortunately you can't use pseudo classes as mixins, eg .icon-thumbs-up:before;.
You will need to modify your font-awesome.less file (or just add this class, or just put content: "\f087"; directly where it needs to go) so there is a non :before version:
.icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-up { content: "\f087"; }
Then apply this concept:
.feedbackItemIconPraise {
font-family: "FontAwesome";
font-size: 90px;
padding-top: 7px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
&:before {
.icon-thumbs-up;
}
}
Seems Font-Awesome icons have to use the :before pseudo for them to show up.
Demo: http://pulse-dev.com/files/stackoverflow/fontawesomeclass/
There may be another solution to this, but I combine my scripts into a single file (automatically) before running it through the LESS compiler. This allows me to define variables and mixins up front that can be used in any of my LESS files.
The online documentation does mention that LESS can include the #import files, making the variables and mixins available. You may need to ensure that you are on the latest version of the compiler and if the import files are organised in a folder structure, you may need to tell the compiler where to search.
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for #import directives
filename: 'style.less' // Specify a filename, for better error messages
});
I'm using sifr for the first time today. I have it up and running; however, I need some help. Rather than explain, I'll show you the code below:
<div id="pullquote">“Fantastic property, facilities and location. We
couldn’t have asked for more!” <em>Mr & Mrs. Smith</em></div>
So far, so good. I have then styled that in the same document in case flash/JavaScript is disabled. No problem.
sIFR.replace(journal, {
selector: 'div#pullquote',
wmode: 'transparent',
css: [
'.sIFR-root { text-align: center; color: #be7705; font-size: 30px; background-color:#fdefd4; }',
'em { font-style: normal; color: #1d5d69; font-size: 26px; }']
});
That's what is included in my JavaScript file. Am I correct in styling the element like this? I got slightly confused with the selector, then using a second selector within js-css. Once again, there is also sifr.css. What should be included in this document? Should I be styling the element here?
I suppose my question is: What should be included, and what styling should be done in sifr-config.js and what styling should be done in sifr.css?
Thank you :)
In the CSS for the HTML page (sifr.css) you can add a style to hide the elements that sIFR will replace before does so, and you can do some tuning of the text so the text size maps better to the Flash font.
The selector parameter for sIFR.replace() is used to select the elements you wish to replace by sIFR.
The css parameter contains the CSS used inside the Flash movie. At this point, all CSS selectors are relative to the element you replaced, so if you replace an h1#foo, then you select em rather than h1#foo em. This is the only place you can style the text inside the Flash movie, aside from font size, which, if not specified here, is derived from the font size of the replaced element.