today I wanted to change the border color of TextInput when user has a focus on it. I could not find any style that would allow me to change that. A little bit of Google searching and I found answer to be themeColor.
Why is it that there are some styles that work and which are not even mentioned in the Flex documentation? (and how can one find out about em, except doing some web searching?)
Thanx
Ladislav
As always I suggest while managing in color and properties use Flex Style Explorer create a stylesheet.css, put it into src folder and then call it by the following statement:
<mx:Style source="yourstylesheet.css" />
In the comment above Srirangan answered the question correctly, but I am not able to accept his comment as answer to my question...so I will just accept this one :)
Related
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
I found a solution for an IE specific issue here and that worked for me:
Change IE background color on unopened, focused select box
But I just cant find anywhere what does -ms-value mean?
The only thing I can figure out is ms means MicroSoft, so its for IE specific settings but can someone plz share some link or information where we can find more details around this.
What does -ms-value mean?
The :-ms-value CSS pseudo-element is a Microsoft extension that applies rules to the value of a text or password control or the content of a control...
Refer to: -ms-value for more information.
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)
I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.
For the past few years, I've been developing sites with Eric Meyer's CSS resets. I love it and will never look back. I never even thought of looking back. But then today, we implemented a Telerik Rad Editor control. Unfortunately the CSS resets break the internal layout of the Rad Editor as well. Is there some way to prevent the resets from cascading down into the Rad Editor.
Thanks in advance.
We use the RadEditor extensively in our application, and have found similar issues with it. I've been working with the editor CSS code for almost 2 years now, and have found it to be fairly easy to overcome these issues.
Firstly, are you using a custom skin for the editor? This is the best way to overcome these issues. If you aren't you can simply add one by copying an existing theme and renaming it. This will allow you to modify the CSS in an external file, rather than trying to fiddle with overriding the stylesheet the is embedded in the Telerik assembly.
After that, it's going to be a simple matter of isolating which styles are causing the issues. I'm guessing from your comments that the buttons are not rendering correctly, most likely because your reset stylesheet is overriding the default list styles. I would use firebug to see where the reset file is overriding styles defined in the stylesheet.
Most likely it's because there is no style definition at all for things that are being reset, as anything defined in the Telerik stylesheets would be more specific than the reset styles, as they would contain a preceeding class name, which would increase the CSS specificity by 10.
If you could provide more specifics, I'd be happy to try to help more.
Hardly, as there are no "excluding" statements in CSS. You would have to re-introduce the things the reset stylesheet removes.
But from experience, I'm quite sure the reason for the screwup is just one or two things going awry. It may be possible to examine and fix them in reasonable time.
You could use an iframe to delineate the CSS contexts. But, it makes some things harder.
No. That's one of inherent problems with CSS reset.
That's a $1000 control?! Perhaps you should give them a call and request making it compatible with CSS reset.
Reset makes some deprecated attributes from Transitional HTML unusable, but "industry's best" editor shouldn't be relying on these. Everything else is fixable with appropriate stylesheet.
Actually, you can specifiy specific CSS files for the RAD Editor to reference when it loads up. Just create a CSS file that adds in what the reset takes away and only the RAD Editor will reference that CSS file.
For example this editor will refence a specific file called 'radEditor.css" when it loads on a page.
<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
<Content>
</Content>
<CssFiles>
<telerik:EditorCssFile Value="~/css/radEditor.css" />
</CssFiles>
</telerik:RadEditor>
Good luck, and hope this helps some.
You can find out what are the default values for the element (make an unstyled page with only the element and check with Firefox's DOM Inspector), then add the rules again at the end of your stylesheet with !important added to every rule.
If you're trying to work out the styles the elements started with you could refer to one of the popular browser's default stylesheets - for example, here's the WebKit one for HTML. I presume from the markup you can narrow it down to just a few elements?
Edit: Here's the Gecko one.
I'm just adding this here for reference. Twitter Bootstrap makes most of the buttons disappear. Here is the fix. The EditorCssFile is just used to change the background color of the editor back to white.
<style type="text/css">
.telerik img {
max-width:none;
}
</style>
<div class="telerik">
<telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
</CssFiles>
</telerik:RadEditor>
</div>