I don’t get it. What’s the point exactly? It fixes CSS creep? Doesn’t look like it.
@David I don’t know why your css is creeping into the embed, as I don’t work for divhunt just giving you a possible solution/workaround. The CSS creep is likely due to some non supported character in the embed element breaking the code, causing it to end early, and then referencing the rest as text, which is causing the creep. Which is why the divhunt guy recommended to put it in the custom code area. Although I do agree the custom code area would be better if you could select which pages you wanted to add custom code too, rather than it being global over all your pages. I didn’t test the solution I provided, just gave a possible work around that you could test with. I personally think that “embed” is a bad name for that element, it should be called “source code” because it actually lets you write code into the divhunt CMS system, it’s more than just an “embed”. Because it is a source editor in reality, what I described above as the core issue should make more sense than not. Its actually much more powerful this way though than if it only took an embed code, because you literally can custom code your own html, css, and js elements into the divhunt CMS without having to write an entire plugin. So say you wanted some custom thumbnails, you could copy and paste code into the embed to create them, which is why I say it really should be called “Source Code”. Sorry I couldn’t be of more help.
I am a bit confused by your interpretation of it being a source code editor.
So it makes sense that it behaves that way, but what I don’t get is when you say that you can copy paste code into it, paste from where? From another part of the website? But we can’t edit code on the site as far as I know, unless you export it. I like where you are going but got confused about your explanation of how it works.
@David lets say you find some HTML block online that you like, or you have an HTML template that you bought maybe.
For example take this link, its a fancy thumbnail example someone made: https://codepen.io/Fikri-Code/pen/LYNpKzJ
You could copy the HTML and the CSS, excluding the <body> tag, and paste it into the embed element in divhunt.
That would then create those thumbnails on the front end of your website. Then you can modify the code as needed. In this case, in order for it to work I did have to change the z-index: -1 to 1 being set on the image for the thumbnails to appear.
I changed this
img {
width: 100%;
z-index: -1;
margin: auto;
transform: scale(1);
transition: all ease-in-out 0.5s;
}
to
img {
width: 100%;
z-index: 1;
margin: auto;
transform: scale(1);
transition: all ease-in-out 0.5s;
}
but then now they work just like the example. Given this method may require you to have minimum knowledge of html, css, and maybe js. You can view my test of the thumbnails on my divhunt site here: https://www.webonized.com/thumbnail-test
In regards to saying it’s like a source editor, I mean like say you are using an editor inside some CMS like CKEditor, they all have a source button that allows you to add or edit the source code. While you can’t edit Divhunt source code, you can add your own through the embed element. Which is handy for creating custom HTML blocks or elements, without having to make a plugin.
Here is a list of more things you could try and copy, you just got to google to find stuff.
I got confused again.
I know you can do all that, which is exactly what I’m doing.
What happened is that when I add the code it looks different than it looks like on codepen for example as I have shown in the previous example, the page doesn’t look right.
What is the codepen you are trying to implement and I’ll attempt to implement it, and see if it gives me any trouble. Can I get a codepen link, so I can see the code and visually what you are trying to produce.
I think I realize what Pakic was reffering to, and what you need to do. Your including an external js library in the embed element itself, put <script src="https://cdn.tailwindcss.com"></script> in the Custom Code area, and then put the HTML structure inside the embed.
I just did, you can see the result:
Again, as I said before, this is a big distraction from what I asked initially.
Seems to have nothing to do with embedding code in the Custom Code section.
If it’s not clear, it changed nothing.
I’m not sure what I’m looking for, I don’t see, nor did I see before any CSS creeping into your page. Nor did you provide the codepen examlple you mentioned so that I can see how its supposed to look vs how it does. All I see is a link to a webpage you included that really don’t have much on it, and none of the links work, basically all I see is what looks like a page under development. I don’t even know what part of it is your embed. I don’t know what your expecting vs what you are getting. I ran the code you provided in an embed element, and I didn’t get any css creep issues, this is what it produced, it looks nothing like whats on the webpage you provided, given the images are broke because the code you provided had path to non existent images. Is this how you were expecting it to look?
This is a new example, and the entire code is an embed. The entire page is just an embed.
So there should be no confusion there, and here’s the codepen:
But I don’t see the point, I’m pretty sure this is CSS creeping into the embed, just wanted to know how to prevent it.
Not sure why you guys treating this as if it is an isolated case, it happens with all code on all pages, CSS always breaks it up.
Okay, I figured it out now when comparing codepen and dh embed.
On our website we have some CSS property applied for breaking spaces, so basically reason for this is to allow users using enter (new line) in paragraphs and generaly text across website, but I guess this is not good for embeds, since your embed has a lot blank lines and it is causing this. I will set this property to not work inside of embeds, for now I just minified your HTML, and as well I changed body background and color to almost match what you have on codepen.
-
Why did you change the background? Was minification not enough?
-
How do I undo the changes you made? I don’t like when people change my website and I don’t know what happened. Makes me learn nothing and I will just stumble upon the issue again.
In the end I’m still confused.
Will your new change fix it or not?
I have reverted background change.
Your global body tag is set color to be white, and background to be dark, in this cause causing your website to be ugly in my opinion, while on codepen by default body background is white and color is white.
When we fix this in divhunt, this will not happen anymore in future, even if your code is not minified, but we will not push this fix to production today, so for now, only way is to minify your code.
Alright, when will it be pushed so we can test?
And of course it’s ugly. But that’s beyond the point, the css and other options are creeping inside of the embed, that’s the only issue. Not sure why you even added such a comment.
But anyway, I’ll be waiting.
I wanna request a feature update to add laughing emoji’s to post in threads, cause I’m over here dying right now. David, I’m glad he got it figured out for you.
My feature request is a tipping feature so you can throw us coins as we provide you with endless entertainment =D