New Bric - Card Designer

Hi Whittfield,
thanx for the fast response. Yes, I’m aware of that. I would love to have a bit more control.
I was using the hovercard preset and went from there. The thing is, my dream scenario would be the following:

  1. image in the card without mouseover would have no gradient or dim effect at all
  2. with mouseover a dim color or gradient would take effect and one should be able to control color or/and the gradient and opacity
  3. since I don’t want any text on the picture before mouseover (in my case the pictures are film posters - they have text on em already), I don’t use topline and title,
    but I use the description (credit infos) because that’s the part, that only appear during mouseover. I also would love to be able to control how far it moves into the picture, but may be that’s just a matter of the addition of some linebreak tags at the end. (HTML and CSS are not complete foreign languages to me, I’ve got a basic understanding)
    Thank you for your support and sorry fo my germish english :wink:

okay got it.

I think Maybe you might be describing is more like the [Image Overlay Bric] from Cazoobi (Image Overlay | Blocs Store). With some adjustments as you mentioned maybe that’s the better way to go for your exact use case.

Here’s a follow up…

Card Designer is governed by the 2 priorities.

  1. Responsiveness
  2. Hovercard feature “Peek and reveal”

That’s the product, but I can see where your use case could fit in. But it’s so much better for Blocs users if I’m not doubling efforts on these things. I hope that the image bric makes sense for you, if not I would consider a future update as long as I can achieve it without structural changes to the HTML.

Thank you Whittfield,

I see… I will give Image Overlay a try. I was hoping my scenario would also make sense for others and widen the user base for your bric, cause I thought “peak and reveal” without the “peek”-part would be an easy one. Anyway I understand your point of view. Let’s see what I can achieve.
Cheers

Hi @Whittfield - I am LOVING card designer from playing with this today and it opens for the doors for so many things and loads of ways to customise in the side bar !

The only questions I have so far are on the Button:

1: Is there a way to bring in my styled button that I have throughout the website?
2: If option 1 is not an option, can I make the button slightly bigger?

Thanks - this is one hell of a great Bric.

1 Like

Thanks buddy,

I mostly advise if you are using hovercard feature, to use the sidebar settings to style the button. If you aren’t you can probably do it, but I have to test that things will override.

Also the button’s size actually increases a bit when you check the “bump” font-size option. If that’s not good still, I’ll have to add it as a feature request unless…

Just a note. Card Designer is unique in that most cards have a minimum width so they don’t require responsiveness in such a narrow column as I am allowing with CD. So I had to measure things as you build to know what to do when the content you provide gets to a specific size.

1 Like

Hi Whittfield,

I d like to link a modal (pop-up) to the button in card designer. Seems it’s not possible at this time or missed something :thinking: . Do you plan to develop this function ?

Yes, modals are supported, however there is an update coming very soon which improves usability of this feature. It’s in final stages of testing and will be out this week.

Screen Shot 2021-01-18 at 8.23.09 AM

6 Likes

Great news
Thanks :pray:

@Whittfield, where can we get a complete list Custom Classes that can be use for Card Designer?

That is something I’m thinking of since I started with Blocs (recently). But not just for this Bric. To see used classes in brics and blocs would be more intuitive than doing back and forth with preview (or browser) and inspector :slight_smile:

Even though the custom classes for card designer are available I highly recommend you don’t play with them.

Here are some notes from my conversation with @KBConcepts.

First thing I would do is make sure you have the latest version installed. It’s at we’re at 1.4.9 now. If you don’t have latest version it’s not your fault. It was only a soft release, meaning I have not announced it yet, but you can download it now if you wish.

Now let’s get started,

Classes

I can’t promise you won’t override a class that is best overridden in the bric UI. I don’t anticipate any real issues, but I do prioritize the brics settings over any other method of styling.

Hopefully that didn’t scare ya! I just need to be clear about the projects expectations.

So here goes, doing an inspection of the page we see the HTML and the class names assigned to the elements. If you’re trying to override these you you’ll want to be a bit overly-specific with your classes.

.cd-title a {}
.cd-tagline {}
.cd-caption {}
.cd-button {}

I assume you are familiar with making classes in Blocs Class Manager. There’s documentation for that on Blocs website if you need it.

More on Styles

By changing styles outside of the Card Designer UI, you will lose the logic that is performed behind-the-scenes. This logic is applied when you change things like font size, or when responsive Title settings are used and more. Also, not all styles are classes. some require inlines overrides. Truthfully, Card Designer is a bit more complex than many people realize.

Card Designer is powerful, but at it’s heart is really the hoverable multi-line text and linkable card design. To make that happen is more specialized than you might think under the conditions that it has to work! Remember Card Designer is overwriting the defaults that Bootstrap/Blocs imposes as well!

Something to try

  • When trying to use the Class Manager try starting fresh and don’t touch the Card Designer settings other than typing you content. DOn’t use the presets! Not sure how much it will help but it’s worth a try.
  • If you were hand-coding .css there’s things you can do to help override the settings in your hand-written code.
3 Likes

Hi Whiifield, where can I download the updates? I got 1.4.7. At the blocs store I see a newer version (1.4.9) but I cant find how to update. not in the gumstore or with the extension manager.

Thanks for your help

Hi armando,

The best way is log into your Gumroad.com account using the same email address as your purchase. If you have never logged in, use the reset password feature to create a new password. When logged in, you’ll have access to all the latest versions of your purchases.

Once an extension has been updated, the next time you open a project that contains an older version of that extension, Blocs will notify you and give you the opportunity to quickly update each individual instance of the extension to the new version.

Why not this way, would be the easiest way?

There’s a small chance that someone will open an old project and be forced to reset their Cards. It’s not a big issue, but of course the one person that has to reset their cards will always speak out loudest. So I think in the near future until a smarter way to reset Cards is established, this seems safer to have people upgrade at their convenience.

I am working on a proposal to suggest a Blocs-side solution to this, but it’s all a theory for now. I’d like to see the settings saved to a file for recalling upon bric resets.

2 Likes

That sounds like a great idea. + 1 from me.

2 Likes

I’m certain we need the ability to reset different parts of the bric right away. End-users and devs.

  • Reset Bric JS only. Do not touch HTML (with .js includes)
  • Reset Bric JS + HTML
  • Reset Bric CSS

and then a log file on top of that with some options.

1 Like

I like that idea, not only great for users, but Dev time will be so much quicker, especially if we can just refresh the .js includes and / or update HTML. :wink:

1 Like