How do I alter an email Feature Box

[laura]

Hi

I have created a Feature Box using Brian Gardner's guidelines.  YOu can see it here: http://www.momgoesonline.com.

I would like to make three changes:

1) How do I wrap the header so it stays within the left half of the box? (I want to add a picture on the right half)

2) How to I add a picture to the right half?

3) How to I make the subbox ('Enter email') smaller?

Cheers

Laura

http://www.momgoesonline.com

[Bill Murray]

1. Modify your child theme's stylesheet for .feature-box h4 near line 696 to include width: 65%;

2. Several possible ways. One way is to set a background on the .feature-box that includes the image, and position it where you want it. Second way would be to include the image in your content at the beginning (ie, where you "Here's how Mom Goes Online ...") and give it a CSS class, such as .myimage; then you'd add styling for .feature-box .enews p and float that left and .feature-box .enews .myimage and float that right;

3. For .feature-box .enews #subbox near line 728 of your child theme's stylesheet, add a width, similar to width: 300px;

Mom, let me introduce you to Firebug.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[laura]

Hi Bill

 

Thank you so much - I'll try the changes later once I have a quiet moment 🙂

PS - I know about Firebug... but I don't know css, so I have no idea what commands I need to use to get what I want - so thanks for sharing the commands 🙂

Laura

[laura]

Hi Bill

I implemented your suggestions, and 1 and 3 worked perfectly (thank you!!!).

However I have no idea how to do 2 (add the image).

1) If I create it as a background, will it still be mobile responsive?

2) I don't think it is possible to add the image to the content, as I am using the extended eNews plugin.

Is there a way to add a picture in there and still keep the Feature Box mobile responsive?

Again, thank you so much for your help (know I know the 'width' command in css 😉 )

Laura

[laura]

Just had a thought: I could create the background, and then in the mobile responsive section make the background white again... would that work?

[Bill Murray]

1. Give the CSS or CSS3 link in the left sidebar a spin, http://www.w3schools.com/. You can also try Google with whatever words come to your mind. If you read and learn, over time your word guesses will get better.

2. This is a little more complicated. It's one of those things that one might try, get wrong, and have to repeat. It's hard to give you many specifics without an image on your site, so you should upload one and include it as a background on a nearby ID. It should be a good guess as to size, but the image can be a black box. At this stage, you're just trying to get the size you want and learn how to position it. The background method is easier, but makes it harder to change the image. The other method is more complicated from a CSS perspective, but makes it easier to change the image.

2a. I haven't tried the method of adding an image to eNews Extended, but conceptually you would do something like this in the text box for content before the form:

Hi there, here is my my signup form! Rain your signups down upon me!

2b. You want mobile responsive too? Can you change the name of your site to Mom Gets Ambitious? Yes, you'll have to adjust the mobile responsive CSS. My recommendation is to work out the change in your normal site CSS, and then tackle the mobile CSS 1 media query at a time. You may have to come up with images of different sizes for different media queries, so when you name your first image, keep that in mind and make the name indicate which site width it serves.

Yes, your final thought would work, but that is just a simpler variation of changing the image itself in the media query. Note the notion of changing things in the media query would be very difficult unless you stick to putting the image there via a background. If you opt for putting the image in the content directly, you'll have to choose an image that is small enough for your smallest supported device in your media queries.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Author]

Posts