XUL makes when loading a scrollbar in the richlistbox. I want to style this scrollbar, I've tried everything but nothing helps.
Can anyone help me?
In order to make CSS style changes to portions of an XUL element you need to assign the CSS to the underlying elements when they are contained within the primary element. In order to determine what elements are within which (i.e. what elements make up a <scrollbar>). You will probably end up using a combination of the DOM Inspector, examining the .xml file which define them, and the CSS used to style them. The files which define the XUL elements are .xml binding files. These, and the .css files for their styles, are normally contained within the omni.ja files that are within the Firefox install directory tree. omni.ja files are just regular .zip files which have been renamed with a different extension. You can copy such a file and rename it to omni.zip to get convenient access.
Specifically for scrollbars, these appear to be scrollbar.xml and scrollbars.css which are located in the main omni.ja. You may also want to look at the floating-scrollbars-light.css or floating-scrollbars.css files in the browser/omni.ja file.
However, you want the scrollbar inside <richlistbox>. To find out how to style those scrollbars, you need to find what makes up a <richlistbox>;. That file is richlistbox.xml (styled in richlistbox.css) in the main omni.ja. In that file it appears the scrollbar is implemented by a <scrollbox> element which is defined in scrollbox.xml (styled in scrollbox.css), also in the main omni.ja. The element(s) you want to style may be contained within several layers of other elements. You will need to keep digging and experimenting to find the right CSS selector for the element(s) you want to style.
You may already be using the <richlistbox> in your own XUL window, but you might also be just adding one somewhere to the browser (You did not say). For experimenting, in addition to the development setup, I would suggest a separate XUL window, which specifies a separate .css file, which you can open easily by clicking a button. This could just be the options dialog. Using a separate XUL window for experimenting allows you to have a separate CSS file called by just that window. When such is the case, the .xul file for that window (and the .js and .css files called only from that .xul) are re-read each time it the window is opened. Doing this makes testing changes possible with just closing and re-opening the window rather than having to re-start Firefox. If it is a completely separate widow, rather than the options dialog, you can open multiple copies of the window and do side-by-side comparisons between changes.
As an example, the following CSS colors the background of the actual text area within <menulist> and <textbox> elements when the mouse hovers over them:
menulist hbox :hover {
background-color: Azure !important;
}
textbox>hbox :hover {
background-color: Azure !important;
}
Related
I want PyCharm (IntelliJ) to display HTML-files in a browser, not open them in an editor, when I double click them in the project browser. Googling for a solution didn't return anything useful. Is this possible? How?
(This request also applies to PNG and some other filetypes but HTML is my main need at the moment)
Both IDEA and PyCharm are editors, and they will default to editing; that is, they will open the HTML file and allow you to edit it instead of displaying any kind of web page.
If you want to see the rendered HTML, you can hover to the top right corner and select one of the browsers recognized by IntelliJ and installed on your system to open it in a browser then. Be aware that this may not render things correctly if you rely on a language-specific functionality (like JSP, Jinja2 templates or Less) to generate code on your behalf.
I want to overlay all window compose message from thunderbird to a new xul window. I've tried
<?xul-overlay href="chrome://messenger/content/messenger.xul"?>
<?xul-overlay href="chrome://messenger/content/messengercompose/messengercompose.xul"?>
but this not overlay message textarea and other tools,
i need all tools and menu from message compose window to be overlayed
please, any help will be very appreciate
The information that you have provided is a bit sparse. You have listed the following as one group of code:
<?xul-overlay href="chrome://messenger/content/messenger.xul"?>
<?xul-overlay href="chrome://messenger/content/messengercompose/messengercompose.xul"?>
From this, it is not clear if you are attempting to overlay two separate .xul files from within the same overlay file.
Overlays are specified with a one-to-one correspondence between the file being overlayed and the overlay file. In other words, to overlay those two files, you need two separate files to have two overlays (or perhaps you could overlay the same information from one file onto two).
Overlays are defined in the chrome.manifest file. Use a single line per file you are overlaying. The syntax looks like:
overlay chrome://URI-to-be-overlaid chrome://overlay-URI [flags]
The [Flags] are described on MDN.
I changed a few parameters in the video-js.less file (center the big button) but the changes do not show up in the HTML page (button is still above left). I tried theses changes before in the skin designer, and they worked fine. I suppose I still do not understand the logic behind player.js skins. Isn't video-js.less the players's default skin? If it isn't, how do I connect it to the player's tag in the HTML page? A short code example would help.
After editing the .less file in the designer, you need to copy the resulting CSS and include it in the same html page as the player. If you're editing the .less file outside of the designer, you still need to convert it to CSS, and you can just copy and paste it into the designer to do that.
You also should make sure you've got the latest and the same version of both the less file and the video.js library.
Hi can anyone recommend a good, and ideally free editor that will allow me to group opened files based on a module or component I'm working on?
I'm learning joomla so I need one with php,JavaScript,HTML.
I'm currently using dreamweaver. It's great but I hate having to traverse through the file tabs which are usually hidden because I have so many files opened at once. I would ideally want something that will allow me to group these opened files almost like a folder structure where I can create a category for grouping the opened files together so as keep things that are related to one another close by.
Failing this please recommend what is the best approach when dealing with lots and lots of opened files.
I like how browser works because it allows me to open multiple instances and let me group the sites I want via tabs to each browser instance. Dreamweaver won't allow more than one instance. Is there anything out there that can do this?
UltraEdit gives tab a different color depending on the filetype - CSS are green, Javascript are orange, etc. I find this very useful. It also allows the tabs to spill over to several rows, instead of forcing them to one line like Dreamweaver.
If you do have to use Dreamweaver, you can use the file directory panel to traverse the folders on your hard disk. Double-click on a file in a subdirectory to open it, or switch to its tab if it is already open. The file directory panel is on the top-right by default, I think.
I want to adjust the size of the "Browse" section seen in the file upload button in HTML. When I try to adjust the size using "size" or "width" attributes, only the whole size is reduced. But I want only the size of the "Browse" button part to be reduced and not the textbox part which displays file path. Can I do this without using CSS? If yes , how?
The file input element is notoriously difficult to style. One of the problems is that it's really a single element, even though it renders as two elements.
One approach is to obscure the entire element behind the scenes and present the user with custom elements instead. Here's an article about it. Basically the file input element is hidden and some custom elements backed by some JavaScript are handling the UI and passing the necessary information to the file input.
It is very difficult to change the appearance of the Browse button as it is typically hardwired into the browser.
However, at Quirksmode.org|Styling an input type="file", there is a long post that discusses complex CSS techniques for changing the appearance of file input elements.