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;'
);
Related
I want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
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.
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.
I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites.
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?
Like #Paulie_D said, icon fonts.
The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.
This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.
As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.
If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.
I would like to change the font awesome-based logo in this XenForo style. The style has a specific setting for Glyph Logo Icon in the admin panel, the default value of which was fa fa-rocket. When I change that value to, for example, fa fa-mars, the logo just disappears. I don't see any references to fa fa-rocket in the imported templates (there was a file called font-awesome.min.css that got uploaded during the style's installation, but it's not in the list of editable templates)
What is the correct way to do this?
Figured it out. This style used an outdated version of Font Awesome (4.1), which didn't include the icons I wanted. I changed the Font Awesome path under Style Properties => Typography to the 4.3 CDN version, and everything loads now.