New Image Overlay Bric

This new bric from the Blocs Store is very handy but it is not obvious how to customize it.

Questions:

  1. Can the button be removed if needed?
  2. How to custom size the colors of the button"
  3. Likewise how to customize the colors of the title and description?

Are there classes associated with this bric to allow for these customizations, if so what are they?

Some of these new brics have great potential but they appear to be lacking in settings to better control and customize them. I have tried to buy as many as I could use but so far I have not been able to put one to use because I have no control over the appearance or behavior.

You can find out what classes control the overlay bric by placing an overlay brick on the page and then preview the page. Click on the element and choose inspect element. This gives you the classes needed to adjust the overlay.

These are the three classes needed.

34%20PM

Casey

Aah! I did not know that really appreciate the tip, learn something new everyday about Blocs!

2 Likes

Tried this and I could not see these classes, all I see is a lot of HTML code, what am I missing?

Was able to use the classes you listed to do some customization. But I still could not figure out how to get rid of the BUTTON completely?

That’s what you are supposed to see when using the inspector. In the DIV is the HTML code. Within, is the classes. Now you can see the three classes used.

As far as removing the button: I don’t think you can. But, use the overlay-btn class and remove the color in the background, text, and stroke. Just drag the color sliders to 0. This will make the button transparent.

Casey

@handshaper if you really want to learn more about Blocs go to the new store and click on the tutorials tab. @Eldar has some free classes. They are a great starting point. I highly recommend the Blocs 3 Master Course. It’s well worth every penny and Eldar covers many new features. The videos make a great reference for looking up how to use and customize Blocs.

Yes, I am slowly working my way through Eldar’s course which I got awhile back. It is slow going for me as I’m one of those people that likes to read a manual, I hate going back to a video to try and figure something out.

But I will keep plugging away at it!

Really appreciate your insights and help!

1 Like

The reason I wasn’t seeing the classes was I had not toggled the disclosure triangle, once I did that all became clear.

I tried the idea of setting everything on the button to transparent and that worked perfectly so I now have this bric behaving the way I want.

Once again thanks for the help!

1 Like

One other thing that appears to be missing from the functionality of this bric is the ability to do more with the button. For instance, I would like to be able to have the button trigger a download of a PDF file, this is possible with a regular buttons in Blocs but it is not possible with the button in this bric, why?

I would really like to see some of the options from the standard button available on this button, or better yet, why can’t we simply use the standard button bric instead of the canned one?

This bric has so much potential but it really seems to be held back by the lack of customization. Yes, I know much of this could be done with classes but it would be nice if some of the customizing could simply be performed in the inspector.

1 Like

@handshaper In theory if you link to a url with a PDF hosted on the server that should work for what you want. I just found this post after wondering if there was a way to link the more info button to a modal bric and all the options that could enable, which would be pretty amazing. That button needs interaction options as well.

@Flashman yes, that is the approach I’m going to try, but it just seems that if we have all the different actions for regular buttons that there is no reason we should not have them for these ones. I’ll see how it works, thanks!

I agree entirely. I took it for granted this would allow all the normal interactions and ability to change the button etc. Hopefully an update will provide more functionality.

1 Like

I know this is a dumb question but how do I create a sub-class of the overlay-btn class so that I can selectively show and hide the button, instead of hiding it globally?

Hi @casey1823

just baught the bric and followed your advice here. Thx for that. unfortunatelly i can’t change the background color of the hover state. which class is responsible for that? I tried all options I know. Thx in advance for any hint :call_me_hand:

Add the class
img-overlay-container

Then bring up the class manager and click on the hover state. Blocs will auto add the hover-class. Click on the background tab and add any color you would like for the background. Adjust the opacity of the color to still see the image behind the overlay.

Casey

2 Likes

Anybody knows how to change the active state of the button inside the image overlay bric?
I can style the button with the class “overlay-btn” but never the active state when clicking it, it will remain white.
clickbutton

Hi, @superphilly. Not sure if I follow you correctly but the active state can be set within the class manager. Not sure if a button should have an active state as it should initiate an interaction.

1 Like

I tried it all, changing or changes to the active state of “overlay-btn” makes no effect. I have the feeling there must be some deeper code for the overlay container that there is no easy access.
It works fine for regular blocs project buttons but not for the button on “overlay image bric”
But thank you for your help :slight_smile: