How to style Browser's HTML Dropdown List using Linux GTK+ 2.0 themes
Linux - GeneralThis Linux forum is for general Linux questions and discussion.
If it is Linux Related and doesn't seem to fit in any other forum then this is the place.
Notices
Welcome to LinuxQuestions.org, a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free. Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
If you have any problems with the registration process or your account login, please contact us. If you need to reset your password, click here.
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month. Click here for more info.
How to style Browser's HTML Dropdown List using Linux GTK+ 2.0 themes
I have been exploring gtk+ themes present in /usr/share/themes to style up different components in applications.
I experimented on Crux theme by changing some properties in gtkrc file at this path /usr/share/themes/Crux/gtk-2.0.
Here are the changes that I made:
style "crux-menuitem-text-is-fg-color-workaround"
{
text[NORMAL] = @fg_color
text[PRELIGHT] = @selected_fg_color
text[SELECTED] = @selected_fg_color
text[ACTIVE] = @fg_color
text[INSENSITIVE] = darker (@bg_color) xthickness = 14
ythickness = 14
}
widget "*.gtk-combobox-popup-menu.*" style "crux-menuitem-text-is-fg-color-workaround"
Added xthickness and ythickness to add space around every item in the dropdown list. Here *.gtk-combobox-popup-menu.* matches dropdown list that opens when a combobox is clicked/tocuhed.
This successfully matches dropdown lists in Windowed applications like Character Map, Power Management or any application containing a combobox and increases space. However, the same is not true for the HTML Select control's dropdown list that opens in an HTML page of a browser. It seems that the widget name doesn't match.
So is there a way to point to the dropdown list in an HTML page of a browser and style it up.
I know that styling of dropdown list is not possible using HTML-CSS so wanted to check at the OS level.
Please let me know if this is feasible using gtk+ themes and if not, which layer in OS should be modified to apply styles that goes inside the browser to style it up, any other alternate or even to say with reasoning that it is not possible at all.
Here is the output of "uname -a" command
Linux <mac address> 2.6.32-358.11.1.el6.x86_64 #1 SMP Tue Jun 11 17:23:30 CDT 2013 x86_64 x86_64 x86_64 GNU/Linux
Linux distribution is 64 bit and I think it is based on Fedora/Red Hat.
Last edited by riteshjagga; 07-04-2014 at 01:15 AM.
i would say it's up to the html rendering engine, e.g. webkitgtk or webkitgtk2. wich one is your browser compiled with? are you sure it's using gtk2 and not gtk3?
if it uses gtk2, you might be right about having modified the wrong widget.
but it could also be that the engine uses the gtk themes only in a very approximate manner, making changes as needed...
maybe with some modern browser you can give direct commands to the engine via CSS, like "webkit-dropdown-menu-margin: 14px;"? (i just made that up)
I am using two options to see the output of an HTML application.
1. Google Chrome
2. QT WebView - Ultimately this is required.
Both are webkit based but I am not sure of their connection with gtk.
I have tried with a number of browsers but the appearance of dropdown remains almost same except for some font styling which is inconsistent among them.
I don't think browsers provide any vendor specific command to increase the gap based on the observation that if Google Chrome - Webkit had been providing this command, Google for sure would have increased the gaps in many of its dropdown lists of Gmail settings to provide a very comfortable spacing for their end users.
In many such requirements, often projects are web based where developers are looking for consistent appearance across browsers and client machines and due to insufficient control over dropdown list, they have to adopt Javascript based equivalent dropdown lists. Ours is a machine specific software application and can explore if there are machine specific solutions too, if any.
Though this seems impossible but inquisitive to know that why different OS and browsers will not or cannot provide any mean to change this.
In many such requirements, often projects are web based where developers are looking for consistent appearance across browsers and client machines and due to insufficient control over dropdown list, they have to adopt Javascript based equivalent dropdown lists. Ours is a machine specific software application and can explore if there are machine specific solutions too, if any.
The best you can do is detect the client's OS and then serve up a "machine specific" stylesheet.
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know.