I thought I try the new beta which did an automatic conversion of my template which seems to work alright except one major thing is one of my css classes isn’t functioning anymore and I’m unsure what would cause this? What different syntax or order is required from v0 to v1?
Here is my css that I load through my theme that worked in v0.
:host {
background: linear-gradient(-45deg, #fefcea 0%,#f1da36 100%)top left / cover no-repeat;
background-color: white;
border-radius: 10px;
width: 50vw;
height: 50vw;
/*position: relative;*/
}
.label {
align-items:flex-end;
padding-bottom: 0em;
font-size:75%;
color: black;
}
.label:after{
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
background: url('
data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0iTTI0IDEydjZsOC04LTgtOHY2Yy04Ljg0IDAtMTYgNy4xNi0xNiAxNiAwIDMuMTQuOTIgNi4wNSAyLjQ4IDguNTJsMi45Mi0yLjkyYy0uODktMS42Ny0xLjQtMy41Ny0xLjQtNS42IDAtNi42MyA1LjM3LTEyIDEyLTEyem0xMy41MiAzLjQ4bC0yLjkyIDIuOTJjLjg5IDEuNjcgMS40IDMuNTcgMS40IDUuNiAwIDYuNjMtNS4zNyAxMi0xMiAxMnYtNmwtOCA4IDggOHYtNmM4Ljg0IDAgMTYtNy4xNiAxNi0xNiAwLTMuMTQtLjkyLTYuMDUtMi40OC04LjUyeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9IlVwZGF0ZSwgQXV0b3JlbmV3LCBSZWZyZXNoLCBSZWxvYWQiIGRjOmRlc2NyaXB0aW9uPSJVcGRhdGUsIEF1dG9yZW5ldywgUmVmcmVzaCwgUmVsb2FkIiBkYzpwdWJsaXNoZXI9Ikljb25zY291dCIgZGM6ZGF0ZT0iMjAxNi0xMi0xNCIgZGM6Zm9ybWF0PSJpbWFnZS9zdmcreG1sIiBkYzpsYW5ndWFnZT0iZW4iPgoJCQkJPGRjOmNyZWF0b3I+CgkJCQkJPHJkZjpCYWc+CgkJCQkJCTxyZGY6bGk+R29vZ2xlIEluYy48L3JkZjpsaT4KCQkJCQk8L3JkZjpCYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOkRlc2NyaXB0aW9uPgoJCTwvcmRmOlJERj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+Cg==
') no-repeat center 15% / 35%
}
This one button here which simlilary all my other buttons have the same look (diff icons/colors)
Now in beta 5 all my icons look like this:
I didn’t change the css, thoughts on why I can’t target the widget/button like I used to as I’m a bit puzzeld
EDIT:
Weirdly, if you remove the “.” before label and label:after it works? Not sure how to translate that with my theme just yet but still scratching my head because this shouldn’t work like that and needs the “.” – is this a bug?
:host {
background: linear-gradient(-45deg, #fefcea 0%,#f1da36 100%)top left / cover no-repeat;
background-color: white;
border-radius: 10px;
width: 50vw;
height: 50vw;
/*position: relative;*/
}
label {
align-items:flex-end;
padding-bottom: 0em;
font-size:75%;
color: black;
}
label:after{
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
background: url('
data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0iTTI0IDEydjZsOC04LTgtOHY2Yy04Ljg0IDAtMTYgNy4xNi0xNiAxNiAwIDMuMTQuOTIgNi4wNSAyLjQ4IDguNTJsMi45Mi0yLjkyYy0uODktMS42Ny0xLjQtMy41Ny0xLjQtNS42IDAtNi42MyA1LjM3LTEyIDEyLTEyem0xMy41MiAzLjQ4bC0yLjkyIDIuOTJjLjg5IDEuNjcgMS40IDMuNTcgMS40IDUuNiAwIDYuNjMtNS4zNyAxMi0xMiAxMnYtNmwtOCA4IDggOHYtNmM4Ljg0IDAgMTYtNy4xNiAxNi0xNiAwLTMuMTQtLjkyLTYuMDUtMi40OC04LjUyeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9IlVwZGF0ZSwgQXV0b3JlbmV3LCBSZWZyZXNoLCBSZWxvYWQiIGRjOmRlc2NyaXB0aW9uPSJVcGRhdGUsIEF1dG9yZW5ldywgUmVmcmVzaCwgUmVsb2FkIiBkYzpwdWJsaXNoZXI9Ikljb25zY291dCIgZGM6ZGF0ZT0iMjAxNi0xMi0xNCIgZGM6Zm9ybWF0PSJpbWFnZS9zdmcreG1sIiBkYzpsYW5ndWFnZT0iZW4iPgoJCQkJPGRjOmNyZWF0b3I+CgkJCQkJPHJkZjpCYWc+CgkJCQkJCTxyZGY6bGk+R29vZ2xlIEluYy48L3JkZjpsaT4KCQkJCQk8L3JkZjpCYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOkRlc2NyaXB0aW9uPgoJCTwvcmRmOlJERj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+Cg==
') no-repeat center 15% / 35%
}
The widgets' html structures have changed, you need to use the browser inspector (f12) to check it out.
Weirdly, if you remove the “.” before label and label:after it works
That's one of the aforementioned changes.
1 Like
Thanks Jean,
After messing with it a bit more I figured out how to fix my theme. I’m not sure I understand really, but of course with trial and error I figured it out.
Thank you for enlightening me that the html structure changed and I needed to amend my code to work with it.
Cheers!
hi @DMDComposer,
It would be nice to post for the community the code that really works with v1. it can help us everybody to jump to v1 with ease.
Thanks
Sure. It’s actually the one in the edit post above
:host {
background: linear-gradient(-45deg, #fefcea 0%,#f1da36 100%)top left / cover no-repeat;
background-color: white;
border-radius: 10px;
width: 50vw;
height: 50vw;
/*position: relative;*/
}
label {
align-items:flex-end;
padding-bottom: 0em;
font-size:75%;
color: black;
}
label:after{
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
background: url('
data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0iTTI0IDEydjZsOC04LTgtOHY2Yy04Ljg0IDAtMTYgNy4xNi0xNiAxNiAwIDMuMTQuOTIgNi4wNSAyLjQ4IDguNTJsMi45Mi0yLjkyYy0uODktMS42Ny0xLjQtMy41Ny0xLjQtNS42IDAtNi42MyA1LjM3LTEyIDEyLTEyem0xMy41MiAzLjQ4bC0yLjkyIDIuOTJjLjg5IDEuNjcgMS40IDMuNTcgMS40IDUuNiAwIDYuNjMtNS4zNyAxMi0xMiAxMnYtNmwtOCA4IDggOHYtNmM4Ljg0IDAgMTYtNy4xNiAxNi0xNiAwLTMuMTQtLjkyLTYuMDUtMi40OC04LjUyeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9IlVwZGF0ZSwgQXV0b3JlbmV3LCBSZWZyZXNoLCBSZWxvYWQiIGRjOmRlc2NyaXB0aW9uPSJVcGRhdGUsIEF1dG9yZW5ldywgUmVmcmVzaCwgUmVsb2FkIiBkYzpwdWJsaXNoZXI9Ikljb25zY291dCIgZGM6ZGF0ZT0iMjAxNi0xMi0xNCIgZGM6Zm9ybWF0PSJpbWFnZS9zdmcreG1sIiBkYzpsYW5ndWFnZT0iZW4iPgoJCQkJPGRjOmNyZWF0b3I+CgkJCQkJPHJkZjpCYWc+CgkJCQkJCTxyZGY6bGk+R29vZ2xlIEluYy48L3JkZjpsaT4KCQkJCQk8L3JkZjpCYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOkRlc2NyaXB0aW9uPgoJCTwvcmRmOlJERj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+Cg==
') no-repeat center 15% / 35%
}
If from my basic undestanding is now everything is enclosed in an “inner class”… so in my theme to ammend the changes in v1 to my theme. I went from this as the old one:
.Button_2_Icon_Only_Invert {
text-transform:none;
border:none;
border-radius: 5px;
Font-Size: 125%;
Background-Color: var(--bg-color-default);
}
.Button_2_Icon_Only_Invert .label {
align-items:flex-end;
font-size: 0%;
color: black;
padding-bottom: 3%;
}
.Button_2_Icon_Only_Invert .label:before {
filter: invert(1);
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
padding-bottom: 3%;
color: black;
z-index:-1;
background-image: var(--icon-default);
background-repeat: var(--bg-repeat);
background-position: center center;
background-size: 50%;
}
To this as the new one, ridding of the “.” and adding >inner. I’m still working on my modal fixes as those havent’ converted well and I’m probably just misintrepting the wrong syntax or parent structure.
.Button_2_Icon_Only_Invert {
text-transform:none;
border:none;
border-radius: 5px;
Font-Size: 125%;
Background-Color: var(--bg-color-default);
}
.Button_2_Icon_Only_Invert inner>label {
align-items:flex-end;
font-size: 0%;
color: black;
padding-bottom: 3%;
}
.Button_2_Icon_Only_Invert inner>label:before {
filter: invert(1);
content: "";
width: 100%;
height: 100%;
left: 0;
right: 0;
position: absolute;
padding-bottom: 3%;
color: black;
z-index:-1;
background-image: var(--icon-default);
background-repeat: var(--bg-repeat);
background-position: center center;
background-size: 50%;
}
And the final result looks like this in my css style properties within v1 OSC.
Class: Button_2_Icon_Only_Invert {
background-color: darkorange;
}
label:before {
background-image: var(--icon-whole-note);
Background-Position: center 65%;
Background-Size: 30%;
}
1 Like
This line looks a bit weird: Class: Button_2_Icon_Only_Invert {
the class: myclass; statement is not a css selector, it’s merely a hack that tells o-s-c to add this class to the widget, I think it should look like this:
class: Button_2_Icon_Only_Invert;
:host {
background-color: darkorange;
}
It may work though because the parser is permissive.
1 Like
Adding > inner is only necessary when there are nested widgets that might be affected by the css rule, otherwise it'll just make the css less performant.
/* wrong */
.Button_2_Icon_Only_Invert inner>label:before {
/* good */
.Button_2_Icon_Only_Invert label:before {
1 Like
Thanks Jean!
I appreciate you correcting my syntax and explaining the correct or formal way vs my own hack method haha!
Thanks again. Cheers.