Other tool working except the bold, When I click bold my text still not get bold? I work on materialize. Can anyone help me?
Thanks in advance.
I fixed the issue with css, the css must be placed after the materializecss
.ql-editor strong{
font-weight:bold;
}
I needed an ::ng-deep (or /deep/ ) in front of my style to get it working:
::ng-deep .ql-editor strong{
font-weight: bold;
}
I was facing the same issue.
Use strong { font-weight: bold !important; } in styles.scss and it will solve the problem.
Related
I try everything on this and other forum to do it and not ask people..
But nothing happened! haha
I would like to know if someone here know how to change the background colors on Henson template on Squarespace ? (So also all the texte of the page).
I try this in the CSS section but it didn't worked.
#collection-5e827250f835166c09c3dcbe
{background-image:url("https://static1.squarespace.com/static/5c3a93e22487fd34bb34eaa9/t/5ea1dd8bda93e023950c5bcf/1587666340724/Background.jpg");
background-size:cover;
background-position:center;
}
And i try this in the injection code :
<style>
#collection-5e827250f835166c09c3dcbe {
background-color:#000;
}
</style>
Thank you in advance,
hope someone can help me!
The Henson template has a "title-card-overlay" that, if enabled, makes it non-obvious to change the initial background color of a the page.
To change the background color of a specific page, add the following CSS via the CSS Editor/Custom CSS:
#collection-57ae1156e3df28c4ce90ea48 .main-content {
background-color: #000000;
}
#collection-57ae1156e3df28c4ce90ea48 .title-card-overlay {
background-color: #000000;
}
Of course, in the above code, change the collection ID 57ae1156e3df28c4ce90ea48 to the ID of the page in question.
ng-block-ui can be found here .
https://github.com/kuuurt13/ng-block-ui .
I have tried inline styling and template references but it didnt worked out.
live demo : https://stackblitz.com/github/kuuurt13/ng-block-ui/tree/master/examples/default
This worked for me.
:host ::ng-deep .block-ui-wrapper{
background: black !important;
}
I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.
This is how many resources point to adding a Font Awesome icon in placeholder text.
<input style="font-family:FontAwesome !important" type="text" placeholder="">
Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.
<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="">
For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.
.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
font-family: "Font Awesome 5 Brands" !important;
}
And then add this class to your tag.
<input class="useFontAwesomeFamily" type="text" placeholder="">
This might help someone out there as I had the same issue.
The Branch for Regular icons is Font Awesome 5 Free. However, if you need to use solid icons, just add the font-weight: 900; property to the inline CSS.
<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;">
The placeholder text will be bold, I'm still trying to find a solution for this, I don't know if there's another way but it works for me for now.
I hope it helps.
You can also the fas class to the input.
Just bear in mind that this solution and any font-awesome style changing solutions will also change the style of any text preceding or following the unicode icon.
Remember to add class "fas fa-search" to the input
I need to make my Previous and Next buttons smaller.
Im using the dataTables plugin alongside bootstrap so the tables are already styled.
Here you can see the involved files .css and .js
I've tried twicking them a bit but I can't make it work for me, I can't fing the buttons-related data.
Thanks in advance, any direction you may point would be helpful.
You can select those two links by class
.previous, .next {
// CSS here
}
Here's a live version to play with.
Answering to an old question.
You are probably looking for this. I found it somewhere on Datatable's official site not sure where. But for me the below solution worked:
.dataTables_paginate>span>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
.dataTables_paginate>a {
margin-bottom: 0px !important;
padding: 1px 5px !important;
}
Hope it helps someone like me.
I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.
http://jsfiddle.net/jaredh159/xPZB8/
HTML from fiddle:
<a>Some Text Foo Bar</a>
CSS from fiddle:
#font-face {
font-family: 'stephanie_marie_jfregular';
src: url('stephanie-marie-jf-webfont.eot');
src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
url('stephanie-marie-jf-webfont.woff') format('woff'),
url('stephanie-marie-jf-webfont.ttf') format('truetype'),
url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
font-family: stephanie_marie_jfregular;
color: #000;
font-size:50px;
}
a:hover {
color: #ff0000;
}
What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?
The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.
I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.
EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)