• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How do I alter an email Feature Box

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: feature box, magazine

  • This topic has 5 replies, 2 voices, and was last updated 9 years ago by Bill Murray.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 16, 2013 at 9:51 pm #41309
    laura
    Member

    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
    May 16, 2013 at 10:42 pm #41313
    Bill Murray
    Member

    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.

    May 16, 2013 at 10:54 pm #41315
    laura
    Member

    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

    May 17, 2013 at 2:00 am #41323
    laura
    Member

    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

    May 17, 2013 at 2:07 am #41325
    laura
    Member

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

    May 17, 2013 at 8:50 am #41376
    Bill Murray
    Member

    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.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble