How to Center Non-Text Content in a Block?
Permalink
Greetings All,
I built dozens of sites under the Legacy versions of Concrete. Working on my first under 8.5.5. WOW, a lot of differences!
The first problem I've run into is under the legacy version, if I added a button or image or non-text content to a block and I wanted that button/image, etc centered in the block I could do that under the Design - Fonts - Alignment. If I set to Center - it would center all the content.
How the heck do I center a button/image,etc within a block under 8.5.5? I have tried adding padding to the left but obviously that doesn't work when the viewport changes.
For instance, in the attached image, this is a sidebar block that contains a button. How can I make sure that button is centered in the block regardless of viewport size? The block for the Button/Modal does not have any option for alignment.
Thanks in advance,
UPDATE: This is probably not the right way to do this, but I went into the packages/theme name/blocks/the block in question/view.php and added an extra DIV tag for center. That did the trick - but obviously it will apply to every instance of that block.
I have looked and looked for instructions on how/where to create a custom block so when I go to the Design section of a block there is more than the Default template available. I tried from a few posts - but it doesn't work.
I built dozens of sites under the Legacy versions of Concrete. Working on my first under 8.5.5. WOW, a lot of differences!
The first problem I've run into is under the legacy version, if I added a button or image or non-text content to a block and I wanted that button/image, etc centered in the block I could do that under the Design - Fonts - Alignment. If I set to Center - it would center all the content.
How the heck do I center a button/image,etc within a block under 8.5.5? I have tried adding padding to the left but obviously that doesn't work when the viewport changes.
For instance, in the attached image, this is a sidebar block that contains a button. How can I make sure that button is centered in the block regardless of viewport size? The block for the Button/Modal does not have any option for alignment.
Thanks in advance,
UPDATE: This is probably not the right way to do this, but I went into the packages/theme name/blocks/the block in question/view.php and added an extra DIV tag for center. That did the trick - but obviously it will apply to every instance of that block.
I have looked and looked for instructions on how/where to create a custom block so when I go to the Design section of a block there is more than the Default template available. I tried from a few posts - but it doesn't work.
Your best bet would be to create a custom template so you don't mess with the base code of the block. Copy said view.php to /application/blocks/the block in question/templates/template_name.php. Make your modifications to that file and apply the template to the blocks in edit mode!
If you work with the Elemental Theme, try adding the following lines in the "custom css" box at the bottom of the customizer:
then in the block template, add the class "element-centered"
.element-centered { display: flex; justify-content: center; }
then in the block template, add the class "element-centered"
Thank you both for responding. I'll play around with your suggestions and see what works best. Giant learning curve going from Legacy to v.8.
