Streaming live at 10am (PST)

[Plugin] Load & Save custom HEAD in Design Mode


#1

Hello fellas,

So.. my hands have been itching, I had to do it :smile:

I have written a simple beginner-style userscript for webflow.
The script imports the custom <head> you have defined in the site Code section, and applies it to the site in Design Mode.

I've gone an extra mile, and displayed the custom <head> in the sidebar, just for fun.

I won't release it until I'm sure that this doesn't breaks rules or something.

Editing and saving code does not work right now.. but I'm working on it.

Benifits:

  1. Automatically imports <head> from Dashboard.
  2. Works on every page in the project in Design Mode.
  3. No need to duplicate <head> code, never again.
  4. It's cool.

Awesome, huh?

UPDATE

Well, I've read the terms and apparently I'm not breaking the agreement.. yay!
Here is the js file that enables this functionality:
http://cl.ly/code/1Q1g0S171D1k

You will need to run it using a userscript extension for your browser.
Tampermonkey for Chrome


Greasemonkey for Firefox

Disclaimer

If you don't understand what the script is doing.. please do not use it. I can't be held responsible if something happens to your project. Use at your own risk!

How does it work?

  1. The script will load the custom <head> using webflow API.
  2. It will inject that code 5 seconds after the project loads just before </body>, this gives it enough time to be ready and should work in all cases.
  3. A new box will be added to the Styles section in the sidebar that displays the custom <head> imported.

TODO

  • The ability to save the custom <head> from inside Design Mode, if possible.

Javascript in preview mode
How to make Webflow supports RTL in your website
#2

so is that a 'shopped version of the sidebar or does your script actually add that element to the style tab?


#3

@pingram3541 It's actually adding the element to the sidebar.


#4

Well, I've read the terms and apparently I'm not breaking the agreement.. yay!

I've updated the first post with the JS file.


#5

@cdes, very clever smiley

This highlights the need for the head and body code to be right in the designer interface, without the need to jump back and forth repeatedly. It's something we've been looking at implementing natively, but it does have some issues (e.g. any change would require a refresh of the inner iframe since there's no way to unload scripts) that we're trying to work around.

In other words, we hope to build this in natively soon!


#6

@callmevlad Thanks blush

In my case, It's important to edit them directly from design mode, but what I've got right now makes me happy. So, no pressure!


#7

A suggestion, since often a script could also get in the way after it has ran, maybe a toggle option, especially for events that fire on load I may want to switch between before and after DOM states rather than refreshing the design view to do this.

Does this make sense?


#8

This is great because I can simply include my own externally hosted scripts and style files and then edit them and simply refresh the design view to see them in action. No more having to publish just to view these changes. Thanks for this!


#9

@pingram3541 I couldn't get my scripts to run in Design Mode, so I've limited the import only to the <head> code. I'm not that good with JS... sorry.

And for using external CSS, I've never thought about it...! it's brilliant.. laughing


How to make Webflow supports RTL in your website
#10

Good news fellas,

I've got a little bit good with JS, so I've updated the script.

New features:
- Ability to save HEAD from Design Mode
- The script is now hosted on my website. So, if I release a new version you'll get the update OTA.

http://ah.sa/projects/tamper/webflowcustomhead.tamper.js

Have fun smiley


#11

Hey cdes, this is pretty great but it's not working for me. I bet its because of the update to the Webflow interface. How hard would it be to fix for the current version?


#12

Well, I've been off Webflow for over a month. I'll see what I can do. wink


#13

Hello Mike,

I've updated the script to work with the current Webflow.
Sorry, I've been busy.

Have fun smiley


#14

Should this work for javascript scripts? Seems not to be working for me


#15

Nope, currently it's just for head. I don't know how to make it work with body scripts too. They can be injected but they do not interact with the dom. Maybe it's because the DOM was generated before the scripts were applied, thus I need to find a way to tell the scripts to reread the DOM.


#16

I've updated the script.

Changes in 1.6:
1. Now you can save and load footer code too.
2. Normal JS runs just fine. However, I couldn't make jQuery to work.
3. There's a nice feedback message when you click "Save"

Have fun!


#17

Awesome smile Mighty fine job there @cdes !


#18

@cyberdave Not even slightly as near as your work in Webflow, but thanks!


#19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.