When I put this in my css file:
label, input
{
font-size: 18px;
}
Text labels show up with font size 18, but text boxes aren't affected.
Also, when looking at the generated html code in the browser (Inspect element, using Chrome), I'm seeing that the input box has a set height.
So the question is, can I control the size of the text box and the size of the font inside the text box using just css?
If you add the !important declaration your css would take precedence on the smartgwt css declaration.
I've just tried and it works.
label, input {
font-size: 18px !important;
}
Related
My word document has some text that has a particular font applied, ex. Arial and is bolded
When I paste into TinyMCE, I get that value in a span:
<p><strong><span style="font-family: 'Arial'>Hello World</span>/strong>/</p>
How do I detect that this line of text has both Bold and Arial applied so that I can convert it to use a custom tag called BoldArial:
<p><BoldArial>Hello World</BoldArial></p>
I would like to apply styling to BoldArial in my custom stylesheet that I have included with TinyMCE upon initializing it, ex:
p.BoldArial {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
How can I use the paste plugin to convert MSWord Styles to custom CSS?
You can't do that with a simple paste.
You could code the html in Word and paste as text into the Text Tab of TinyMCE.
So in Word you would have your paragraph already coded:
<p><BoldArial>Hello World</BoldArial></p>
To add the html, you could use search/replace to get 90% of the way there.
Instructions
Cntrl+H to open 'Find and Replace
Use Wildcards
Find what:
?*^13
Replace with:
<p class = "BoldArial">^&</p>
For 'Find', set 'Font' to 'Bold'
You will need to cleanup the newline/return manually. See pic.
I'm trying to make a SASS mixin that lets me specify the mixin call and the Unicode number only. This case is for list items where the icon would show up before the item.
My SASS mixin looks like this. I added both font-family options to include everything. If this isn't a good idea, maybe I'll do an if statement or something:
=faIconBefore($unicode)
display: inline-block
content: "\$unicode"
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
This can be used in code for a download icon like this:
+faIconBefore('f019')
I've also tried using this in the content line:
content: "\#{$unicode}"
Ideally, this would just add the icon I wanted, however instead I get $unicode item.pdf in my result.
It works fine when hard code the Unicode number into the SASS file, but I can't seem to get this part to work.
UPDATE:
I tried to put together a fiddle, but it wasn't working at all with the font.
Well it looks like that just doesn't work. Maybe using the #extend command, but changing the content style in the mixin to remove the single quotes and slash ('\') and adding the slash to the Unicode number in the stylesheet seemed to fix it. Here's my new code:
// Adding a Font Awesome icon before an element, specifying the unicode number - Usage: +faIconBefore('\f019')
=faIconBefore($unicode)
display: inline-block
content: $unicode
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
And the usage:
+faIconBefore('\f019')
If anyone knows of how it could use some refinement, let me know.
Thanks
I have a GtkLabel with which I have setup a hyperlink using the <a> tag in the label's markup however doing so negates any styling my GtkCssProvider sets. How can I continue to allow CSS to style the text in the label while also making it a hyperlink?
to style all the text you could try
GtkLabel *{
color : red;
}
this selects pretty much selects everything in gtk labels(like all states) and applies the css style to all of it.
to Style only the link part select the subnode "link"
label link{
color : red;
}
This is my css styling of my header
h2{
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
}
Now, when i type some word in it, the word suppose to be out of the image because the line-height is same as the height of the text , but it is still inside it, why?
To answer your question, yes, line-height works on a single line of text. Given a certain line-height, the browser will attempt to render the text in the middle of that line-height. So if the element has a height of 46px and a line-height of 46px, and assuming the font-size is 30px, there will be (46-30)/2 = 8px open above and below the text.
So the line-height property, when used with only one line of text, can be used to keep text vertically centered by setting it to the same value as height.
Just use: padding-top: 46px , please note line-height will NOT be added to the height
read more.
EDIT: when I say it won't be added, I mean it can't be understood as:
Final height = height + line-height
Try using margin-top: -46px;. That will work for sure.
From doing a little research I've found that MS Outlook will not render line-height in an HTML email at anything less than 16px.
This is a bit of a problem as I really need it a fair amount smaller.
Does anyone know of a fix for this??
What code are you using? It will go lower than 16px, but only if the font-size is 14px or smaller. Also, make sure you are setting the line-height on the parent TD - i.e. on the closest block-level element, rather than an inline element.
make sure you have 0 padding and margins, have "display:block" on everything inline (esp. images!) and set line-height to the height you expect.
Outlook <2007 uses IE as a rendering engine, 2010 uses WORD.
Yes, it's very lame.
This CSS might fix the issue, but it will only work on block elements (p, div, ..etc):
mso-line-height-rule:exactly; line-height:10px;
If you are trying to create vertical spacing, use the line-height and font-size to enforce a height:
line-height:5px;font-size:5px;height:5px;
Outlook.com (Hotmail) will override your line-height CSS with theirs, so you need to use this to "reset" your CSS after they modify it:
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
.ExternalClass td, .ExternalClass div {line-height: 100% !important;}
Outlook.com continued: Then if you have any elements that had line-height:0 you will need to give them an id attribute, and then specifically reset those:
.ExternalClass #elementWithNoLineHeight { line-height:0 !important; }