Web Panel Icons in 3.8
-
Web Panel icons can no longer be customized after 3.8 upgrade.
This does not work anymore:
Force your web panels to display their favicons
Any ideas how to do it now?
-
@mreizinho
Changeimg
byspan
in your code :[title~= "https://flipboard.com/"] > span {content: url("https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico");}
-
@Ornorm This works, thanks, but now the size of the favicon is incorrect (too large). Is there an easy way to fix this?
-
-
@mreizinho You could change the SVGs by using CSS path property, @luetage made a guide for changing icons. What you want may be separate from forcing web panels to display favicons.
-
@valiowk it seems that I've made a mistake. For what I can see, the area of the web panel icon occupies 26x26 px
-
@valiowk
You can play with thescale
property (1 being 100% - in the below example, 0.8 = 80% of the original size)[title~= "https://flipboard.com/"] > span { content: url("https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico"); transform: scale(0.8); }
I hope this helps.
-
@Ornorm Thanks for the help!
-
Sorry to get back on this. But the web panels in 3.8 are driving me crazy.
The notification badge doesn't display correctly if I have a custom icon.
I've kept my CSS to a minimum config but the behaviour remains:
#switch button.webviewbtn img { background-color: transparent !important; } /* ICONS FOR WEB PANELS */ [title~='https://www.messenger.com/'] > span {content: url('https://www.dropbox.com/s/enwc1n4794q6sba/messenger4.png?dl=1');}
Any ideas?
-
@mreizinho It looks like your custom icon is appearing in the notification bubble. You can use the css first of type selector to only select the first one.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type -
@mreizinho Please try this :
[title~= "https://www.messenger.com/"] > span:not(.button-badge) { content: url("https://www.dropbox.com/s/enwc1n4794q6sba/messenger4.png?dl=1"); }
(if you have other web panels that have a notification badge, please use the
span:not(.button-badge)
instead of the usualspan
in order to have the notification badge diplayed correctly ... or, easier, use that everytime)Edit : and don't forget to use the
transform: scale(X);
property if your icon is too big/too small (cfr my previous post) -
@code3 Thanks but I was unable to use it. Perhaps wrong syntax since I used:
[title~='https://www.messenger.com/']:first-of-type > span: {content: url('https://www.dropbox.com/s/enwc1n4794q6sba/messenger4.png?dl=1');}
@Ornorm Thank you. You're the best. You have solved it again! It worked. I'm using a scale factor of 0.7
[title~='https://www.messenger.com/'] > span:not(.button-badge) {content: url('https://www.dropbox.com/s/enwc1n4794q6sba/messenger4.png?dl=1'); transform: scale(0.7);}
Now I'm going to try to find some outline icons that would match the new design. And the code to change the background colour of the select panel button to White instead of Light Grey.
-
@mreizinho said in Web Panel Icons in 3.8:
to change the background colour of the select panel button to White instead of Light Grey
Have fun!
-
@mreizinho said in Web Panel Icons in 3.8:
[title~='https://www.messenger.com/']:first-of-type > span: {content: url(
It would be [title=] > span:first-of-type because you are selecting the first span. You could read up a bit more on CSS selectors, some can be quite complex but also very useful. But @Ornorm has a better solution.
-
@ornorm wow... that was easy:
#switch .addwebpanel-wrapper > button.active, #switch > button.active { background-color: #ffffff; }
-
@mreizinho Bravo!
-
@ornorm More difficult is getting rid of the rounded border at the top right and top bottom and the border in the right itself.
Want to change this:
Into this.
I have been messing with:
#switch .addwebpanel-wrapper > button.active, #switch > button.active { background-color: #ffffff; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
and was able to get rid of the rounded corners:
But can't get that thin 1px grey line on the right to disappear. Perhaps I'm looking into the wrong identifier?
-
@mreizinho It’s the right border.
-
@potmeklecbohdan I don't think so. Already tried and it doesn't work. Even tried adding negative values:
#switch .addwebpanel-wrapper > button.active, #switch > button.active { background-color: #ffffff; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: -2px; }
That's why I was thinking I might be using a wrong identifier and perhaps it has nothing to do with the .addwebpanel-wrapper
-
@mreizinho I’m not sure if negative numbers are allowed for border width. Anyway,
border-right: none;
with the correct selector worked for me. You might have some problems with the selector priority .