I'm having trouble changing the font of the PasswordStrength control. I even tried creating a CSS class for it, like so:
.PassWordFont {
font-size:12px;
font-family:Verdana;
}
and then putting it in the markup like this
<asp:PasswordStrength ID="PasswordStrength1" runat="server"
TargetControlID="txtPassword1" DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="15"
PrefixText="Strength:"
HelpStatusLabelID="lblLenIndicator"
TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
TextCssClass="PassWordFont"
StrengthStyles="PWSSVeryPoor; PWSSWeak; PWSSAverage; PWSSStrong; PWSSExcellent"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false">
</asp:PasswordStrength>
What am I doing wrong?
Instead of TextCssClass, I have previously just used CssClass.
From FireBug check the css class that you have applied is loaded and having your mentioned font-size.
Verify the CSS class for that input is correct.
Also It might be the case your CSS is overridden from some where else.
Make sure your CSS is added last or after all default CSS are loaded.
Also try font-size:12px !important;
Related
When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
I want to add a Style to a link button element in JQuery. Following is my code which is not working. How can I achieve this? Any suggestions?
Here is the HTML
<div data-role="content">
EXIT
</div>
Here is the CSS.
.linkBUTTONS{
color: #1dace3;
}
Any help is much appreciated, as I am pretty new to HTML/CSS and JQuery Mobile.
UPDATE
When I put it like this, style as an attribute of the given link, it works.
EXIT
But when I put it in a separate StyleSheet it doesn't work.
Check for the precedence. There maybe other rules that override your style. You can check all this in developers mode. Also you can try writing rules with !important. Did you try changing class name to link-buttons or something other? Example
.link-buttons {
color: red!important;
}
I set a div style programicaly like below:
oDiv.Style.Add("text-align", "center");
it works in IE ,But not in FireFox,
for FireFox I must write this one:
oDiv.Style.Add("text-align", "-moz-center");
How could I have both?because if I write both ,just the second one works,
please help me.
Is the first CSS overwriten in you example? (I would think that ADD did overwrite, but I have not tested that). If so I would try doing this with pure CSS.
Create a CSS class with both CSS inside and then just change the CSS class of the oDiv to that class.
.newClas{
text-align: -moz-center;
text-align: center;
}
Class class like this:
oDiv.CssClass="newClass";
You could use conditional style sheets to target only IE?
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Set the normal value in your default style sheet, then override in IE version.
thanks All.finally I could solved it with this :
.newClas{
text-align: -moz-center;
#text-align: center;
}
the # sign must be before next line in the css class
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.