How to customize TinyMCE dialog CSS? - css

I'm trying to get custom CSS control over TinyMCE dialogs/modals but not getting anywhere and not finding clear instructions for this in the Docs. I'm using TinyMCE 6 (the latest version).
I'm able to successfully control the main editor CSS with either of the following:
tinymce.init({
content_css: '/somefile.css',
content_style: 'some CSS rules',
But this is not affecting the dialogs. There is a note in the Docs to use the following syntax for dialogs:
tinymce.init({
popup_css: '/somefile.css',
But this is also not having any effect. It's as if any CSS rules relating to dialogs using any of these methods are completely ignored.
Has anyone done this and could point me in the right direction? Thank you.

In TinyMCE 6 you would control the look of the dialogs via the skin you use with TinyMCE.
The documentation for this in TinyMCE 6 is here: https://www.tiny.cloud/docs/tinymce/6/creating-a-skin/
Note: The popup_css option you reference was from TinyMCE 3.x and has no impact on any current version of TinyMCE.

Related

2sxc allowing Javascript on wysiwyg editor

We want to move away from DNN html/text and replace with with 2sxc-Content.
But in some pages, it require to have javascript injected into the content.
Exp case: tracking user when clicking the Link on content.
TinyMCE had option for allowing Javascript:
tinymce.init({ ..... extended_valid_elements : "script[language|type|src]" });
But we cannot found any information on 2sxc-documentation for configure it, we need it to allowing insert Javascript to wysiwyg.
Right now, we change the Input Type from wysiwyg editor into string/text, and it doesn't look nice for user.
I believe I know what you're trying to do but it's quite dangerous (XSS, etc.), so let me suggest some alternatives:
Use the Snippet App to just inject JS Snippets where needed
Create a convention placeholder like ENABLETRACKING and make your razor-code replace this when rendering the HTML.
I highly suggest you use the snippet app - see https://2sxc.org/apps/app/snippet-inject-v3-hybrid-for-dnn-and-oqtane

bootstrap integration with wordpress and datatable changes whole wp-admin background as white?

I am using DataTables 1.10 and bootstrap downloaded from Datatables CDN link source.When I am integrating both with wordpress plugin, bootstrap changes the background color as white(#ffffff) for the whole wordpress admin panel and plugin page by default.Not getting why this happened ? This should not happen as i have seen in the examples.Please help me to sort this out. Thanks in advance
I believe you are probably enqueuing the CSS for whole WP admin, rather than just that specific plugin settings page. Also, if the background for body / container is changed, probably you are enqueuing some generic styles file (which sets style for body element). It's the easiest to see why this happens from Chrome's console (or Firebug or similar tool) - click "Inspect element" on the changed background, and see what CSS file does it come from.
Also you might want to check this free WordPress plugin that integrates DataTables in WordPress: http://wordpress.org/plugins/wpdatatables/

Joomla css hide date create

I want to hide the date on this page.
I tried to change it inside joomla but I couldn't. It's not an article but a JKit page and there is no such an option.
I used the "inspect element" feature to find the corresponding css file and line (bootstrap.css #554). When I change the element through the "inspect element" menu its working but when I open the css file and change it, it doesn't work.
Any suggestions how I can hide it?
p.meta {display: none;}
That ought to do it. Granted, any other metadata will also be hidden. You should add this to a custom CSS file and not modify core Joomla or extension files.
I find it hard to believe that jKit doesn't have a setting for that. (Update: I see that jKit is very new and lacks good documentation.) Also, a template override might be more to your liking.
Most Joomla components allow you to control things like this in the options for the items and also in the menu options when creating a menu link (or setting the global options to change the default behavior. If this component does not, make either an alternate layout or a template override (depending on whether you want to always change this or just on this one page). If you go into the template manager, template view there is a system in place that will automatically create a copy of the layout and put it in the right location. Just edit that to show what you want.
Ok so I solved by editing the according .php file of the component.
I just removed the echo line of the date.
Nothing else worked.

Why are the text-align buttons not appearing in my CK Editor in Drupal 7?

Essentially, I've been back and forth through settings and configuration for using the CK Editor as well as re-installing it but for whatever reason the text-align buttons for this WYSIWYG editor are not showing up despite the fact they appear to be configured to do so.
I'm using Drupal 7.19 and CK Editor 7.x-1.12. For clarification, this is the CK Editor as stand-alone project, not a part of the WYSIWYG project.
Also to be clear, this is not a problem of the buttons not working or text-align properties being stripped out, the buttons are simply not there. Which is a problem for ease of use for my end-users.
Why would this be happening?
Most likely you have downloaded a standard package which does not include justify plugin. Download the full package or add this plugin using online builder.
This is due to the "Limit allowed HTML tags and correct faulty HTML" filter settings. As outlined in this issue, you must explicitly allow those classes on the p tag https://www.drupal.org/node/2649546
<p class="text-align-left text-align-center text-align-right text-align-justify">
Also this is for Drupal 8

collective.tabr kupu modification

I am using the collective.kuputabs module and have added the collective.tabr add-on so that I can create a page with multiple tabs. It works fine. However, I see bullets beside the tabs and I want to delete them. Here is a snap shot of how it looks:
Where will the code for this be stored?. Tabs is a library in Kupu Visual Editor.
Use Firebug to explore the CSS, then override it in ploneCustom.css (ZMI>portal_skins>custom) or your own custom theme product.

Resources