Changing the size of the icon in the document tab

How To Customization
1

This is part of a bigger quest, so bear with me.

The document icon (HTML, CSS etc) appears to be of a fixed size, which I cannot change. I actually want to add some extra padding which I tried this way:

.tab-icon {
	background-color: white !important;
	padding: 2px !important;
}

This was in the Custom CSS in the Color Scheme Editor.

While the background-color and padding properties did work, the icon appears to be of a fixed size, so the actual content is reduced by the padding. I have been unable to change the size of the icon (width & height didn’t work) and changing box-sizing didn’t help either.

How can I either increase the size of the icon or add padding without reducing it?

2 
image.tab-icon {
	height: 8px !important;
	max-width: 8px !important;
}
3

@manngo please consider sharing some of these customizations you’ve been doing :slight_smile: They sound very interesting.

https://community.komodoide.com/packages/submit-instructions/#pane-packages

4

Thanks for the suggestion. However, while the height works, the width or max-width doesn’t. The width is stuck to the original width and the padding eats into it.

5

I don’t know then. Changing max-width resizes the icon for me (and the box size of the element as well). I recommend you to use DOM Inspector and Element Inspector (both can be installed with Commando) to investigate. (Shift + Click on an element to open it in the DOM inspector (note you have to restart Komodo first after installing addons)).

6

Are they still available? I have been looking for DOM Inspector for just this purpose. I’ll try that out …

7

Yes they are, I’ve installed them just now.

8

Thanks. I am exploring now. This could take some time.

9

Well, that explains it. The XML generating the icon is:

<xul:image xmlns:xul="…" width="16px" class="tab-icon native_file_image" xbl:inherits="…" src="koicon://userChrome.css?size=14"/>

Short of hacking the XUL itself, I don’t see a way of overriding the width attribute.

I had intended to write some simple CSS to alter the appearance of the document tabs, especially the selected tab. This not only for me, but also for my students, so some tweaks are not feasible.

I might add that I’m using a Macintosh. Many of the students are using WIndows, so that may be different.

10

It’s not much at the moment. I needed a way of making the document tabs more visible with a light theme. Here’s what I have so far:

#tabbed-view tabs>tab {
	border-right: thin solid #999 !important;
}
#tabbed-view tabs>tab:hover {
	background-color: #ddd !important;	
}

#tabbed-view tabs>tab[selected] {
	background-color: #999 !important;
	color: white !important;
	border-radius: .25em .75em 0 0 !important;
}
image.tab-icon {
	background-color: white !important;
	box-shadow: 0 0 0 1px white;
}