Streaming live at 10am (PST)

My Webflow code and elements database


#1

Tjena!

You've hopefully come across my Google Font Gallery which I find super useful. Now I got a new place for resources that I would like to share with you.

Over the months I've created a new site where I've collected some cool snippets and design tutorials I've come across from the various threads on the Webflow Forum. Here you'll find CSS code for the Custom Code area, Javascript-stuff, Native Webflow elements tweaks, non-native element tutorials (like a modal pop-up) and tutorials on how to incorporate external widgets like Instagram feed into your Webflow site.

A lot is covered step by step to make it easy to understand how to create certain parts and elements.

This website is updated when I come across something interesting, so either you bookmark it or you clone it and add your own content to it.

Here's the link:

https://webflow.com/website/webflowcodestutorials?s=webflowcodestutorials


#2

That's just awesomeness @StevenP, thanks so much for sharing that smile Some very useful information in that site. I love it smile Cheers, Dave


#3

Thanks a lot Dave! I think it's great to have fast access to codes and tutorials, especially those that comes in handy every time for website design like removing the default glare and rounded corners on form in iOS devices. It's a lot easier to have them right in front of you instead of searching the forum for the specific thread all the time.

Edit: Probably most of you know, but for those who are new to codes and stuff: I've removed the <style></style> and <script></script> tags due to som funky behavior in the designer (text disappeared). So in the Custom Code area <style> goes for CSS as Head code and <script> for the Javascripts in as Foot-code.

Just wanted to point that out.


#4

Tjena, bra jobbat smile

Another thing about forms and iOS. If you do a mobile view, and we usually do in webflow, set the font size to 16 in the input field to prevent the browser to zoom in on the form.

Thanks for the work on this helpful site smile


#5

Tackar smile

Interesting! Would also setting the fields to a specific height (big enough) prevent that as well?


#6

I don't know, haven't tried that. I googled for a solution and found that and it worked =)


#7

Update:

@cyberdave showed a user how to make an div overlay to show on hover. I did a text based tutorial covering it step-by-step from his excellent video in this thread: http://forum.webflow.com/t/how-to-create-a-lightbox/12148

Title: Div overlay on Lightbox image
Category: Native Tweaks
Link: https://webflow.com/website/webflowcodestutorials?s=webflowcodestutorials39


#9

Steven,

Wow! Thanks so much for your contribution with your Codes & Tutorials page. About a week or two ago I was just thinking (wishing, hoping) about something just like what you have given us here. Fabulous! I don't code so stuff like this is just super handy to have available.

Thanks again,
Steve M


#10

Great to hear you like it! The purpose of it is exactly like that : people who can't code should still be able to achieve great stuff that (currently) aren't available in Webflow natively. Off course I hope a lot of the stuff will be sometime in the future! smile


#11