Hero Image – Semi Transparent Text Box & Other Custom Content

Hi Everyone,

I’ve recently installed the ‘North’ Theme, and am trying to create text elements that can be manipulated to the design style. I’m using the SO Hero widget.

Firstly, I wish to create a semi-opaque background for text so that the words do not get washed out amongst the BG image. I would also like that box to have a 1px border. The best forum answer from the wonderful SO staff that I can find is found here:

Hero Image – Text Box (Semi-transparent background)

But…… my hero image is not on my home page, so what do I replace <div class="homepage-cta_box”>CONTENT HERE with? I’m pretty vague with CSS so apologies if this is a CSS101 question.

I would also like another hero image, where the overlaid text comprises 2 lists that are responsive (ie; where list 2 drops below list 1 on a mobile device). In a regular page builder I would achieve this in a row as follows

|cell 1 25% – empty|cell 2 25% – content|cell 3 25% – content|cell 4 25% – empty|

However the ‘frame’ section in the Hero bilder doesn’t seem to intuitively allow the same flexibility as a regular builder. Amy tips?