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")
Related
I got a JSF page which has a <rich:tooltip> as well as an arbitrary component with a title attribute.
Those two do neither look, nor act in the same way.
HTML title attribute has rounded corners, a black border, a smaller font and does not show directly on mouseover.
Do you have any idea, how I can achieve a more similar behaviour on both tooltips? I thought of CSS styling via the styleClass option of <rich:tooltip>.
The appearance of #title depends on the browser and OS, you cannot style it with CSS. You can try making the tooltip look the same but on a different computer they might be different anyway.
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!
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.
I'm using content_css: and have a script in place that allows me to change the css applied to a TinyMCE component based on a CMS project code.
I found a problem when I have a site that has a colour set as the background and then white for the text.
The TinyMCE looked to start applying the css correctly but when it reached the text the background changed back to being white with black text, but it then goes on to apply some of the styles, this means that my hyperlinks (on this particular site) look to disappear as I have defined the colour as white.
Is there something I can change that will apply the correct background colour in the tinyMCE tool without affecting the actual outcome of the site's css?
To get the css to be applied to the tinyMCE editor, you need to make sure the body tag has a background and color value too, else it will not pull this through and instead use what looks to be a default style.
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.