I have a tinyMCE implementation where the style_formats are not using the CSS imported font as a preview in the format selector. Oddly, it does display the font in the editor portion (see screenshot)
I have added the stylesheet containing the #font-face specifications in content_css property for tinyMCE.
If I load the page on a system with that font installed, it uses the font in the formats menu as expected.
The issue here is that the content window for TinyMCE is an iFrame so its separate from the containing page where you are loading TinyMCE. The Menubar, Toolbar(s) etc are not in that iFrame but are part of your main containing page that includes TinyMCE.
As such for both to have access to a font both need to load the font. Loading it in the CSS that you pass to the editor (via content_css) solves that for the content window but does not address the containing page. If you load that same font in the containing page things will work as expected. Based on your description I believe this is working as designed.
This isn't a tinyMCE issue at all.
I was adding an #import for the font CSS in the tinyMCE custom CSS. It could be that I'm dynamically loading the view containing the tinyMCE implementation, but including the font CSS using a <link> tag in the wrapper template solved the issue.
Related
I'm trying to get my custom css to take priority over conflicting style properties in the theme.
What I think I know
My custom CSS files are loading: If I remove everything else from the "head" section, my custom CSS is implemented.
My custom CSS properties are being overwritten: As the page loads, for just a split-second I see the page with my custom CSS implemented, before it gets overwritten.
Something in the wp_head() function in the "head" tag (this is most of the section) is causing it: If I remove wp_head() my custom CSS loads (but everything else is broken).
What I've Tried
Sample WP_enqueue code I found online
Manually adding my custom CSS file to the end of the "head" section so it loads last
The plugin Real Simple CSS that claims to give your custom CSS priority
The "Additional CSS" feature in Wordpress that is intended to give that custom CSS priority
All of these solutions "work" in that the custom CSS is loaded near/at the very end of the "head" section and should therefore take priority. Despite being the very last CSS loaded, it's still being overwritten.
The page in question
https://kingatlaw.attorney/courses/simple-uncontested-divorce-in-north-carolina/
Right now, my custom CSS makes the text on the tabs 100+ pixels large for testing purposes.
It's a question of "specificity". If I'm understanding this correctly, you're attempting to override a body text style (body .stm_lms_course__content) with the .active class applied to the parent div containing the body text. Because the theme's own style for body .stm_lms_course__content has more specificity, it's being applied over your own addition. In this instance, even applying !important won't help you unfortunately. You will have better luck to applying your custom styling to the exact classes set in the original theme. If you're using the Chrome browser, you can see the exact classes applying which styles using the 'Inspect' feature when right-clicking an on-page element.
Unfortunately, a lot of "off-the-shelf" WordPress themes do have some very specific styling which makes it difficult to overwrite (especially if paired with WYSIWYG editors like Elementor or WPBakery)
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
Default text in TinyMCE editor is black until styles are applied either via the plugins or my custom CSS. Once saved and viewed, default text-color is #555, as defined in my primary stylesheet.
I would like TinyMCE to display #555 as the default, to assist users in selecting compatible colors when formatting text via the editor.
Previous questions/answers on StackOverlow (c.2013) refer to a CSS file that no longer exists in the TinyMCE package. I've tried changing the default "color" in content.min.css without result.
I've also tried adjusting the CSS that controls the data-entry forms BUT this is not working, eg.
#ppform textarea {color:#555}
<table id="ppform">
<tr><td><textarea id="ppmce" name="entry">
Is is possible? What else can I try?
If you want to impact the content in the editor via CSS you can pass CSS to the editor via the content_css configuration setting:
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
I have an app where suddenly all of my buttons in Vaadin do not show their icon/text. When I use the element inspector in Chrome I see that the class .v-button-wrap has been set in the tag of my page (not in the .css theme file) and has its display set to block. if I turn off display:block I can see my text again. I cannot figure out however where this incorrect css style is being generated in my app.
Any ideas?
The problem was I had Vaadin Touchkit registered in my widgetset config file (.gwt.xml file). Once I removed this everything works fine. It appears Touchkit injects a tag into your element.
I have activated the font selector in Silverstripe CMS TinyMCE by adding this in _config.php:
HtmlEditorConfig::get('cms')->insertButtonsBefore('formatselect', 'fontselect');
This works, now the font selector is showing. But I can only choose the basic fonts. How can I add extra fonts to this selector? For example Google fonts?
If you want this to work a specific theme, just have an editor.css inside the css folder and define the webfont includes there (at the beginning).
Otherwise you need to tell tinyMCE the location:
HtmlEditorConfig::get('cms')->setOption('content_css','/mysite/css/editor.css');
Then you can add Googles webfonts or any other font like this:
HtmlEditorConfig::get('cms')->setOption(
'theme_advanced_fonts',
//left side is a custom Name to be displayed in the dropdown
//right side is the name of the webfont, defined in the stylesheet
'Name=WebfontFamily; AnotherName=AnotherWebfontFamily;'
);