Eric

I don’t see what you’re seeing on my end. Are you using the latest version or the beta?

BTW, whatever you used to take the screenshot is making the image look weird. I’m sure it doesn’t look like that in realtime right?

You can do this by going into your Genesis Theme Settings and enabling the Featured Image section, as well as adding/adjusting the content limit to show however much text you need.

Look for these options in the “Content Archives” section.

Would need a bit more info in order to know what’s going on. Which chat bot are you referring to?

Is it something that can be tested quickly? Is it a shortcode? Plugin?

I doubt that it’s the child theme causing the issue since the child theme just handles the design. Adding a plugin, shortcode, or whatever won’t be affected by the child theme itself unless you’ve added custom code that could possibly affect it.

Also, Genesis Child themes don’t contain footer.php files, the Genesis Framework itself is what is supposed to handle that. If you want to add something to the footer file, then you would have to either hook it in through functions file, or add it to the Genesis Theme Settings page in the script section. You could also use a plugin to add this code in as well.

If it works in Genesis, it will definitely work in Aspire, as well as just about any other Child theme since it’s the Genesis Framework that handles all of the work “under the hood”.

Hi, Just in case you missed it, you did receive an answer several days ago. Please see my response above. I would need a link to your site in order to continue.

Thanks

@danielmt2k Yeah I was talking about the CSS file, I should’ve wrote “bottom of the CSS” instead 🙂

I thought that was what you were referring to when you mentioned the “800px width” in your previous comment.

That won’t happen on a mobile device since there’s no mouse/hover.

When you view your site on a mobile device the links have to be touched/clicked in order for them to open up.

So removing that feature wouldn’t actually do anything since it doesn’t activate on mobile devices.

Does that make sense?

The animation part you’re referring to comes from the Genesis Framework. The Aspire theme doesn’t add this effect. You would have to override it by adding code or a snippet of code to remove or adjust the speed.

I did a Google search and got this link – https://my.studiopress.com/documentation/snippets/scripts/ Hopefully that helps, if not, then there are more code snippets and tutorials out there that should be able to.

To change the background color of Sub Menu:

.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu li.current-menu-item > a {
	background-color: #ff0000;
	color: #fff;
}

Add that code to your CSS. Just so you know, you can change the main default color of the Theme (orange) to whatever color you want in the Admin Customize page. But this changes it all in one. If you want to have a certain section of your site separate, then you would have to add something like the code listed above as an example.

I added a red background in the code so you can test to see if it works.

The secondary sidebar is deactivated by default in the Aspire Theme (as with most modern Genesis themes nowadays). You can reactivate it in the functions file where you’ll see that it’s unregistered. Just remove that code and it should be available as an option. However, you’ll need to add your own customization to your CSS in order for it to appear in the way that you want it to.

Have a look in the Guru Documentation page at Front Page 1 and you’ll see the Plugin and exact code they use in the demo – https://appfinite.com/theme-setup/guru-theme-setup/#fp1

Make sure to download and install the plugin in order for the popup to work. You can also use other plugins if you want.

Also, which type of widget are you using? Every since the WordPress update, the basic “Text” widget has changed. So now you have to click the “Text” tab when adding code……Or you can use the Custom HTML widget which allows you to add code

Did you buy it from appfinite or studiopress?

If you bought it from appfinite then it’s located on the my account page (link in the bottom menu).

If you bought from StudioPress then it’s located in the my.studiopress.com account page (in the downloads section).

Closing thread since this is a Duplicate post.

You can reply to your first thread here – https://appfinite.com/topic/making-homepage-images-in-widgets-appear-when-scrolling-down/#post-21762

Hi Daniel,

Can you provide a bit more info on what you did? I tested this exact code and it worked perfectly. Here’s a screenshot http://i.imgur.com/feSjGBc.png

As @jessy mentioned, the footer shows up that way from Genesis (the same in all Child themes). In order to change the text for it you have to override it. You can use something like Simple Edits to add your code in, or you can add it in directly to your functions file. I use FTP to add it inside the functions file. Much safer and easier to undo any mistakes in case I break the site with a PHP error 🙂

Sure thing!

Are you asking about Margin or Padding? Your first two posts asked about padding so that’s why I posted the code above. Margin and Padding are both different and have different effects.

I would leave the code with the margin auto as it is since that’s needed to center the entire front page 2 widget. As a matter of fact, the code I’m talking about doesn’t have margin in it, I just copy/pasted the front page 2 section from the Aspire Demo’s CSS.

I’ll assume you mean padding in this case (correct me if I’m wrong). To reduce the padding for the top and bottom of the widget you can adjust the padding inside the .front-page-2 .image-section part.

To reduce the left and right padding, change it under this code .front-page-2 .wrap.

I’m not sure how much padding you’ll want but if you adjust those 2 parts of the code it should work. It’s basically just the top and bottom CSS Selectors I posted above that you’ll need to edit in order to adjust it.

Although I don’t know the exact link to your site, this should still work on any Aspire theme install unless you’ve already edited this part of the code.

Does that help?

All of the padding can be found in the Front Page section inside your style.css file –

.front-page-2 .image-section {
	background: #fa5738;
	padding: 60px 0 20px;
}

.front-page-2 {
	margin-left: auto;
	margin-right: auto;
	margin-top: -160px;
	position: relative;
	width: 1000px;
}

.front-page-2 h4 {
	font-size: 34px;
	font-size: 3.4rem;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.front-page-2 .wrap {
	padding: 0 5%;
}

What’s the link to your website?

You’re not using those image links on your own website, right?

The reason I ask is because all of those images are External links from their demo site. None of those images are from the actual Theme itself, they are just external links to images. They don’t have anything to do with the theme or the theme’s performance.

Also, you’re not really supposed to use those image links on your own site, those are just for demo purposes, you’re supposed to upload any images you plan to use on your own site/server. The speed in which those images are delivered will be based partly on the theme, WP, and how good your hosting/server is. If you have a slow server, then the images will show up slow (not much any theme can do to override that).

So what you’ll need to do is use images that are uploaded to your server so that your site isn’t relying on another external server to display your images.

Keep in mind: If they remove or change some of the images on their demo, then those image links won’t work on your site. That’s why it’s recommended that you upload images that you want to use on your own server, and then use those links for your images. This is how it works for any theme or website you use.

Hope this helps 🙂

Do a search in your CSS for the word “Forms” –

/* ## Forms
--------------------------------------------- */

Everything below that line (396 by default) handles some of the forms and their basic styling.

If you have a Plugin like Gravity Forms, Ninja, or any other “Form” plugin, then those plugins may override the default CSS. Mobile devices may or may not recognize the default CSS and may use their own styling to display things like checkboxes, list selection, etc. It just depends on the device.

The only way to know that for sure is to just try it out and test it on your phone or retina device. Then you can see if the size makes a difference or not. Have you already tested this?

It’s kind of already set that way, but since some background images are designed differently (different widths, different heights) you would probably have to add in custom modifications depending on the size of those images.

You can look near the bottom of the css to see the responsive section. Here’s what you could copy and adjust –

@media only screen and (max-width: 760px) {

	.front-page-1,
	.front-page-4,
	.front-page-6 {
		/*background-attachment: scroll;*/
		-webkit-background-size: cover;
		-moz-background-size:    cover;
		background-size:         cover;
	}

}

In that example I changed the background size from auto to cover. You can use contain, cover, and auto to have the image adjust on different browser sizes. This is what all other sites use to make background images responsive. The browsers job is to scale the image without distorting it….the best it can. There are still limits though, not every image is going to show 100% width and 100% height from end to end. It really just depends on the type of image.

You can copy/paste that code and make any more adjustments you need to it, as well as change the browser width 760px to other screen sizes.

Since this is a customization request, I’d recommend either searching for the terms – “semi-transparent color overlay css” or hire a dev to code it for you if you’re not familiar with CSS. Before you do that, first run a search and you’ll see some tutorials out there that may already cover what you’re looking to achieve.

Here’s an example – http://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image

And here – http://www.corelangs.com/css/box/overlay.html

and there are many more that pop up when I run a Google search.

Try those out, and then you can tweak them to your needs.

Closing Duplicate thread. Please continue original thread here – https://appfinite.com/topic/how-to-make-section-1-on-front-page-smaller/

kronos, ah that makes sense.

@Fred, I don’t know the exact location where your CSS code is located since I don’t have a link, but you can search for this code –

.header-image .light .site-title > a {
	height: 56px;
}

….which should control the height and size of the logo/title area. Try deleting that part if you find it. If that doesn’t work then I would definitely need a link to your site once you have one available.

What’s the link to your site?

It’s looks perfectly fine on my end. Is it possible to send a screenshot of what it looks like on your end?

Also keep in mind that Responsive Background Images have to adjust themselves to scale for the Visitor depending on the size of their browser. If you resize your browser (shrink and/or open it wide) you’ll see how your Image will adjust to fit the screen the best it can without becoming too stretched or distorted.

When I look at your homepage (assuming that’s the page you’re referring to) the image isn’t distorted or blurry at all. The Theme itself isn’t distorting or blurring your image, it’s showing it exactly how the image is. Here is the direct link to your image – http://www.mrandmrsdodd.com/wp-content/uploads/2016/12/rsz_img_0979-1.jpg If you compare the image link itself with the image on the site they both look exactly the same.