Share Your CodePen Ideas - Post ID...

Jul 3rd, 2019 at 10:37 AM
User 10077 Photo

Brian Durfee
Senior Advisor
1,095 posts

The new SD4 now includes an export to CodePen. How do you plan to use this feature?
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Jul 3rd, 2019 at 12:12 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Brian Durfee wrote:
The new SD4 now includes an export to CodePen. How do you plan to use this feature?


Can you re import the code after its modified in CodePen ?
Bootstrap 5 CSS Grid.
Jul 3rd, 2019 at 12:14 PM
User 10077 Photo

Brian Durfee
Senior Advisor
1,095 posts

I haven't found a way to do this yet.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Jul 3rd, 2019 at 12:27 PM
User 122279 Photo

Inger
Senior Advisor
14,457 posts
Online Now

That is not possible.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 3rd, 2019 at 01:38 PM
User 2792467 Photo

Hennie
Registered User
161 posts

Forget it.
SD generates html and css code, based on user input and choices made in the panes on the right side of the SD user interface. The reverse process would be technically very difficult - if not impossible - to implement.

Would have been a nice feature though: feed SD with the html and css code of an existing website, make some changes in SD and generate a modified version of the original website.

Based on what I have seen so far I wonder whether this new version is truly worth being named 4.0 instead of 3.6
Eindhoven :: Netherlands

It's easy to see, once you see it.
Jul 8th, 2019 at 05:13 PM
User 244626 Photo

Twinstream
Registered User
811 posts

Brian Durfee wrote:
The new SD4 now includes an export to CodePen. How do you plan to use this feature?


Well, one thing that is really nice is the ability to edit html elements now. Export to CodePen, make your edit, and paste back to the html element.

I wonder if they could do something like this for the css and js head and footer...? That would be beneficial.

Even open custom css or js files to CodePen if I am not asking too much.
Bootstrap 5 CSS Grid.
Jul 8th, 2019 at 05:52 PM
User 122279 Photo

Inger
Senior Advisor
14,457 posts
Online Now

That's a good idea, to use CodePen for editing contents of html elements. I have always , when needed, kept the HTML Editor open for that purpose, but of course, it might be that someone hasn't got a code editor installed.

I agree that css and js placed in the header and footer also should be visible in CodePen. While I have been working on theme conversions I have noticed that in some of the themes, some js that I would have popped into the Page manager footer section, actually was stuck into a html element near the bottom of a page instead, and if so, it may of course be edited in CodePen.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jul 8th, 2019 at 05:59 PM
User 188640 Photo

Ernie Hodge
Registered User
895 posts

Or Notepad++
A Rose is Just a Weed in a Corn Patch!
Jul 8th, 2019 at 09:23 PM
User 10077 Photo

Brian Durfee
Senior Advisor
1,095 posts

The benefit of Codepen is that you can see the results in real time as you code them. For example, put your custom css and javascript in a couple of html elements along with any other code or SD elements and then export to Codepen. You can then play with the css, javascript or other code until you get it right. Once you know it all works, just copy it back into SD4.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Jul 9th, 2019 at 03:58 AM
User 2792467 Photo

Hennie
Registered User
161 posts

The benefit of Codepen is that you can see the results in real time as you code them. For example, put your custom css and javascript in a couple of html elements along with any other code or SD elements and then export to Codepen. You can then play with the css, javascript or other code until you get it right. Once you know it all works, just copy it back into SD4.

Maybe add and integrate Codepen like functionality to SD, with live preview of added <html> elements.
PLUS: integrate coffeecup HTML editor functionality in SD (helps to simplify Coffeecup product portfolio as well).
I also have a name for this version: " SD Pro ". It would fit nicely in my Apple line up: MacBook Pro, iPad Pro,... :cool:

Of course would be happy to pay extra for this :):):):)
Eindhoven :: Netherlands

It's easy to see, once you see it.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.