12 Replies Latest reply on Feb 26, 2018 8:02 AM by Sanford Whiteman

See changes in html and css in realtime

Victor Herrero Feb 7, 2018 3:57 AM

I was wondering if anybody knows a way to use codepen or a similar tool with marketo

Having to reupload a CSS or HTML file everytime you change something makes it cumbersome to work. (upload, reaprove, refresh, repeat)

Last time i tried uploading a marketo template to codepen, it wouldn't load forms or styles completely

Maybe it's just a matter of knowing how to set it up it properly. Maybe there is a similar service...

Thanks in advance!

Re: See changes in html and css in realtime

Frank Breen Feb 13, 2018 2:49 PM (in response to Victor Herrero)

Have you tried the following Chrome Extension: Marketo Guided Template Builder - Chrome Web Store?

It's a really cool extension that allows you to view Guided Templates offline. Jonathan Ankiewicz developed it, it helps me in the process of developing and having to do less uploading, etc...
2 of 2 people found this helpful
Like Show 2 Likes(2)

Actions
- Re: See changes in html and css in realtime
  
  ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4 Feb 13, 2018 2:54 PM (in response to Frank Breen)
  
  Thanks for the mention.
  
  I do have a second version half built that will allow you to actually update the input fields on the fly same as in the templates but I haven't had a chance to finish it.
  
  But knowing more people are using it I may have to really force myself to find the time.
  
  Like Show 0 Likes(0)
  
  Actions
  - Re: See changes in html and css in realtime
    
    Victor Herrero Feb 14, 2018 6:17 AM (in response to ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4)
    
    I installed it but I'm not sure how to use it to be honest :S
    Should I use it while editing the html of the template within marketo? Perhaps while modifying things from inside the developer tools on a landing page... ?
    
    Thanks!
    
    Like Show 0 Likes(0)
    
    Actions
    - Re: See changes in html and css in realtime
      
      Frank Breen Feb 16, 2018 12:46 AM (in response to Victor Herrero)
      
      If you open up your offline code in Chrome and switch this on, then you'll see the code in the same way as if it was in a Marketo LP, I then use Chrome Inspect to do my tweaks and translate that back into the actual code, basically you're cutting out the process of uploading each time, approving and re-approving to see changes.
      
      Like Show 1 Likes(1)
      
      Actions
      - Re: See changes in html and css in realtime
        
        Victor Herrero Feb 21, 2018 8:46 AM (in response to Frank Breen)
        
        I'm sorry, I'm new to markup languages.
        How do you "open up your offline code in Chrome" ?
        I've tried opening my html files with chrome before, but they don't render correctly because they are an empty template, so I imagine that's not what you mean, right?
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4 Feb 21, 2018 9:02 AM (in response to Victor Herrero)
        
        I build the chrome extension to help with it. Building templates through Marketo is not pleasant.
        
        Download the extension.
        Open the HTML page in the browser you are working on. Then click on the Marketo extension. Turn it on and it will take all of the meta tags and distribute the information throughout the page and your page will render correctly.
        
        If you have any questions or comments please feel free to address me with them. At some point when I can get some more free time I plan to release a second version but until then.
        1 of 1 people found this helpful
        
        Like Show 2 Likes(2)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        Victor Herrero Feb 22, 2018 3:09 AM (in response to ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4)
        
        Ok, so I think I get it now, just needed a little step by step:
        
        Open locally stored html template file with chrome (looks bad)
        Turn on extension, page reloads completely (looks good, like a rendered html marketo template)
        Work on the html file inside an editor (like sublime), save changes locally
        Go back to chrome tab, hit the extension, page renders with changes
        Repeat 3 and 4 ...
        
        I haven't tried steps 3 and 4, but if the extension really works like this, you and your extension deserve a LOT of credit!
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4 Feb 22, 2018 11:45 AM (in response to Victor Herrero)
        
        Thank you... there is so much more I want to do but I have so much to get done already I can't get to it.
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        Victor Herrero Feb 23, 2018 1:57 AM (in response to ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4)
        
        Perhaps if you dropped the xbox controller...
        (Just a joke, I have trouble dropping it myself)
        
        Your extension does something I think Marketo should have addressed long ago.
        When it comes to editing assets, Marketo's user experience is really bad.
        You can "drag and drop" modules in guided templates, sure, but they go from top to bottom only, to reorder you need to go 1 by 1, deleting takes for ever....
        
        Is there a way to load forms as well, with your extension ?
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4 Feb 23, 2018 1:18 PM (in response to Victor Herrero)
        
        I wish it was xbox.. haha..
        
        the you can load the forms if you are using the embedded the code, but just the div reference wont work.
        http://developers.marketo.com/javascript-api/forms/
        
        "You can "drag and drop" modules in guided templates, sure, but they go from top to bottom only, to reorder you need to go 1 by 1, deleting takes for ever...."
        
        I am not sure I completely understand what your question is.. but if your looking at ordering sections I would recommend a trick I used. I used the meta tags for templating for an input field and inputed numbers and used flexbox as my grid system and just used flexbox ordering to rearrange sections which will give your templates an insane amount of power. the down fall it's only supported so far back for browsers
        order | CSS-Tricks
        1 of 1 people found this helpful
        
        Like Show 1 Likes(1)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        Victor Herrero Feb 26, 2018 2:08 AM (in response to ce42fb8678250259f8eb7f8e061ec1d3bd11d5b4)
        
        Thanks for the form loading script! I knew about it but I didn't think of adding it to the code manually while using your add-on...
        
        The other was more of a complaint, not so much a question
        
        I'll have a look at the flexbox thing. Like I said, I just started with HTML and CSS. I've seen that flex property, but never really used it.
        I'll have a look at your link ! Thanks a lot!
        
        Like Show 0 Likes(0)
        
        Actions
        
        Re: See changes in html and css in realtime
        
        Sanford Whiteman Feb 26, 2018 8:02 AM (in response to Victor Herrero)
        
        Thanks for the form loading script! I knew about it but I didn't think of adding it to the code manually while using your add-on...
        You shouldn't use the embed code on a Marketo-hosted LP, or you will be reduced to 3rd-party security, i.e. PreFill is disabled.
        
        (Yes, since you have access to lead tokens on Marketo LPs, it's possible to simulate PreFill using tokens, but it's not a complete substitute and requires custom JavaScript for complex datatypes like Checkboxes.)
        
        Like Show 0 Likes(0)
        
        Actions

Go to original post