Streaming live at 10am (PST)

Hack for "override default webflow properties" - is this still working?

Hello,
first i apologize for my poor english.
I tried to use “Vincents hack” Style lightbox Right, Left and Close controls to change backround color of w-lightbox-backdrop.
Seems it didnt work for me.
Question is, if it should still work.
Or what are the conditions to make this hack working.

/posting no link, because i solved it by adding custom code to override the CSS property

I was responding to:

Share your project read only link so we can address the part where you say ->

Why locked my topic without explanation and without answer?


I wrote i solved issue another way but still there was a question typed in BOLD font:“Question is, if it should still work.”
So can i get an answer pls?

Sorry about that.

I would be happy to look. Just need something that is “not working” to look at.

Just asked if “hack” described by Vincent should still work.

OK, created new example
https://preview.webflow.com/preview/lightboxbackdrop?utm_medium=preview_link&utm_source=dashboard&utm_content=lightboxbackdrop&preview=954619f3d5ca381bedf62eb6057110d3&mode=preview
folowed Vincents guide :


So i thought when i clik on image in my example, big image should appear on green background. So understood i wrong Vincents guide? I just want to see if the procedure works.

Does not look like it. The div element “w-lightbox-backdrop”

CloudApp

is being written out to the custom site css as;
._w-lightbox-backdrop

CloudApp

I only tested this element. So I don’t know if the others are affected.

Workaround : Add an Embed with a style block and override that element.

CloudApp

CloudApp

Vincent wrote: (quote from link i posted in my first post)
When you want to overcharge a Webflow element that is not accessible for styling, instead of adding custom code to override the CSS property, create a DIV on a draft page and give it the exact same class name that the element you’re targeting has. Then add your own styles and test.
For example, it works well when you want a little bit of control on the Lightbox thumbnails. Use the class name w-lightbox-thumbnail on a dummy DIV and add :hover properties.
Back to the page where your Lightbox is, you should notice your styles override Webflows’ default ones.
Your alterations affect all the page site wide and remain active until the dummy hack element is erased and unused styles are cleaned from the style manager tab.

My question is, if it should work with Webflow elements that is not accessible for styling (for example w-lightbox-backdrop).

@kabe, I did answer the question. Please re-read my previous response.

People can do great things together.
So i am almost sure, we will find clear answer now.

My question:
Works the Vincent s hack with Webflow elements that is not accessible for styling in designer?

Answers:(please select one of the options)
A - yes
B - no
C - I dont know.

My english is poor, but im sure i can understand the difference between A/B/C
Thank you very much.

No is the correct answer.

Why? When you try to use a class name, that is used in the core CSS, Webflow inserts an underscore before the name on publish.

So you try to use w-container and webflow changes it to _w-container.

1 Like

OK.
7777 x Thank You very much!
Thanks :slight_smile: