Custom code not working

Design help Custom code
1

Hello and thank you in advance.

I am trying to make a custom polygon to populate with text. But it’s not showing.

I’ve tried a variety of things. Including custom code in the head, and before the body tag (both in the settings of the page itself, because it’s not global).

I’ve tried:

<style>
 .class-name{
   shape-outside: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
   -webkit-clip-path: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
   clip-path: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
  }
</style>

What am I doing wrong?

Thank you again.
Richard

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Richard, you didn’t indicate which page or section to find the element you’re trying to affect.

But I’ll guess one of the following;

  • Your the object you’re trying to affect probably does not have a class name of class-name. That would be unusual. If you’re trying to affect footer-wheat then you need to use a class name of .footer-wheat in your custom CSS.
  • Or, uour element is an empty DIV, and has no content, height or width. Your CSS might be applying properly, but if the affected element has no size, it will be invisible.
3

Hello @memetican
Thanks for the response. Yes of course, how silly of me.

You are correct, the class name is not “class-name”. I was just using that as an example. The section I am talking about is the white section right under the hero (with the picture of the 2 people). The section class name is “home-page_axistech-section”, and the div in question has the class name: “shape”, I know… clever name.

It’s not an empty div (it contains an H2). And for referencing the class name, I was actually using:

<style>
 .shape{
   shape-outside: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
   -webkit-clip-path: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
   clip-path: polygon(100% 0, 100% 78%, 17% 32%, 46% 100%, 0% 100%, 0 0);
  }
</style>

I took out the code though, because it didn’t seem to do anything. Thus my problem.

Any ideas?

Thank you again for taking a look at this for me!

Richard

4

Seems to work fine-

image
image1164×516 196 KB

shape is your text here, so… not sure of your goal but the poly CSS is applying.

I put is as an HTML Embed in that area so that it’s easily found, but also in an HTML Embed, <style> CSS applies while you’re in the designer- not just on the published site. It’s easier to see that way, for things like this.

image

If you were previously putting the code into the before-/head custom code area, it would still work fine but you would not see the effect in the designer.

5

Hello @memetican
Thanks for the help. Perhaps I misunderstood how polygon works. I thought the shape would contain the text. This looks like it’s just overlaying the text.

What I am trying to do is create run-around text (around the image). Any ideas of how I might be able to do that?

Thank you again,
Richard

6

Eh, no, you’d need to do some research into the technique you’re trying to achieve.
Here’s a quick attempt in CSS that might get you started- however as you can see the polygon clips the text.

7

Hello @memetican

Thank you.

I believe I found what I need. You make a polygon… not to encircle the content, but rather to run the content around the outside of the shape. Then you put the polygon over the object you want the text to flow around.

Turns out at the moment it’s down the list of priorities for the site. But when I do get there, I will come back and post a how-to for others that may need the same thing.

Thank you again Mr. Wells. I really do appreciate it.

Richard

1 Like