Forum Academy Marketplace Showcase Pricing Features

CSS from Codepen

I am hoping somebody could help me understand how to use the css and other code found on codepen to produce some different effects. I’ve tried to load the code from codepen but really have absolutely no idea what I am doing, so obviously having zero success.

I basically want to create a ribbon like the green breakfast included ribbon

Screen Shot 2019-12-10 at 9.24.41 PM

I found a link to codepen

https://codepen.io/nxworld/pen/oLdoWb?cf_chl_jschl_tk=0af4583380b3c2dd7ff9fb753bf630bc8dfe54a5-1575987930-0-Ac1JR1ZTOnlbghblMQ9uBCgOIOtsUdyyElJ9jCAVXYH-a20OVQgzLWa8kQ6WGFQOVR21ctTG8ope9UXhDfbChF_Ifr38Z0lcpGKnZ3xjj8Qa2c-Sg8uIeFzppzExJ71s6OfngIzYZbL7cLOsUjnB1b_lof9h_F7jUoplT7JP4B4YxEQNW9NcN-5XIZcz8AXLahq7LoNPrPtYeemFgpEyycqT0sHWVHF5sMFDva_aX7YL2Wd3Nyy1kHog_gzaop1E0t8co_DcxC3-9whZB1f6FBIQQeMRMEcVy3cIWRRtnTf04Ngs2pdeAclvluIcO1pZxyk_zzHYZOdtWGXj8R2ZScbl3xNhtRpao38vEGi7CDNg

But for the life of me I have no idea what to do to get it to work. Any help, suggestions, examples or links to other posts that could help would be much appreciated.

1 Like

Minimal knowledge of HTML and CSS is required for, well… HTML and CSS

I took the Codepen example you provided, removed the .body { ... } to prevent conflicts with you Bubble page and added the CSS content in style attributes. All this in an HTML element in the editor and it seems to work perfectly:

Tried to copy/paste the code here but that stupid forum engine breaks the formatting and remove the HTML…

3 Likes

Thanks @julienallard1

The idea of using the at the top of the css portion was what I was missing.

I appreciate the help and push in the direction. Now I can spend some time playing around with things to see if I can get it to work as I would like to.

By the way, does the code you use have the at the very bottom of it after the CSS? Currently I only have the at the top and on page preview it looks fine.

Just wondering how necessary the “closing” is.

Do you have the editor example. This looks awesome

@julienallard1

Thanks a lot for the help…I was able to make some changes and I got a decent hold on things now.

Screen Shot 2019-12-11 at 2.51.17 PM

Will need to spend a bit more time to get everything as I would like but, you definitely helped to get me on the right path.

Cheers

This may be of some help to you @nocodeventure

Basically I took out the other three banners to leave only the top left one. It is an html element. Then I created a group element…put the html element inside it at X=0 Y=0 and have the html “bring to front”

I also put an image element into the group to “wrap” the banner around.

Probably not the most sophisticated way, but I had issues with getting all the dynamic data I needed into the html element…so I opted for this simpler approach.

1 Like

One thing I am having a bit of an issue with is getting the “wrap around” effect to display correctly on all banners ( either top left or bottom right etc )

On the bottom right everything is shown correctly

Screen Shot 2019-12-11 at 3.12.14 PM

Notice the blue part that shows the “wrap around” effect…it is not present on the top left

Screen Shot 2019-12-11 at 3.13.29 PM

Which has to be something with the positioning of the “box” in the code…I think because I deleted the box from the code

@nocodeventure if you find a solution to this please share…

Glad I could help!

I looked at your editor. Since it’s in read-only, I can only suggest changes:
1. Try to change those “-10px” to just "0"
Screen Shot 2019-12-11 at 09.25.43
By removing the .box {...} rule, the HTML div.box went from relative positioning to static (default) which affect how things are displayed. Bringing back the ribbon offset to 0 fixed it on my side.

2. It’s not working, try adding z-index: 5; under position: absolute; and change the “-1” z-index to 4.
Screen Shot 2019-12-11 at 09.26.12
z-index define the layering order what element is above what?? Behind the scene, Bubble uses z-indexes when we click on “Bring to front” or “Send to back”.
The guy who made the codepen made it so it works in its context. Now we’re are in Bubble. I believer the change I’m suggesting will put the ribbon’s back side just above the image and the ribbon itself just above the backside…

2 Likes

Thanks for that. I got it to work.

Screen Shot 2019-12-11 at 10.05.15 PM

The first suggestion seemed to do it

Screen Shot 2019-12-11 at 10.05.35 PM

But for good measure I implemented the second suggestion as well

Screen Shot 2019-12-11 at 10.05.26 PM

I believe it was not necessary to have the z-index change as I saw a difference after changing the negative positioning, but believe the z-index will probably help for ensuring it is always “above” other elements on the page.

Thanks a lot for the help on that. It is much appreciated and opens up a lot of possibilities for me now that I can play around with css from codepen and see what I might be able to do.

Cheers

1 Like

If you keep discovering CSS, you’ll probably fall in love with it and will want to use it more and more in your apps.

This plugin opens doors to CSS as it allows you to apply your own rules on any Bubble elements; not just custom HTML.

1 Like

Thank you. That plugin looks like a powerful tool. I think overall for where I am at with bubble and app development, I am going to play it safe and use as little CSS as I can. Just playing with it today I see it breaking and causing issues, which I’ve heard previously and you mentioned on your plugin post, that bubble’s CSS can / will override custom css at times.

I think I will be playing it safe, but it is great to know the possibilities. Hopefully after a successful launch I could go back to more complex design issues to polish things up.

Thanks again for the help.

This thread is really cool. I appreciate @julienallard1 and @boston85719 teaching us all new stuff!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.