Home>Support>Placing a (red) transparent rectangle (square) over an Hero image containing text

Placing a (red) transparent rectangle (square) over an Hero image containing text

By Ramon Kooij, 7 years ago. Last reply by Alex S, 7 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi there,

I’m using the SiteOrigin Unwind template and I like to place an transparent (red) rectangle (square) below a text above an image (within the Hero frame widget). Should I use a CSS code for a certain row after naming the row?

Sample below.

Thanks in advance!

http://denieuwe.bosscherverbeek.nl/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-14.28.09-copy.jpg

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Ramon,

    I’d like to help you with this, but unfortunately, this is beyond the scope of the support we’re able to offer on our free forums. There is a fair amount of custom work involved.

    We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.

    If you’d prefer not to upgrade to SiteOrigin Premium, then you can hire a WordPress developer from Codeable. They’ll charge you an hourly rate for any work done.

  2. 7 years, 7 months ago Ramon Kooij

    Hi Alex,

    Hmmm, thats odd. I’m logged in as a Premium Member and I even emailed you last week about my Premium Business Licence not working which you replied on (december 6).

    What should I do to login Premium?

  3. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Ramon,

    We unable to offer premium support over the forums. Can you please email Premium Support directly? Sorry about this!

    Can you please link me to the page you’re currently working on so I can get a better idea of your current setup? Ideally, you should set the hero widget in exactly the way you want it (minus the box) so that’ll allow me to write the CSS exactly as desired.

  4. 7 years, 7 months ago Ramon Kooij

    Hi Alex,

    Thanks for your quick reply.

    So there is a difference between premium support for the forums and premium support for the SiteOrigin Widgets and other tools?

    Thank you for your input concerning the CSS.
    Website I’m working on is: http://www.denieuwe.bosscherverbeek.nl <http://www.denieuwe.bosscherverbeek.nl/&gt;
    And it’s about the 2 images with the text floating over it.

    Hope to hear from you!

  5. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Ramon,

    Not exactly, no. We’re not able to reliably offer premium support over the forums so we strongly recommend all premium users email us rather than post on the forums as we can’t provide the same timely support over the forums. Please note that all posts to the forums are public.

    Thanks. Please note that I can’t access the www version of the linked website – I would bring this up with your hosting provider.

    Please open the relevant hero widgets and head over to the widget styles sidebar. Open the Attribute settings group and set the Widget Class to hero-box and save.

    Please add the following CSS to WP AdminAppearanceCustom CSS:

    .hero-box .sow-slider-image-wrapper {
	background: rgba(255,0,0,.4);
	width: 45%;
	margin: 25vmin auto 0;
	padding: 0 !important;
	min-height: 25vmin;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

    How does that look? This will require follow up CSS so it the results may honestly look pretty bad at this stage.

    You might also need to install the SiteOrigin CSS Editor.

  6. 7 years, 6 months ago Ramon Kooij

    Hi Alex S / support,

    First of all the very best wishes for 2018.

    I used the CSS style you sent like below with a little tweak (color .6 and width 30%). This is the exact effect I was looking for. Background image containing text with an transparent rectangle underneath the text. Thanks for this.
    But now the background image itself is much shorter as it was before. So my question is; how to get the parallax background image height back to it’s original size again so the transparent red rectangle will remain centered.
    http://denieuwe.bosscherverbeek.nl <http://denieuwe.bosscherverbeek.nl/&gt;

    Hope to hear from you soon.

  7. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi Ramon,

    Sorry for the delay.

    Please adjust the provided CSS and remove the following:

    padding: 0 !important;

    How does that look? If that doesn’t work, can you please send me a screenshot of what how it’s meant to look?
    Please note that you’ll need to upload the image to a third party image hosting site like Imgur or vgy.me.

    By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Page: Dashboard (please refer to the support tab). Please reference this thread and include your SiteOrigin order key in the email.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More