I use CKEditor for my text editor, when client edit a text with CKEditor and change the font color, font size and ... I store the HTML code in my database and there is no problem.
but when I want to show the HTML Code in my page, the style will reset so many html tags not work, like font size or font color and ...
I use Eric Meyer’s “Reset CSS” 2.0 :
http://meyerweb.com/eric/tools/css/reset/
this is CKEditor WYSIWYG screenshot :
This is CKEditor HTML Code :
And this is result :
and this is firebug screen shot for this layer style :
I need to un-reset the CSS for this layer, is it possible ?
You may consider using http://binarystash.blogspot.com/2014/01/unresetcss.html. It restores default HTML styles removed by Eric Meyer's reset.css.
You should be able to do this with the CSS :not selector, by resetting all the elements that are not within the WSYIWYG Editor code.
Or, if you have control over the styles, you could an !important declaration on the editor styles.
Related
I'm trying to display text using the Markup tool of Autodesk Forge Viewer 7.84, but the font-size style is being ignored. It works when I add a css style for font-size to the <text> element, but the font-size attribute of the <text> does not work.
This is the code to activate the tool:
var toolInstance = new Autodesk.Viewing.Extensions.Markups.Core.EditModeText(this.core);
this.core.changeEditMode(toolInstance);
var markup = this.core.getSelection();
var style = markup ? markup.getStyle() : this.core.getStyle();
style['font-size'] = styleValue;
this.core.setStyle(style);
Also tried this other code from another question:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
Both options generate the correct element with the 'font-size' attribute set to the correct value, but the size of the text markup is not applied.
But if I edit the <text> and add a style rule to the element, it works:
I don't want to create an extension or an override to the Markup scripts just to correct the text, by adding the style rule to every <text> element, as I think there is something wrong with either the Markup code, or somewhere on the Viewer/page setup (although the SVG specifications for <text> state that font-size should work).
So the question is: how can I set the font-size of the text in Markup from code, preferably without overriding Viewer scripts?
The issue was a conflict with an old version of the NV.D3 library (to create charts and graphs). The CSS file nv.d3.css had a style rule for all svg text, which ended up overwriting the svg text from the viewer. Updating the NVD3 library solved the issue.
The old one had this, which applied to all svgs on the document:
The updated one encapsulated it in its own namespace:
Make sure no other CSS has global rules to SVG, since it can conflict with the Markup tools of the Viewer.
When I use external CSS for underlining the word "pro", I'm unable to do so, whereas when I use inline CSS in <span> tag, it works perfectly fine. I have been trying to debug this code since past 2 hours. I'm still unable to do so. Please reply as soon as possible.
The inline-style has higher specificity than the external CSS selector. That's why it always takes precedence in the code when both are used.
However, if you are using only the external CSS and your CSS not being applied, you need to check few things.
Whether your external CSS is correctly linked to your HTML page.
And if so Are you using the Selector correctly.
Thanks
You have to mark important in your external css file to apply any overlay css on your html
like if you are tring to apply background color for span tag from external css
your css must be like this
span{
background-color:#000 !important; /*EDIT: important to !important
}
Use !important css property between style rule property value and semicolon in the external style sheet to increase its priority like following :
Selector {property :property-value !important;}
There is a html page customized with css styles(I cannot change this css). One tag of this page designed as a container for dynamic html data. How can I "reset" css settings for this div(css styles defined in the page have no influence on the content of this div)?
I have access only to dynamic html and I can add more css styles to a page.
If I understand you correctly the problem you have having is that the CSS for the main page is affecting the CSS for your "dynamic" div. For the most part there is nothing you can do about that, other than specifying higher-priority styles to the dynamic content you are loading.
You can do this by doing in-line css, or by doing other more specific CSS declarations in a file or tags.
The answer is not to "reset" the styles, but rather to SET the styles you want on the div, to override whatever the page styles throw at you. In your situation you'll need to either edit the style attribute, or modify the javascript style properties.
Using CSS it's easy to apply a custom color to a link when you hover over it using:
.myId:hover{
color:green;
}
But what about the style tag? It is possible to do something along the lines of:
<a style="*insert nifty markup here to change color on hover*" href="somewhere.html">text</a>
Or is changing the hover color only possible trough the first method (using only html/css, no javascript allowed).
You cannot and should not do this. Give it a class or id, and a stylesheet.
Nope, I don't think you can alter states or add selectors via the style tag.
AFAIK you can only use either the <style> tag in the <head> section, or an external stylesheet.
The first suggestion is the best. Inline styles are the most specific and can never be ovridden, also it's difficult to find them when editing. It's best to keep all CSS either in the head of an external stylsheet :) (imo)
I implement the Eric Meyer's reset.css in my website, and works great, but it was a little problem. As this a CMS users are free to format the content of their articles as they want and the reset CSS resets the formatting of their text.
Any ideas how we can prevent reset.css inheritance to propagate to the dynamic content?
All you input is more than welcome.
It will always propagate (that's kind of the point of reset.css :)), but if you're not already doing so, you should of course make sure that reset.css is the first stylesheet linked in your pages - any custom styles will then override the reset styles.
If the problem is that the styles are "too reset" and you'd like a more sensible set of defaults (e.g. weighted font sizes, margins, line-height etc.) for your dynamic content you could create your own baseline CSS styles and apply them only to the dynamic content area using an ID selector for example.
As Eric Meyer himself says on his CSS Reset page:
The reset styles given here are
intentionally very generic. There
isn't any default color or background
set for the body element, for example.
I don't particularly recommend that
you just use this in its unaltered
state in your own projects. It should
be tweaked, edited, extended, and
otherwise tuned to match your specific
reset baseline. Fill in your preferred
colors for the page, links, and so on.
In other words, this is a starting
point, not a self-contained black box
of no-touchiness.
By the looks of it, you're finding that the CSS Reset is doing a bit too much for you. I would therefore tweak it for the items you're experiencing problems with. For example, as you're experiencing problems with tables, I would either remove the parts of the CSS reset that target tables, thus leaving it at the browser default, or add extra CSS of your own after the reset to specifically style tables your own way.
I've had problems like that, my solution for that was to wrap the dynamic content generated by WYSIWYG editors, into a div with a unique class, where to that class I've created a reset style sheet with standard attributes!
Ex.:
div.wrap_to_prevent {style, style,
style}
div.wrap_to_prevent input,
div.wrap_to_prevent textarea,
div.wrap_to_prevent h1 {style, style,
style}
.
.
etc
Basically, I've used a reset style sheet, but preceded all css style's with the class of my div, that way, it just affects the code inside that div, thus creating a brand new set of rules for that content.
Since 90% of my projects use WYSIWYG editors, with this solution I was able to work around that same problem...
Can't tell if this works for you, but give it a try!!
Does the CMS create inline styles? If so these should override the styles from the reset.css file.
If the CMS includes it's own .css file, make sure that it appears after the reset.css file in your generated html output.
If you need to use the css reset, the only reliable way to work around this is to use an iframe element for the dynamic content. The main problem with iframe s is that they can't be automatically adjusted in height according to the inlying document's size. If you can work around that, I'd say this is the most hassle-free approach.