White box container in Cornerstone

Support
#1

I’m trying to implement this layout:

In normal HTML/CSS I’d just add in a DIV container around the image and text, set the background-color to #fff, and control the width and height accordingly.

If I use cornerstone I’m restricted to using just sections, rows, and columns, but if I set the background color of the column to white it’s inappropriately sized, e.g.:

Any tips on implementing the above layout correctly?

#2

Hi There,

Thank you for writing in! The Image element is wrap with a <span> or <a> tag if its a link , so you can still do what you’re doing before with the right CSS selector.
You can easily achieve what you’re trying to do with V2 Image element.

Set a white background to your image.


and put a padding around it. https://image.prntscr.com/image/XwQCCOnLST61IyUrzqzNdQ.png

Hope it helps,
Cheers!

#3

Hi @friech,

Thanks but that doesn’t entirely work.

Notice that the text has to be inside the white block as well. Doing your method produces:

I guess I could leave that bg and then add a white bg to the text element, adjusting the bottom-padding to almost 0.

But in straight HTML it’d just be:

 <div id="container" style="color: #fff">
   <img src="ex.jpg"><br>
   <p>Text</p>
 </div>

No way to do this in Cornerstone? I have to apply white bgs to each element?

#4

Hi There,

Please provide your URL and login credentials so we can take a closer look on your setup.

You should be able to do that with columns or using the PRO Element + a bit of CSS

Thanks!

#5

OK, I added a secure note to my post above.

#6

Hi There,

I’m sorry, I did not notice that there is a text. In that case, please use the PROMO element instead.

Then add a CLASS pam to it. (https://prnt.sc/iapuwq)

And this is to balance out the padding at the bottom and centering the text.

.pam .x-promo-content {
	padding-bottom: 0;
	text-align: center;
}

You can add that to your Page CSS.

Hope that helps,
Cheers!

#7

Yes, the classic PROMO element was able to accomplish this. Thanks.

#8

You’re welcome.

#9

Sorry, one more question. The image needs to be clickable too. Is there a way to add an anchor link via the promo element? The “CONTENT” section only applies to text.

#10

Hi There,

That is possible please follow the guide provided here, you can have multiple CLASS on your element.

e.g.
pam withlink

Hope it helps,
Cheers!

#11

Interesting workaround.

This works, but ideally I’d recommend Theme.Co consider developing an element that doesn’t require jQuery pulling alt text from the DOM – this requires our content editors to update the link URL in 2 different places.

Thanks again though, I think they can live with this.

#12

Hi There,

Thanks for the input, your suggestion has been added to our feature request list.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.