How to place custom background on tab bar?
-
I'm trying to place an image on tab bar.
This code works, but obviously is shown in tabs too.
Wondering how to exclude showing the background when there is a tab there - activated or not..tab-strip { /*or should be used #tabs-container?*/ background-image: url(/hooks/vlogover.png); background-size: 100%; }
-
I used code for this once, right in the beginning, can't find it thought atm. But yeah, try tabs-container, tab strip can't be right.
-
Works with container
-
@luetage Switched to #tabs-container.
Actually,#tabs-container
,.tab-strip
or both#tabs-container .tab-strip
produce the same.Well, I've to do some code cleanup
-
.tab-header { background-image:linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.2)); } #tabs-container { background-image: url(/hooks/vlogover.png); background-size: 100%; }
Ok, this worked after changing theme once (ah, the silly things I never try)
Only have to reduce the gap between tabs (it's 1/2px) as the background is seen between them.
-
edit: ninjad
Instead I say this: Try it with a transparent pattern, I used to do this and it looks quite nice if you get the right combination together. -
@luetage Thanks
Feel free to link me some reference to tweak background image - probably the only I know isno-repeat
xD
Vivaldi UI will make me buy a css manual one day XD
Of course, transparent tabs should be off in themes or... you'll see the background -
@Hadden89 https://www.w3schools.com/cssref/pr_background-repeat.asp
This is a good resource for css in general.
-
@luetage I'm looking also here; for a css noob it explains a lot of each
commandstyle ^^Ehm, what is and how to a transparent pattern?
Other little experiment-variant on code above with simple svg texture - I like using them as are small in size and are rendered fast - for tab bar but following themes.
.acc-light #tabs-container, .theme-light.color-behind-tabs-off #tabs-container { background-image: url(/hooks/graph-light.svg); background-size: 150%; /* as the squares in pattern were too small */ } .acc-dark #tabs-container, .theme-dark #tabs-container { background-image: url(/hooks/graph-dark.svg); background-size: 150%; }
-
Try this:
#tabs-container { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABZCAMAAAD7LaEoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyxpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMi1jMDAxIDYzLjEzOTQzOSwgMjAxMC8xMC8xMi0wODo0NTozMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIEVsZW1lbnRzIDExLjAgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNDg1MjZGNTI4MzExRTc4MTJDODIyQjMwRDlGN0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVFNDg1MjcwNTI4MzExRTc4MTJDODIyQjMwRDlGN0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUU0ODUyNkQ1MjgzMTFFNzgxMkM4MjJCMzBEOUY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUU0ODUyNkU1MjgzMTFFNzgxMkM4MjJCMzBEOUY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7B0MKMAAAABlBMVEWrq6r////zIykWAAAAAnRSTlP/AOW3MEoAAAMcSURBVHja3FnbkqswDJP+/6fP7AWIbfkSCvtwmNnZVlUChUSyVfDrAPD1Bx7H9+sFQGDQMU6KAY4hWN5f03ggEHqGnRTXhV6YPTyDmtFOcdLoX1xAmCD7JBDA5eq4XugvwAPgCqBinOfTQ36Rn+EWYMWgHKLmWLjn4vFAAOtPHYOBhgyw38pctBpCC5jHs4yxgGfQAGjnME/t/LcsBTYAFsCvZbsW3CqlXJU5oNavnkPuuVVhsk23XvqhKl5S0CvIAOBwSP7tly1Va8sAQHKzHgbMDWB9PXTr1yBknCSc8vaz2QDobx7NjlC3t2IwYzRrng3ACGhHIK0KYBNABWQS5gG2DCgtJaPkdgq9DXhnuRB4r4ChjQBKwI1JAbaMcF5aIKkjlEWs+7kwET+ErjwiHgIQAKHdLAWKUt5LE/mpOqNQ5XLfMyRQmdYLwNunCcV7DeAegO55snV4aWtVRzBcnXsMXfx0ADXAhLHuV6ZCcahs3iJMVa+QvXGLoOdgkM5U1Snr7nKIAAaWlNgaWp9ztmYeiXLcpgFAOgdtRUkj7/70HmDsTjtGtcrpZbwuj/oCKqvm2W3+AeBK8ieUqwCqpiWr92+U6nfaCm4Pqb8wPvFV1SHce8DNDfcroFVobGh4Juqx+uo3H3wHbwHYHj8mBUpKgkCxZsj4oVBXqZTcq91zZe+Cn01g5GK9N3LCiFlNiNwo0pwix4NqIqrMUcSTaKhxHXOkHHxA09CVg2zrwz67Ed2v9jaT8Um/WnIo49kx5/ibjgD3jhDe5x3BfkjG9ukFc3456IqRXFGQPxTvl1s6BZqsvgvvuVWqs40fUnVFnsTfkOxRNMSPs6JReM8aQGBQdwShj4N2iMiArAXoJZvD4P1DgGkVlmX11Fk95a58LLyfAneS+DvhPV7WtCq8Z5VWMU9dyrhnYs68ad87SXwPMAcSVe+zemkEvTNkLXwdzS9DqOqSpd4YhfefA49l9YPMJvWKspjvhzDYWmaWHAds3Q8Ak2hehoGBwYThvCOpbN4K7/MYlqOgVia3tYRIbauDCfX+/wrv/wkwAErXCouVGjItAAAAAElFTkSuQmCC) !important; }
-
@luetage
Nice.
There are substantial differences between encode images in base64 or hooking the image files directly? -
@Hadden89 Images in text form load faster, and you don't have to place an additional file. But if you are using VivaldiHooks already, linking to images is probably more comfortable. I'm just trying to keep everything in a single css file, that's why ^^
-
@luetage
It has sense.
I use some .css instead - panel, tabs, controls, speed dial, toolbar - so probably I prefer the \hooks\img way to keep the files with less lines and characters and as I can easily put "experimental" codes.
I have a lot of ugly/* comments */
and even some working-but-no-more-used-codes thereBefore I had one .css for every hook... but they were a nightmare to handle, so I merged them in sections lol
-