Add Image ontop of Enews Widget – Sidebar

[nabaleka]

Hello, this is my first post in this forum, please check the Social Triggers blog, You will see on the right sidebar there is a subscription form with his image on top. I would like to add that to my Genesis Enews Extended wiglet too.

I have managed the following code found it online but it is just placing the image in the background.

.sidebar .enews-widget {
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	background: #333;
        background-image: url(/wp-content/uploads/2015/05/image-back.jpg);
	background-position: center, top;
	background-repeat: no-repeat;
	border: 3px solid #fff;
	border-radius: 10px;
	box-shadow: 0 0 5px #999;
	margin-top: 40px;
	padding: 25px;
	width: 100%;
}

Would someone help me please. Thanks

[Marcy]

Can you post a link to your site, so we can how it's working?

I would try using : before, something like this, but I would also add a height: for the image or min-height:

.sidebar .enews-widget:before {
	background: #333;
        background-image: url(/wp-content/uploads/2015/05/image-back.jpg);
	background-position: center, top;
	background-repeat: no-repeat;
	border: 3px solid #fff;
	border-radius: 10px;
	box-shadow: 0 0 5px #999;
	margin-top: 40px;
	padding: 25px;
	width: 100%;
}

---

Marcy | Amethyst Website Design | Twitter

[nabaleka]

Thanks Marcy for the help, I have added :before and this is how it appears (check the link: http://www.workonlinekenya.com/iwriter-review/)

the ideal look should look like (http://socialtriggers.com/email-signup-forms-build-list/) the right signup form widget.

[Marcy]

There is no image code on your .enews widget on that page.

---

Marcy | Amethyst Website Design | Twitter

[nabaleka]

I had removed the code, now I have it back

[Marcy]

Try this
.sidebar .enews-widget:before {
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
background: #333;
background-image: url(/wp-content/uploads/2015/05/leadgenforsheeroh.jpg);
background-position: contain;
background-repeat: no-repeat;
border: 3px solid #fff;
border-radius: 10px;
box-shadow: 0 0 5px #999;
display: block;
margin: 0 auto 20px auto;
width: 100%;
min-height: 370px;
}

---

Marcy | Amethyst Website Design | Twitter

[nabaleka]

Amazing, it now displays well, thanks a lot Marcy, I have been struggling with this for sometime.
Is it possible to have the image display outside the box, like http://socialtriggers.com/email-signup-forms-build-list/ instead of the way it is now.

[Marcy]

You can also add the image directly to the enews widget and not use background image.
Use this in the "Text before Form"

<img src="/wp-content/uploads/2015/05/leadgenforsheeroh.jpg">
Join Work Online Kenya by submitting your details to receive Updates.

If you want it before the widget title, then don't use a widget title and use this instead:

<img src="/wp-content/uploads/2015/05/leadgenforsheeroh.jpg">

<h4 class="widget-title widgettitle">SUBSCRIBE FOR UPDATES</h4>
Join Work Online Kenya by submitting your details to receive Updates.

---

Marcy | Amethyst Website Design | Twitter

[Marcy]

For before, you would need to use
#enews-ext-2:before
instead of
.sidebar .enews-widget:before

---

Marcy | Amethyst Website Design | Twitter

[nabaleka]

Great this works `<img src="/wp-content/uploads/2015/05/leadgenforsheeroh.jpg">
Join Work Online Kenya by submitting your details to receive Updates.`

but when I use the second code on the title it does not work.

How about changing the background color to white instead of the dark image? will that be effective

[nabaleka]

There is no change when I use this

#enews-ext-2:before
instead of
.sidebar .enews-widget:before

[Author]

Posts