inside the file variables.scss of the ionic3 project it does the import of two fonts: roboto and noto-sans as follows:
#import "roboto";
#import "noto-sans";
Where do these fonts come from? How to import raleway font? I have tried to put this line and it does not work:
#import "raleway";
So I just checked my node_modules and the roboto and noto-sans fonts are stored in node_modules/ionic-angular/fonts/
If you want to use the raleway font, you should be in possession of the .ttf, .woff, and .woff2 files. If you only have the .ttf font, check out FontSquirrel's font files generator
Location: src/assets/fonts/Raleway.ttf etc.
Then you can create your font (app.component.scss or variables.scss)
#font-face {
font-family: 'Raleway';
font-weight: 200;
src: url('../assets/fonts/Raleway.ttf') format('truetype');
src: url('../assets/fonts/Raleway.woff') format('woff');
src: url('../assets/fonts/Raleway.woff2') format('woff2');
}
Now you can use your font:
p { font-family: "Raleway" !important; }
Or change the default font of your ionic app (variables.scss)
$font-family-md-base: "Raleway";
$font-family-ios-base: "Raleway";
$font-family-wp-base: "Raleway";
Answer Credit
Related
I'm trying to follow some YT tutorial about Bootstrap 5 with the use of some tools like Sass.
Author of this video in his example at the beginning is testing if his script for compiling Sass code is working.
Here's the screenshot of his work:
screenshot 1
I tried to do the same thing and I got an error saying:
Error: Sass variables aren't allowed in plain CSS.
Here's my code:
$primary: #ff0000;
.test-1 {
color: $primary;
}
And the screenshot: screenshot 2
This showed up after compiling my script:
/* Error: Sass variables aren't allowed in plain CSS.
* ,
* 1 | $primary: #ff0000;
* | ^^^^^^^^
* '
* scss/style.css 1:1 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Sass variables aren't allowed in plain CSS.\a \2577 \a 1 \2502 $primary: #ff0000;\a \2502 ^^^^^^^^\a \2575 \a scss/style.css 1:1 root stylesheet";
}
Screenshot of terminal
I think that my code looks the same as his, so where is the problem? Had some rules of Sass had changed since the video was posted?
Here is my info from package.json:
"sass": "^1.45.2"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"autoprefixer": "^10.4.1",
"bootstrap": "^5.1.3",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0"
And his:
"sass": "^1.32.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"autoprefixer": "^10.2.5",
"bootstrap": "^5.0.0",
"postcss-cli": "^8.3.1"
What is your file extension? It should be .scss. => my-style.scss
mj-font does not work in mjml.
Here is what I am trying to do in index.mjml:
<mjml>
<mj-head>
<mj-font name="testFont" href="testFont.ttf"/>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-family="testFont" align="center" font-size="20px">
Just a text
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Here is the screenshot of the project directory:
Here is what I see in the app:
And here is what the font should look like:
What am I missing here and how could I make my font work?
Thank you.
I have found it difficult to use custom fonts using the mj-font tag. If you use a google font api it seems to work correctly.
Example using Google font
<mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
Taking that into consideration, I have started to using the following and has worked for me: (it goes between <mj-style></mj-style> tags)
#font-face {
font-family: testFont;
src: url(https://cdn2.hubspot.net/hubfs/199900/fonts/someFontFile.ttf)
format('truetype');
}
I would normally use a .woff file instead of a .ttf file.
Diving deeper into it, if you go to a Google font link such as https://fonts.googleapis.com/css?family=Raleway in your web browser, the contents of the file is this:
/* latin-ext */
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Back to your problem... Since the file that you are loading with the <mj-font> tag is a binary file, I would imagine that mjml doesn't know how to process it. If the file were a .woff font file then it might work. Perhaps they could change this in the near future. After all, it is a very useful tool.
I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem. Thanks in advance!
You can use styled-components with material ui, but you'll end up needing to use !important a lot. Like this:
import Button from "material-ui/Button"
const MyButton = styled(Button)`
background: red !important;
`
In the project I'm working on with the same combo, I've just resorted to using the JSS style material-ui wants you to use with the whole withStyles HOC..
You may check their docs here https://material-ui.com/guides/interoperability/#styled-components, you may check the deeper elements section if you want to override specific classes https://material-ui.com/guides/interoperability/#deeper-elements
below is my example where for the switch component
const StyledSwitch = styled(({ ...other }) => (
<div>
<Switch
{...other}
classes={{ colorSecondary: 'colorSecondary', checked: 'checked', bar: 'bar' }}
/>
</div>
))`
& .colorSecondary.checked + .bar {
background-color: ${props => props.theme.lighter.toString()};
}
& .colorSecondary.checked {
color: ${props => props.theme.default.toString()};
}
`;
export default StyledSwitch;
usage
<StyledSwitch theme={lightTheme.secondary} />
this is using a theme but you can specify any color you want
Looks like we have 3 ways (could be easier, but not everything is flowers) to override Material UI styles with Styled Components. Here is my Gist.
I do it like this:
In head component of app:
const styleNode = document.createComment('insertion-point-jss')
document.head.insertBefore(styleNode, document.head.firstChild)
const generateClassName = createGenerateClassName()
const jss = create({
...jssPreset(),
insertionPoint: 'insertion-point-jss'
})
<JssProvider jss={jss} generateClassName={generateClassName}>
<Main />
</JssProvider>
and then just style:
import styled from 'styled-components'
import Select from '#material-ui/core/Select'
import Input from '#material-ui/core/Input'
import React from 'react'
export const InputM = styled(({ ...other }) => (
<Input {...other} classes={{ input: 'input' }} />
))`
color: ${p => p.theme.textColor};
& .icon {
font-family: ${p => p.theme.fontFamily};
font-size: ${p => p.theme.fontSize}px;
color: ${p => p.theme.textColor};
}
`
I'm trying to translate some CSS to ScalaCSS and I can't quite figure out how to encode a pattern of "class subclass". Here is a specific example:
.navbar-top-links {
margin-right: 0;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
In the quickstart you can see the use of & to define child styles:
".navbar-top-links" - (
marginRight(0),
&("li") - (
display.inlineBlock,
&.lastChild -
marginRight(15 px)
)
)
I am using Tiny 4.3.3 for MODx
I need to add a
<p class="classname">
<em class="openImg"></em>
Some randome Input text by the user
<em class="closeImg"></em>
</p>
I don't mind if is an extra menu Item or is in the Paragraph dropdown menu. I just want the less time consuming work around possible.
I have tried this http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html but somehow this doesn't work.
Could anyone point me to a good tutorial or tell me how could i add a icon or name to the drop down menu that creates the p and em tags with the right classes automatically please?
Thanks
It has been a while since the question was asked, but as i am currently making exactly the same, i thought i share my discoveries and solutions regarding this matter. :)
I am extending TinyMCE for a test-project at work and our solution needs custom tags - in some of them the user should be able to enter only one line, in others (as your em) a lot of text.
Steps to be done, in order to achieve the desired solution:
tell the TinyMCE editor, that your elements are good using the two configuration keywords extended_valid_elements and custom_elements:
tinymce.init({
selector: "textarea#editor",
// ...
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css"
});
create the two images for the opening and the closing tag. I named mine for the example emstart.png and emend.png.
create a custom CSS style for your custom elements and put them in the custom CSS file (the one that is specified in the TinyMCE configuration, in my case editor.css):
emstart {
background: url(emstart.png) no-repeat;
background-position: left -3px top -3px;
padding: 10px 10px 5px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
emend {
background: url(emend.png) no-repeat;
background-position: left -3px bottom -3px;
padding: 5px 10px 10px 10px;
background-color:#aabbcc;
border:1px dotted #CCCCCC;
height:50px;
width:100px;
}
write a custom plugin that inputs the new tags and put it in the plugins directory. I called mine customem:
plugin code:
tinymce.PluginManager.add('customem', function(editor, url) {
// Add a button that opens a window
editor.addButton('customEmElementButton', {
text: 'Custom EM',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Please input text',
body: [
{type: 'textbox', name: 'description', label: 'Text'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>');
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('customEmElementMenuItem', {
text: 'Custom EM Element',
context: 'tools',
onclick: function() {
editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>');
}
});
});
The last step is to load your custom plugin to the editor (using the plugin and toolbar configuration option) and enjoy the result:
tinymce.init({
selector: "textarea#editor",
height: "500px",
plugins: [
"code, preview, contextmenu, image, link, searchreplace, customem"
],
toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton",
contextmenu: "bold italic",
extended_valid_elements : "emstart,emend",
custom_elements: "emstart,emend",
content_css: "editor.css",
});
The editor now looks like this:
and the source like in your example:
First of all you will need to modify the tinymce setting valid_elements and valid_children to your needs (add em to the valid_elements and em as child to the tags desired (probably p) to valid_children).
Second you will need an own plugin with an own drop down or button to insert this code.
You can add one or more tag structures simply using the template plugin.
See documentation
https://www.tiny.cloud/docs/plugins/opensource/template/
See interactive example:
https://codepen.io/gpsblues/pen/WNdLgvb
tinymce.init({
selector: 'textarea#template',
height: 300,
plugins: 'template code',
menubar: 'insert',
toolbar: 'template code',
extended_valid_elements: "emstart[*],emend[*]",
templates : [
{
title: 'emstart/emend',
description: 'Add a personal tag structure with personal tags <emstart></emstart> <emend></emend>.',
content: '<p class="classname"><emstart class="openImg"></emstart>Input text<emend class="closeImg"></emend></p>'
}
],
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px}'
});