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.
Related
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
here is a regular <select> box look on firefox (osx):
if i add the following style to it:
form select.error {
background-color: #FFAAAA;
}
it looks like this:
question:
Is there any way to keep the pretty styling and still make it red?
The "pretty styling" is all a single background image drawn by the OS. So when you override it, Firefox has to fall back to some other kind of styling...
So no, you can't keep the original look but just change the background color.
You cannot reliably style select boxes as browsers tend to stick to the OS's defaults. Your anser is no, if you only intend on using CSS.
There are jQuery options for styling select boxes available:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
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")
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.