Homepage Images, Icons and Forms…

[Kat]

Hey there, Bill!

Fabulous theme, thank you! We’re not a restaurant, but I loved your theme so much that thought I would make it would for our dog training business as well. 🙂

I had a bit of trouble initially getting the hang of it, but playing with it and reading through the support threads solved a lot of the issues I was having. Just a few minor things left, that I’ll need your help with. I’m not done transferring all the content from our current website, but it’s really only the home & contact page I’m struggling with (http://karma-k9.com/wp/):

1. First Image on Homepage

The way your Moonrise-Homepage displays, the order is: header > first image > first featured page. For some reason, I can’t get the first image to “stick” to the top and instead our page shows: header > first featured page > first image. Any idea what’s causing that?

2. Horizontal Image-Scaling on Homepage

I’ve played around with different sizes for the images on the homepage and finally ended up with 1600 x 1000, as you suggested in another thread. That works well in terms of resolution. However, is there a way to have the images scale to full width? On most displays I’ve tested it on, it cuts them off on the sides. I’d much rather the images scale down to display in full horizontally, than lose their sides. That would greatly limit the images I can use, b/c If looked at on a smart phone for instance, I’d end up with a cut-off logo or just a piece of grass, rather than the dog that’s in the image (which are relevant parts). Any way to help me with that?

3. Social Icons

Love your social icons, but not being a programming pro, I can’t seem to get them to display smaller? They are a bit too dominant right now for my taste.

4. Colors in Contact Form

Gravity Forms are awesome, and we use them for our site. Which colors do I need to change, to change the colors that apply to the forms? Looked everywhere, but the input-field titels and the color bar on the left of each of them I can’t get to change.

I’m sorry – this is a lot at once and I hope I’m making sense?!

Warm regards,
Kat.

[Bill Robbins]

Hello Kat,

It’s always fun to see what people cook up with my themes. Thank you for your business. Let’s see if we can find answers to your questions.

1. First Image

Sorry for this being unclear. In the demo, the first section is actually empty. We only have the image added with no widgets there. I’ll put a note about that in the instructions so that makes more sense.

2. Horizontal Image Sizing

It is possible to change how the images are scaled/cropped on the home page. By default the images are set to “cover” which means they will scale/crop in order to make sure that the area is always filled.

Most browsers support another property called “contain” which will make sure that the entire image is visible without cropping. To make that change, go to the Theme Options page and select the Styling tab. Scroll down to the very bottom and paste this in the Custom CSS box:

div.picture-block {	
	-moz-background-size: contain; 
	-webkit-background-size: contain; 
	background-size: contain;
}

That should change the way the images are handled so the entire image is visible.

3. Social Icon Size

It’s possible to change those too. Go to the Custom CSS box again and paste this:

#social li.facebook a,
#social li.foursquare a,
#social li.google a,
#social li.instagram a,
#social li.youtube a,
#social li.yelp a,
#menu-social li.facebook a,
#menu-social li.foursquare a,
#menu-social li.google a,
#menu-social li.instagram a,
#menu-social li.youtube a,
#menu-social li.yelp a {
	width: 33px;
	height: 34px;
	background-size: 34px 750px;
}

#social li.facebook a,
#menu-social li.facebook a {
	background-position: 0 0px;
}

#social li.google a,
#menu-social li.google a {
	background-position: 0 -173px;
}

#social li.youtube a,
#menu-social li.youtube a {
	background-position: 0 -312px;
}

#social li.instagram a,
#menu-social li.instagram a {
	background-position: 0 -452px;
}

#social li.yelp a,
#menu-social li.yelp a {
	background-position: 0 -348px;
}

#social li.foursquare a,
#menu-social li.foursquare a {
	background-position: 0 -139px;
}

Save your changes and that will make the images about half the size they were before.

4. Gravity Forms Labels

You can style those too. Just paste this in the Custom CSS box too:

.gform_fields label {
	color: #fff;
}

Update your settings. That should make the labels white. Feel free to change that color to one that suits you better.

---

If you have any questions or trouble, let me know.

Thanks,
Bill

[Bill Robbins]

Kat,

One other thing. You may want to add support@organizedthemes.com to your address book. The automated notification from the post above was bounced by your email service as spam. Adding that address will hopefully help you get notified.

Thanks,
Bill

[Kat]

Thank you, Bill, for your quick response!

I added the eMail and your answers were on point – social icons look perfect now and the form labels are now actually visible. Awesome, thank you!

The only thing that I still need help with is changing is the colored stripe on the left of each form-field? I’m assuming the code-snippet the same as the code for the labels, just switch out “label” for whatever the stripe is coded as. I’m certain you know what that would be?

Thanks also for the information regarding having the image directly under the header. Could you please let me know how to accomplish the same as in your demo? I understand what you explained, but can’t quite gather how to get it done?

I added the “contain” code for the images, but that still doesn’t seem to scale them down to show the full image in width at all times. They only show in full, if the width and height of the browser window is the same as the image. They start to scale up & to crop on the sides when the window is wider and/or taller than the image. I can only test on Mac right now, but on such this is at least true for Safari, Firefox, Chrome and the iOS Versions. HELP?!

[Bill Robbins]

Glad we got some of your questions answered. Let’s work on these others.

1. Form Accent Colors:
For simplicity, I set the accent color to be the same as the background color of the buttons. You can make it different if you’d like to. Paste this in your Custom CSS box:

		#author,
		#comment,
		#email,
		#url,
		input#s,
		textarea,
		input[type="text"],
		.gform_body input,
		.gform_body textarea,
		li.bypostauthor { border-left-color: #cccccc; }

Just replace the #cccccc with the color you’d like to have there and that should do it.

2. Top Image

In the “Home Section One” sidebar, I don’t have any widgets added there. That way there is no content on top of the image for that section. I’ve still added in an image in the theme options, but there’s no widget in that first section there. You could do the same thing by moving all of your widgets down one sidebar so to speak.

3. Image Blocks

If contain won’t quite get you there, then you might try this:

div.picture-block {
	-moz-background-size: 100% auto; 
	-webkit-background-size: 100% auto; 
	background-size: 100% auto; 
}

One problem there will be “windows” that the images are located in won’t scale down as the image does, so there will be a gap below the image as the screen size decreases.

You can read a bit more about the background-size property in this article by the W3 Schools.

Let me know if I can help,
Bill

[Kat]

Thanks a ton for your “after hours” Service! Greatly appreciated.

For some reason changing from “contain” to “100% auto” seems to make no visible difference. So, I guess I’ll have to fiddle with it some more until I find a solution that works. Worst comes to worse, I’ll have to reconsider the images that are dramatically affected by this issue. If I end up finding a solution, I’ll let you know! 😉

Have a great eve,
Kat.

[Bill Robbins]

Sorry about the background…I wish I had more options there for you.

If I can help with anything else, just let me know.

[Author]

Posts