May 16, 2013 at 9:51 pm #41309
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?
Laurahttp://www.momgoesonline.comMay 16, 2013 at 10:42 pm #41313
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.
May 16, 2013 at 10:54 pm #41315
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 🙂
LauraMay 17, 2013 at 2:00 am #41323
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 😉 )
LauraMay 17, 2013 at 2:07 am #41325
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
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.
You must be logged in to reply to this topic.