Join the Webstudio community

Home
Members
Dirky Dirk
D
Dirky Dirk
Offline, last seen 4 weeks ago
Joined December 13, 2024
Was thinking that maybe we could implement some sort of community bounty program that could help increase brand awareness and help grow the community.

The bounty program could have some kind of reward tier based system, such as a special badge and the top tier would give users access to a lifetime membership.

We could start off with having bounties for templates and design blueprints that would be shared across the community.

Thoughts?
6 comments
D
A
Right now can only add transitions to non pseudo classes.

Example use case: Add animation effect on hover only.
8 comments
D
O
for creating template sections, I think it would be best practice to ensure sections are using default system fonts. If I were to use an uploaded font within a template, would that uploaded font be included in the section template?
7 comments
O
D
any reason why this script completely freezes webstudio?

Plain Text
<div id="ecwid-widget-placeholder" class="ecsp ecsp-SingleProduct-v2 ecsp-Product ec-Product-3290828" itemtype="http://schema.org/Product" data-single-product-id="3290828">
    <div customprop="options"></div>
    <div customprop="qty"></div>
    <div customprop="addtobag"></div>
</div>

<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?260044&data_platform=singleproduct_v2" charset="utf-8"></script>
<script type="text/javascript">
    function initializeWidget() {
        if (window.Ecwid) {
            Ecwid.OnAPILoaded.add(function() {
                xProduct();
            });
        }
    }

    // Initial widget initialization
    initializeWidget();

    // Use MutationObserver to detect when the relevant page is active
    let observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (document.contains(document.getElementById('ecwid-widget-placeholder'))) {
                // Re-initialize the widget
                initializeWidget();
            }
        });
    });

    // Configuration of the observer:
    let config = { childList: true, subtree: true };

    // Pass in the target node, as well as the observer options
    observer.observe(document.body, config);
</script>
72 comments
D
O
D
Dirky Dirk
·

Node Server

node / server
19 comments
D
B
O
if not, maybe not a bad idea to have hot key that opens quick dialog box that allows you to quickly select a component without using mouse.
2 comments
D
O
Is there a way I can change the padding / margin on all sides with keyboard only? I've been setting one side and then using mouse plus shift (I think) to change all properties, however it's a bit finicky due to the size of my monitor and scaling.
46 comments
D
O
M
Is there a keyboard shortcut to move selected component up / down within the design panel? For example, in adobe photoshop command+[ (up) / command+] (down) will move the current selected layer or group of layers.
4 comments
D
O
when clearing styles on local token for a button it currently doesn't remove the background color and border. Does it make sense for me to create a reset token or simply create a dedicated token for the element I'm working on? I feel like I could possibly be creating more tokens and over complicating things and would be nice to know if there are any standards that I should be following when using tokens.
16 comments
D
O
J
has there been any suggestions for having a built in tour guide component? I think that may be helpful for templates.
24 comments
D
O
not sure what I'm doing wrong but I do keep getting this error:
12 comments
D
O
Currently, we must use an uploaded image for background-image property. I think it makes sense to give users the option to specify an image src, that way we can include images from API within collections or use images we already have uploaded to a bucket / CDN / etc...
13 comments
D
O
J
Application Error
99 comments
D
O
c
The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

Example use case:
Plain Text
width: min(1200px, 100% - 4rem);
7 comments
O
D
Not sure if this has been mentioned yet but I think it would be a good idea to implement functionality that allows users to convert a component into a slot.
5 comments
D
O
Is there version history where I can revert back to a previous saved stage of a template?
9 comments
D
O
D
D
Dirky Dirk
·

animation

for example, want to add this to an element:

animation: scroll var(--_animation-duration, 2s) var(--_animation-direction, forwards) linear infinite;
2 comments
D
O
I'm "@import" a google font. Just wondering if there is a way to get the font to show up as a selection in the typography font drop down.
5 comments
D
O
Would love to extend the overflow options and especially give us the ability to utilize the overflow clip / overflow clip margin properties

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin
5 comments
O
D
i've added animation to raddix dialog content component. you can view the page here: https://reactivate-marketing-site-01k72.wstd.io/
be sure to go to mobile breakpoint for hamburger icon to appear, once you click i have animated the dialog content component menu to slide in / out and you can toy around with your own animations. This is how I managed to do it:

Project Settings > Custom Code:

<style>
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeOutOverlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes slideInContent {
from {
transform: translateX(-100%); /* Start off-screen to the left / } to { transform: translateX(0); / Slide in from the left / }}@keyframes slideOutContent { from { transform: translateX(0); / Start on-screen / } to { transform: translateX(-100%); / Slide out to the right */
}
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="closed"] {
animation:slideOutContent 300ms ease-in;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="closed"] {
animation: slideOutContent 300ms ease-in;
}


</style>
4 comments
D
A
Perhaps a bit of a horsey idea, however, as it is now, no real way to apply certain styles for child elements, especially when elements are positioned outside the viewport. Now I must whip up some custom HTML / CSS in order to achieve the desired effect I'm shooting for, however, not ideal for those who are simpletons and are not savvy to creating their own static HTML / CSS.

This method would essentially allow you to create a custom element that would be wrapped in a selected tag. Screenshot may help have a better understanding and I'm sure there's a much better way of achieving this in a much cleaner manner.

Thanks!
20 comments
D
A
O
When I was presented with the project settings modal, it feels like we're missing a save settings button. Perhaps an unnecessary click for the end user, however it doesn't give the impression that if I click the close icon that my settings would be immediately saved upon exit. Just a thought.
1 comment
O
for example if I want to change all of the button styles at once I can do it within the UI interface. perhaps it must be done through variables, i'm just not familiar with radix and haven't taken a look at the documentation
6 comments
D
O
shouldn't Menu Items already be pre-configured as a token?
3 comments
D
O