Is there a simple way to change the default colors of controls in asp.net (VS2010). Specifically, every time a textbox is moused over or a submit button is clicked, they get light blue highlights or borders. This was fine until I made a light green site. Now it really does not match at all. Is there one simple place in VS2010 I can change this default color to green?
Thanks for any help....and yes I'm a noob!
Use CSS
If you're using a master page, just setup a default styles css file in the master page and set all of your css styles there, such as input, p, a, input[type="submit"], etc.
If you're not using a master page, define these in the .aspx pages
Here's a link to a CSS tutorial: http://www.w3schools.com/css/
If you don't provide CSS information for the controls in either a stylesheet, style tag or inline styles, then they will use the CSS as defined by the browser that you are using.
With that out of the way, you can style your controls in CSS based on their type:
input { ... }
input[type="text"] { ... }
input[type="submit"] { ... }
Related
We are building a prototype shop using Squarespace with the four pages:
Home, Store, About, Contact.
Unfortunately all pages inherit the same style from the site's design templates. What we would like to do is something similar to this where the colour of the link on certain pages could be changed.
Is there a method of overcoming the fact that the same class class="header-nav-item header-nav-item--collection"is being used for all pages in order for this type of solution using custom CSS can be applied?
Yes, this is possible. Using nth-child() selectors is an option, though you might consider referencing the element via its href attribute instead, like so (of course, substituting the color of your choice):
.header-nav-item a[href='/about'] {
color: red;
}
If you choose to use nth-child(), do like so:
.header-nav-item:nth-child(3) a {
color: red;
}
Finally, to edit the color of the nav item that corresponds to the active page (whatever page the user is on), you'd write something like:
.header-nav-item.header-nav-item--active a {
color: blue;
}
Finally, if you'd like to change the color of all navigation items when the user is on a specific page, you can do so by using the collection ID, which is used as the id attribute on the body element in most if not all Squarespace templates:
#collection-5d7ef2011673f45f239d1c51 .header-nav-item a {
color: green;
}
As a helpful tip (which you may already be aware of), you can use your browser's developer tools web inspector to inspect the element and then write your own CSS according to the rules generated by Squarespace.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
I can't set the background color (or border color) of an input text, if it is a dojo datepicker.
My dojo datepicker is an input text with the two additional attribute:
dojoType="dropdowndatepicker"
displayFormat="yyyy-MM-dd"
I assume dojo has its own style, so even if I provide a style that specifies the background color, dojo overrides it.
something like this does not work:
<input type="text" ..other attributes.. style="width:5em;border:solid #FF0000;">
Any help is appriciated.
And may I just add that my dojo version is old as dirt ( will be upgraded) but currently I can't take advantage of the newer features like dijit, etc.
Dojo uses templates for most of their widgets. The HTML code you write (with dojoType attributes and stuff) is nothing more than a placeholder to configure your widget. Inline CSS applied to this HTML will be applied to the top level of your widget.
Your widget usually consists out of multiple HTML elements and so it may happend that the CSS you write inline, will not be applied to the correct element. Also, Dojo indeed uses themes (wich you usually define as a class="themename" on a parent tag (usually <body>) and most default themes of Dojo are using !important CSS lines for various features.
The best way is to inspect what HTML elements are created when you use a widget and to define a style on that specific element. But because the CSS attributes of the Dojo themes are using !important, it's recommended to be more specific than what they define. The easiest way is to add a custom classname to the <body> tag, for example:
<body class="claro custom">
</body>
Then define your style like:
.custom .dijitTextBox > .dijitInputField {
background-color: yellow;
}
.custom .dijitTextBox > .dijitArrowButton {
background: red;
}
I also made an example JSFiddle.
Have a look at this thread - i think this could help you out:
Changing default style of DOJO widget
Regards
add !important to the end of your rules:
<input type="text" ..other attributes.. style="width:5em !important;border:solid #FF0000 !important;">
This should apply stuff to the input. Please check if the element isn't replaced when dojo starts using it and if you are applying the style to the correct element.
JSP1: has Dojo widget.Style theme "claro" is used on body tag.
JSP2: has a dojo widget - Dialog box. The style definitions are applied directly to the widget. (Functionally this jsp is a footer).
<div dojoType="dijit.Dialog" id="privacyDialog" style="background-color:#FFFFDF; border-style:solid; border-width:1px; border-color:#000; height:203px; width:350px; z-index:9999; display:none;">
JSP1 includes the JSP2
Issue: At run time, styles defined on Dialog box in JSP2 are getting overriden and the dialog box appears with the styles which are defined in claro.css (title bar with blue colour, close icon, etc).
Required: Dialog box should display as it was defined in the widget in JSP2.
I have tried overriding theme after reading http://dojotoolkit.org/reference-guide/dijit/themes.html#id24 but it still is partially displaying the theme(close icon, title bar) specified in claro.css
In my case: specified the class as "form1" and the code added in claro.css is
Your strategy is correct: create a style that is a more specific CSS selector, so it will override the default.
It must be that your selector (.form1 .dijitDialog) is not being applied to the element. Look at the element in Firebug inspector - is your style being found but overridden (in firebug style inspector, does it have strike-through)? There may be some style in claro that is more specific.
Or, is your style not being applied to the element at all?
Also, I would urge you not to put your styles into the claro.css file, but in your own .css file. This will make upgrading dojo less nightmarish.
Update
I see that:
At run time, styles defined on Dialog box in JSP2 are getting
overriden and the dialog box appears with the styles which are defined
in claro.css (title bar with blue colour, close icon, etc).
So that means your styles are found and being applied. The dojo theme style is just more specific. What is the selector that overrides yours?
Without seeing that, I might recommend adding a class to your body tag, something like <body class='claro myCompany'... and then add that to your selector:
.myCompany .form1 .dijitDialog
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.