SVG Containers

Apr 9th, 2022 at 12:09 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

Good evening fellow Coffeecupers!

I was wondering if anyone figured out a way to ad SVG Container elements to a project without using an html element to do it. I am trying to create curved containers and can do it via html element and custom css.


<div class="curved-div">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci lorem, porttitor nec vulputate sit amet...
</p>
<svg viewBox="0 0 1440 319">
<path fill="#fff" fill-opacity="1" d="M0,32L48,80C96,128,192,224,288,224C384,224,480,128,576,90.7C672,53,768,75,864,96C960,117,1056,139,1152,149.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>


I can add the svg only if i add an entire html element with custom styling then it works.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Apr 9th, 2022 at 01:29 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,797 posts
Online Now

Sure can Steve

I had a step by step tutorial on my site, which is being renovated as we speak, si I am uploading a quick demo
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Apr 9th, 2022 at 01:47 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,797 posts
Online Now

Here You Go

https://youtu.be/bhIB4OjZz8s
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Apr 9th, 2022 at 02:07 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

Thanks Wayan, I cant seem to get mine to work like that. Here maybe you can see what i did wrong.
Attachments:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Apr 9th, 2022 at 02:21 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

Here is an example of it working. This was not built in SD but I would like to get it to work in SD
Attachments:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Apr 9th, 2022 at 02:59 AM
User 2699991 Photo

Wayan Jaya
Registered User
4,797 posts
Online Now

Steve wrote:
Here is an example of it working. This was not built in SD but I would like to get it to work in SD
Steve
You have the <svg> stuff in the footer,, it should be in the content of the container
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Apr 9th, 2022 at 11:02 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

Thanks for taking the time Wayan, I have moved the svg to the content container and still did not work.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Apr 9th, 2022 at 11:53 AM
User 2088758 Photo

Steve
Senior Advisor
3,086 posts

ok I kind of got it to work. I started over and can get the curve going but I am unable to put any other content in that div after. I even created another container put it in the curved container and it seems like SD is ignoring everything else. Is this normally what happens when you put content in the Content Code section ?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Apr 9th, 2022 at 12:09 PM
User 379556 Photo

Frank Cook
Registered User
1,535 posts

Steve wrote:
... Is this normally what happens when you put content in the Content Code section ?

Yes, it's a Content switching box that is very useful. One can now actually alter the code of an element by copying its HTML (via right-clicking on it in the canvas or Elements Tree), pasting that into the Content box, removing the outer tags, and editing the rest as wanted.

Frank
Apr 9th, 2022 at 03:21 PM
User 2699991 Photo

Wayan Jaya
Registered User
4,797 posts
Online Now

Hi Steve
I will have my REDTUTORIALS site up & running later today after some renovations,, I will put up the step by step one first, showing how to get content to overlay.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

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.