I'm using content_css: and have a script in place that allows me to change the css applied to a TinyMCE component based on a CMS project code.
I found a problem when I have a site that has a colour set as the background and then white for the text.
The TinyMCE looked to start applying the css correctly but when it reached the text the background changed back to being white with black text, but it then goes on to apply some of the styles, this means that my hyperlinks (on this particular site) look to disappear as I have defined the colour as white.
Is there something I can change that will apply the correct background colour in the tinyMCE tool without affecting the actual outcome of the site's css?
To get the css to be applied to the tinyMCE editor, you need to make sure the body tag has a background and color value too, else it will not pull this through and instead use what looks to be a default style.
Related
I have a small chatbox at the bottom of my page which seems to be inheriting CSS style from bootstrap.min.css and that chatbox is transparent which is a nuisance because the underlying text on the page shows through and what is worse, is that hyperlinks on the page are over-riding clickable areas in the chatbox for opening, closing and submitting messages.
I have tried adding CSS style to the chatbox for opacity and rgba. Even tried adding a background image but to no effect.
I have since modified the chatbox to display an iFrame from a different site that does not use bootstrap.min.css.
But even the iFrame page is affected by transparency. I can remove the transparency setting in bootstrap.min.css but that will not solve my bigger problem... I am intending to use this chatbox on several sites and may not have control of the site's CSS.
So I need a way to override the parent site's CSS just for the chatbox.
If that is impossible, then I can weed out the transparency from bootstrap.min.css that is used on my own sites. However I do wonder what is the point of such transparency when it is useless here...
It's a z-index problem which is common when integrating iframes, apply z-index: 2000; (or whatever number as long as it comes on top) on your chatbox div so your chatbox will still stay upfront.
Since you haven't posted any code, I'm not sure if you've tried this or not, but you can use the !important value to override Bootstrap's styles in your custom CSS. For example:
background-color: white !important;
I've been encountering a strange glitch in TinyMCE on WordPress; it will add it's own inline stylings to elements, particularly when I change the block type of it's parent. It appears to be due in part to having a custom editor stylesheet; as disabling it negates the problem.
Example case: I had a number of links, one per line, all with a special class on them (the class is configured to only apply to anchor tags). When I select that list of links and convert it to an unordered list, it applies inline styles to the links themselves, hard coding an (inaccurate) font size and adding a background colour to match that of the body.
I've added save filters that strip it out when being saved, but I'm baffled as to how it's doing this in the first place.
Any ideas?
Use this :
var textContent = tinymce.activeEditor.getContent();
to get html content from editor and then save. It will give you filtered html content.
I was also facing the same issue but after using this everything is working fine.
I've been trying to add a different background color to the facebook comments box on my site.
I've tried`'
and I've tried to add a which wraps the code. But nothing seems to work.
How do I change the background color of the comments box?
you may use the light theme and put the FBDIV inside another container..then change the background of container... of course you can't edit the css becouse the comment plugin loads inside an iframe... You can use FBML but it's deprecated.
I wish to change the way ListBox looks using CSS
Change the border color - Tried using the usual border-color:red. Worked on Firefox. No effect on IE Still the standard blue color
Change the Color of the arop down arrow. No idea how to go about doing it.
Any idea how do i do this
Thanks
J
Check the rendered html in firebug and add appropriate css in the index.html (or the page where you are including the gwt module). In the GWT code add the css class in the listbox by using
listBox.setStyleName("the classes defined in the css for list box")
This is a very specific question for a Google Chrome extension.
http://www.meebo.com/mobile/
This page is where you're kicked to when you go to Meebo.com on an iPhone or Droid phone. But if you notice, the Status box where you can set yourself away or what you want your status to be has white text on a white background.
In order to get a website to appear in a Google Chrome extension's popup window (the one that drops down when you click the icon next to the address bar) that isn't an included html file in the extension, I need to use an iFrame. I know that there's security measures about Cross-Site stuff like javascript and I'm not surprised I'm having trouble accessing the CSS. But there's a class, status, and it's color is white and I need to change that to black. I've tested it with Chrome's Inspect Element window and if I change that, I'll be fine.
I've tried changing the manifest.json file to inject a CSS file using Content-Scripts, but nothing...
I'm new to Chrome Extensions but I have experience doing web development.
What you have to do is to change the DOM inside the iframe, ie to change the style of the text element with javascript.
You can for example, change the 'color' attribute of the text element, or change his CSS class and add a new one.