I have a RadioButtnList. I want change body background color based on radio button value.
for example change color of background circle to red!
After user has made selection and depending on the selected value, you would use css to change the appearance of your page.
To learn about how to use the RadioButtonList control as well as determine selected values, check out this link: RadioButtonList example: how to use RadioButtonList control in asp.net and RadioButtonList Class.
To learn about changing background colors using CSS, check out this link: CSS Background and CSS Tutorial and Learn CSS step by step.
For additional CSS information, check out this google search.
Hint
This assumes you want the entire page to be red:
html, body{
background-color: #FF0000;
}
EDIT
If you really mean to change the 'circle' of the radio button as your recent comment suggests, then you cannot change it. Radio buttons are native controls. What you should do instead is to make your own radiobutton-like control using an image for its selected and non-selected states.
Here's a useful link (includes source code) that I think will get you moving: Resources for web designers, though you might find a good jQuery solution as well.
Good luck!
Related
I am aware that changing the background of buttons in RCP apps in e4 does not work.
From the Vogella tutorial Eclipse 4 CSS Styling.
"For example, the SWT implementation for Windows does not allow to set the background color of the Button and the ScrollBar widget."
I should still be able to change the color of the text written for radio and checked buttons. But it doesn't seem to be applied. The wizard remains with black text despite I set it to light grey in my CSS file using the Pseudo Classes Button:checked, :active, or :selected
Same with Group titles
Testing here it appears that this will work only if the button is already checked when the dialog appears.
Changing the check state of the button doesn't change the styling.
This is because the code in the Button CSS handler org.eclipse.e4.ui.css.swt.dom.ButtonElement does not currently support dynamically changing the styling to match the check state.
There is a property you can set to turn on dynamic styling:
System.setProperty("org.eclipse.e4.ui.css.dynamic", Boolean.TRUE.toString());
BUT Eclipse bug 362532 says that this can cause problems.
So this basically isn't going to work.
An alternative is to use IStylingEngine and change the id or class of the buttons in a selection listener.
I wish to change the way ListBox looks using CSS
Change the border color - Tried using the usual border-color:red. Worked on Firefox. No effect on IE Still the standard blue color
Change the Color of the arop down arrow. No idea how to go about doing it.
Any idea how do i do this
Thanks
J
Check the rendered html in firebug and add appropriate css in the index.html (or the page where you are including the gwt module). In the GWT code add the css class in the listbox by using
listBox.setStyleName("the classes defined in the css for list box")
I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag => test
If anyone could help me a little bit, I would be pleased
yours truthfully
See this link.
This will only work with button because an inner element like a spanis needed.
Try JQuery UI. They have a very easy cross-browser set of user interface controls that might satisfy your requirements. You can change the backgrounds used for the buttons, etc.
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".
Does anyone know the name of the CSS classes responsible for styling the dojo promptMessages (or invalidMessages) tooltip associated with ValidationTextBoxes.
Normally Firebug does a great job of revealing all the inner workings of CSS, but in this case the tooltip prompt disappears when I try to inspect it!
I am intending to play with such CSS properties as padding and width for the promptMessage tooltip.
Dijit Tooltip template reveals the structure:
<div class="dijitTooltip dijitTooltipLeft" id="dojoTooltip">
<div class="dijitTooltipContainer dijitTooltipContents" dojoAttachPoint="containerNode" waiRole='alert'></div>
<div class="dijitTooltipConnector"></div>
</div>
Actually, although my question remains for general purposes, in the specific case that interests me, it's probably as easy to include as part of the tooltip content the css markings that will do what I want:
dijit.form.ValidationTextBox({
promptMessage = "<div class='customizedWidth'>Blabla</div>"
},myNode);
That said, I would still be eager to learn the dijit class for that specific tooltip. It would become necessary in the case of wanting to change the look of that entire class...
I had a similar problem when trying to debug why the css for the ToolTip on the ValidationTextBox was showing up as a plain grey box instead of using the proper css. The normal way to view css and other information in Firebug does not work because the tooltip will disappear when you click on it. However, I found that using the standard Web Developer Toolbar you can go to the CSS menu item and select View Style Information (or just do cmd-shift-Y on your keyboard). This will turn the cursor into a crosshair. You can then move the crosshair over the tooltip and the entire css chain will display for the tooltip. This solved my particular styling problem by providing the hint that I needed to apply the proper theme class to the body tag. The system I am coding against does not allow me to directly alter or add to the body tag in the generated html. However I used dojo to add the class after load like this:
dojo.query("body").addClass("claro");
and everything (Dialogs and tooltips) work great now.