How do I alter an email Feature Box

Community Forums Forums Design Tips and Tricks How do I alter an email Feature Box

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Bill Murray 1 year, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #41309

    laura
    Participant
    Post count: 69

    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
    #41313

    Bill Murray
    Participant
    Post count: 575

    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.

    #41315

    laura
    Participant
    Post count: 69

    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

    #41323

    laura
    Participant
    Post count: 69

    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

    #41325

    laura
    Participant
    Post count: 69

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

    #41376

    Bill Murray
    Participant
    Post count: 575

    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:

    some textHi 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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.