Custom CSS and Blocs render

I Need Help
1

Hi,

Total newbie here coming from RW/Stacks and LOVING Blocs so far! Great job!

Question, please:

I make a new project/page and add a carousel. I want the images in the carousel to be 100% wide but only 325px high.
As there appears to be no way to define the height of the image in the UI, I did the following ( and I want this to work as a general concept, not just in this situation…)…

I grabbed the CSS element id for the slide image. Created a ‘custom.css’ file in the project folder and added the styling I need for the images into that custom.css. I then attached the custom.css in the ‘Header File Attachments’ in the page settings UI.

The result is that the custom CSS I need IS being applied when previewed in the browser - but not in the Blocs UI. So the images are still overflowing their containers and messing up the UI/Blocs preview.

I can see from the source html in the browser preview that the custom.css is (obviously) being applied… so the question is how to get the Blocs UI to take that custom css file into consideration in its render? The expectation here is, I suppose, that if in the page settings I have specified a CSS file in the header, then I would want that CSS file to be applied to the page both in the UI and in the resultant export/preview in browser operations. Does that seem unreasonable?

The ability to smash Bootstrap elements together quickly in Blocs but still style them the way I need in either custom classes or an external (but still UI incorporated ) stylesheet is essential to my workflow.

Question 2 (if thats not too cheeky!) - can we please, please define custom CSS classes with code too?

Thanks!
Stuart

1 Like
2

Hi Stuart,

Check out the Class Manager and the ID and Classes section at the top of each Bric panel - http://d.pr/i/fP19. Also make sure you have the latest Beta (not sure if that’s all in 2.2 but it is in 2.3b).

3

Thanks @webdeersign

I’m using the beta now - thank you!

Looking at your screenshot it looks as though you are able to select the image element from the carousel and style it. Thats exactly what I can’t seem to figure out how to do.

I’m using the class manager to apply a ‘.height-325’ class to the bloc, the row and the carousel. Needless to say the class just asserts 100% width but a min and max height of 325px. Yet, when I select an image (slide) for the carousel it immediately bursts out of those containers :frowning: Now, if I could select the slide image and apply the same class, I think that would do it. But I cannot see how to select and apply any classes to the image (slide) itself in the UI.

I must be missing something simple?

How did you select the image element from the carousel? If I can select it, I presume (and based on your screenshot), I can apply custom classes to it.

Thanks!

4

In my example I just added an image Bric to a Bloc as an example of the ID settings. In the case of a Carousel I don’t know, but may be able to have a look later on today.

5

Thanks, but to be honest I don’t think that the slide element in the carousel is selectable.
The custom CSS file still executes in the browser, but it is not applied in the Blocs UI. I get the feeling that:-

a) Having a custom CSS file applied in the Blocs UI
b) Allowing custom CSS classes to be defined as code

Is not going to be trivial.

I can see the custom classes being wrapped into the styles.css of the generated files, though.

Ideally I would love to see the custom classes allow you to define your own CSS in code and for that to be applied there and then in the UI. That would, IMHO, make Blocs unbeatable.