Custom Design

[web3ui]

Custom Design

[jleung1029]

Hi there @BillyG83, I am a frequent user and a big fan of the web3uikit SDK - would I be able to suggest that we allow styling changes/modification for the ConnectButton from a product perspective?

The rationale a couple of developers and I have is that, we believe that the web3uikit can do wonders in enabling a lot of web3 adoption with its SDK and allow more developers/builders to code more web3 applications easily going forward.

The current inability to style and modify the button's design on the front-end does pose itself as quite a small barrier for the above said vision for the web3uikit SDK. This might prompt a couple of developers including myself to behind thinking of just re-coding a button from scratch, just to be able to style it with our website's theme. We felt quite urge to raise this with the web3uikit team to see if there was any way allow styling modification of the ConnectButton in the upcoming releases?

[BillyG83]

is this you @Y0moo (only joking)

hey @Qudusayo to be honest i was a little worried people would miss-use a CSS prop and cause themselves more pain than needed. Also the kit is aimed at building fast reliable apps with a consistent user experience. It is not aimed at being a tool to create any design.

Was there a particular problem you are having, maybe i can help

[BillyG83]

i'll close this issue as i don't think there is away to progress it right now. Please find more layout and customisation options the the kit grows but don't expect the SquareSpace of web3 from this project... although we might still build that in the near future from this kit =]

[Qudusayo]

is this you @Y0moo (only joking)

hey @Qudusayo to be honest i was a little worried people would miss-use a CSS prop and cause themselves more pain than needed. Also the kit is aimed at building fast reliable apps with a consistent user experience. It is not aimed at being a tool to create any design.

Was there a particular problem you are having, maybe i can help

Kinda late to see this, I was actually trying to add some custom features to my designs such as giving some buttons some specific classes to change their font and some other cards. But with the explanation given above, I typically understand the goal of the package. Indeed it's a nice one which I'll have to master then.  😁✌🏽

[solutionsSlayer]

Fast and uggly got it, ahah.

[joseph-allen]

Any project with a style guide can't use web3uikit unless they are okay with a random blue button. Is there a color prop or something to use here?

[Dynamitetechdev]

Besides, if you know your css well, this button are customizable to fit any theme at all,

to do this, wrap the <ConnectButton/> with a DIV, access the Connect button, but using the classname of the DIV, then Button tag, write your css.

Then for styling the text, the Text is wrapped around a <span> inside the button.

Customize it to your use😉