Coming Soon: Card Designer

Thank you, it’s awesome you’re onboard. I’m glad you are onboard!

What other brics do you have installed? I’ll look for potential conflicts maybe.

Bought it and love it!! Awesome!! Thanks!!

1 Like

Purchased just now and I think I’ll have to go through the manual carefully to see all the options, but I think this will see a lot of use in future projects. It’s a nice touch including the feedback display and something that would be good to see on other brics.

1 Like

Glad to hear it @Flashman,
and thanks for mentioning the feedback feature! :grinning:

documentation
Q. What is the feedback feature?
A. When activated, the feedback feature informs how the options you select are affecting other settings, and things like browser compatibility.

2 Likes

Card Designer is now available in the Blocs Store!

4 Likes

Just bought it and I’m in the process of testing it out.

First problem I have found is that I cannot change the TITLE size or COLOR, it is always WHITE and a fixed size. I’ll have to test it in an empty project to see if there is something in my project that is impacting the display of the title. Changing the title size does adjust the line height but the title does not change at all!

Hi @handshaper,

What version of Blocs are you using? Card Designer requires version is 3.3 or greater.

Next, assuming your version is 3.3, it sounds like there’s a class overriding the H2 element on that bloc or page. Is this happening with an existing project? Does it happen in a new project?

Yes, I am running 3.3 and the project I’m using does customize the H2 properties for the project for my site.

When I tested card designer in a blank project there was no problem with the title.

So what I need to know is how I can change the behavior just for card designer because I cannot change the global settings I have setup for the header as it would impact a lot of pages on my site that is already 90% complete.

Right now you’ll need to convert those globals to custom classes that you can apply more selectively.

As far as I know, both native and custom brics get overridden when you use globals. The difference is that you are probably adding classes for any H2 elements that you want to treat as custom, if you have any at all that you’ve bothered to overwrite.

With Card Designer you have much more control than a list of classes would give you, but you are susceptible to global overrides as any other bric would be.

Ultimately I think the only way around this at the moment would be changing the H2 element in Card Designer, but that would affect the SEO value of the card, and we don’t want that. So for now this is how things behave.

Perhaps if blocs global setting never affected custom brics or better yet made it optional, that would be best. Brics are about customizing things and the globals should probably not be applied unilaterally in this case.

YES! This would be nice…I run into this with custom class navigation links, even when using NONE for the source, as the Global setting still gets in the way.

2 Likes

Yes, this is one of the things that REALLY annoys me about Blocs and in fact is the one thing that I warn people off about it. For some reason I don’t understand why it does not follow a real object-oriented programming model with these classes

To me the classes created in the project settings should be treated like a BASE (or SUPER) class, then any sub-classing that is done down the line takes precedence and only falls back to the base class when needed.

But that is clearly not how Blocs (Bootstrap) works and it is very counter intuitive as it almost impossible to understand what the hierarchy is so that one can understand where is the most appropriate place to make changes. I find it all very frustrating! After being an object oriented programmer for over 20 years I’m all at sea trying to understand the model used by Blocs. What seems the most natural to me never works out, which results in hours of wasted time.

I digress!

For me it will not work for me to go and strip these class changes out of the project settings as there would be way to many places that I would then have to go back and insert classes.

So the best bet for me is going to be to save Card Designer for a different project, bummer!

2 Likes

Wahoo thats great to see!

1 Like

Hi @handshaper,

It’s really the nature of CSS and nothing to do with Blocs dev pattern at all.
And you are not alone in your feelings about the CSS’s global scope. It’s been a thing since css first landed and has frustrated many a traditional developer.:wink:

Following this topic can get really amusing… Here are some others thoughts on the topic…

https://twitter.com/thomasfuchs/status/493790680397803521

https://twitter.com/ppk/status/1067879376673533952

The thing is that CSS classes aren’t the same as classes a programming language like php. Everything is always global. Specificity is what determines hierarchy for the most part.

Norm would have to chime in on what’s possible in Blocs, but I actually don’t think there’s a lot that can be done at the element level. Possibly at the page level we could turn off globals. That would provide a little wiggle room for folks in your situation. hmm… I kinda like that Idea actually!

Hi Whittfield,

can you tell me how you made that nice Navbar on your website? When i scroll down here: https://blochead.dev/ the navbar ist getting smaller an hav a shadow. How do you made this?

THX

It’s reducing the top and bottom padding of the container element to 0 when the “sticky” class gets applied.
Here’s a general way to do it.

Step 1.
While the nav bloc is selected, in the sidebar, check the option to make it “sticky”. (The class “.sticky” gets applied whenever the page scroll leaves top of the page)

Step 2.
Next, add the css snippet below to the entire site. It’s a small snippet so you might simply add it to the project header in Blocs.

.sticky-nav >.container {transition: padding .6s ease;}
.sticky-nav.sticky > .container {padding: 0px 50px; transition: padding .6s ease;}

  1. In Blocs menu choose Window —> Code Editor
  2. When the code editor window launches, choose “Project - Header” from the dropdown field.
  3. Add the following css wrapped in <style></style> tags.
1 Like

Thank you so much for your advice/help. And thank you for the nice Card Designer Bric. Bought it this week an love it :heart:

1 Like

I’ve been crazy busy and just trying this for the first time with a supposedly simple set up, including two images that are both set to pan left with a Ken Burns effect. On Firefox or Chrome it works, but in Blocs or Safari it’s just like a normal slide transition with no panning effect. This doesn’t seem right.

The panning effect works on my Android, however the horizontal images are heavily cropped to appear vertical when viewed in portrait mode with no responsive adjustment it seems.

Hi @Flashman,

I’m seeing this now and I can help with the understandings a bit. But I need some time to get it all down for you. I’ll post back here after I sort through what you are after.

There are some things that I was pretty sure folks would wonder about, so I look forward to walking through this post and explaining how and why things happen as they do. :slightly_smiling_face:

Thank you, that should be helpful to everybody. I’ve tried half a dozen variations and nothing has so far worked as I imagined. It might actually be useful if there were demo web pages, showing options and results. My first test was using landscape images that were 600x400px.

I played around a little bit and also reduced the height of my logo image. I’ve added that code:

.sticky a.navbar-brand img {transition: padding .6s ease; height: 30px !important; transition: height .6s ease;}

That looks very nice, when the logo image get shrinked :slightly_smiling_face:

1 Like