I have the following problem. I have a flex 4.1 project with a css file that contain following components:
global {
color: #FFFFFF;
font-family: Verdana;
font-anti-alias-type: advanced;
modal-transparency-color:000000;
focusColor: #b3001e;
errorColor: #b3001e; }
and then I have the specific style for a text input:
s|TextInput, s|NumericStepper, astra|IPv4AddressInput {
color: #000000;
disabledColor: #555;
contentBackgroundColor: #e5e5e8;
borderColor: #000000; }
but sometimes it happens that the s:textInput has a problem. the color of the characters you enter have sometimes the color of the Global style.
so you expected a black colored font but you see a white color font.
does anyone have a idea how to solve this or explain why this is happening?
You can force it to override using:
color: #000000 !important;
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Rails 5.2
Bootstrap
I have the folliwing style:
.app-card-header {
.card-header:first-child {
background-color: white;
text-align: right;
font-size: 16px;
font-color: green;
}
}
That I am trying to apply to this view:
.app-card-header
.card
.card-header
= 'This is a test header'
.card-text
= 'This is test text'
However, I am not getting the results I'm expecting.
The header background color is white, and the header text alignment is right, but the font color is black and the size looks about 12.
I tried different font sizes and colors to no avail, but it's not changing. Why would parts of the styling work, and other parts not? Any ideas?
You should just use color but not font-color:
color: green;
And if this still doesn't work for you, then your element could be overridden from other rules. You may simply try adding important rule:
font-size: 16px !important;
color: green;
I added an "aside" to the essay "To the Person Sitting in Darkness" here (Miscellaneous tab), but the links appear ghostlike. What inline CSS do I need to add to make those links dark (forestgreen would work, probably)?
In your a link, right after the a, add style="color:green" Substitute "green" for any HEX color you want.
You could manually add "style: color #FFF8DC;" to each of the tags in the aside elements
The Philippine-American War
The more efficient way is to add this style to the stylesheet, not inline on each element.
.aside a {
color: #FFF8DC;
}
Hope that helps!
the problem is that your jqueryUI.css file is applying a darker gray here in line 413:
.ui-widget-content a {
color: #222222;
}
if you remove this line you'll get the a to its normal color style which is #333, applied in your CSS file line 476.
a {
color: #333;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
if you want a different color to that links specifically then you just need to set this in your CSS:
#MiscTwainContent a {
color:#whatevercoloryouwant
}
With this in mind, no need for using inline-styling, which it is not a good practice.
The simplest way to do it, since the question is just asking about the link text (inside an a / anchor tag) is this:
a {
color: green;
}
Or better yet, per'aps:
a:link, a:visited {
color: green;
}
Hi community I have a problem trying to change the color of tooltip extension, it happens that I'm using PrimeFaces 5.1 and extension 3.0, using the thema of grinders pepper, but does not perform the change in white, I leave my code.
<pe:tooltip global="true" />
.ui-tooltip,.ui-tooltip .ui-widget-content {
border: 1px solid #9d9d9d;
color: #000000;
background-color: #ffffff;
}
Hope you can help me, thanks.
In the PF-ext showcase, there also is a background image. That overrides the color (per css standards). When I tried setting the background image to 'none'
.ui-tooltip, .ui-tooltip-content.ui-widget-content {
background-color: yellow;
background-image: none;
}
in the PF-ext showcase, it worked.
I have Googled this but can't find any info on it.
Say you set your page highlight colour to a nice orange:
*::selection {
background: #C44610;
}
Why, when you highlight your page, does the background show as red, I swabbed this colour in photoshop and it gives me a hex value of #c24432 which is way off the orange I selected.
I have tested this on Chrome. In firefox I can't get the selection to work at all, it just gives me the default colour.
Any thoughts?
For example you can edit this code:
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
Don't need the *
Also will need the ::-moz-selection {} for Firefox
BTW, you shoulkd consider that since the selection color is a bit transparent, it changes depending on the background...
Greetings from Argentina