Homepage › Community Forums › Aspire Theme Support › Full Blog Under the Banner and Optin
Hi Wes. Per our Email…
How can I get the Aspire theme to provide the Splash and Email optin with the full blog following underneath just like the Elevate theme? I prefer Aspire because it looks more custom and modern.
Please assist.
Thanks Greg
In your front-page.php file look for this –
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
//* Add homepage widgets
add_action( 'genesis_loop', 'aspire_front_page_widgets' );
add_action( 'genesis_loop', 'aspire_front_page_widgets_mid' );
add_action( 'genesis_loop', 'aspire_front_page_widgets_bottom' );
Then change that code to this –
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );
//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
//* Add homepage widgets
add_action( 'genesis_after_header', 'aspire_front_page_widgets' );
add_action( 'genesis_after_header', 'aspire_front_page_widgets_mid' );
add_action( 'genesis_after_header', 'aspire_front_page_widgets_bottom' );
That adds the content and sidebar back in. Next you’ll want to make some adjustments to your css to get it to look however you need. The content and sidebar will show up full-width, and you’ll need to make it centered and reduce some of the width. You can start with removing the max-width: 100%;
on line 655 in your style.css –
.front-page .site-container .site-inner {
margin-top: 0;
max-width: 100%;
overflow: hidden;
}
And then remove the max-width: none;
around line 2403 in your css –
.front-page .site-inner {
max-width: none;
}
I can confirm this works, as I’ve just successfully done this on a test site.
Ok… did this. take a look. http://dev.gregsimas.org. Let me know what still needs to be done.
1. I need the whole blog page (below the subscribe box to fit right) Right now it’s up against the box.
Also… a few more things if possible… once we get the page right.
1 . Can you suggest a color for the box itself — as a designer — I don’t mind it being black intead of orange…maybe you can give me a hex color?
2. Can the featured image still be below the title on the single post format. It switches.
3. I would like the featured image to be more narrow top to bottom — like 400px if that’s possible.
Thanks for all the help!
Greg
The .front-page .site-container .site-inner
I referred to earlier shows margin-top: 0;
just increase that starting with around 60px and adjust if you want more or less space for the content.
I’m already working on an update to add the box color to the customizer so you can choose a color without needing any code.
To change the featured image from showing on top in the single posts, look for this code in your functions file –
//* Add featured image above the entry content
add_action( 'genesis_entry_header', 'aspire_featured_photo', 5 );
function aspire_featured_photo() {
if ( is_attachment() || ! genesis_get_option( 'content_archive_thumbnail' ) )
return;
if ( is_singular() && $image = genesis_get_image( array( 'format' => 'url', 'size' => genesis_get_option( 'image_size' ) ) ) ) {
printf( '<div class="featured-image"><img src="%s" alt="%s" class="entry-image"/></div>', $image, the_title_attribute( 'echo=0' ) );
}
}
And replace it with this –
//* Add featured image elow the entry content
add_action( 'genesis_entry_content', 'aspire_featured_photo', 5 );
function aspire_featured_photo() {
if ( !is_singular( array( 'post', 'page' ) )) return;
the_post_thumbnail('large');
}>
You can change the large
to medium or small. More info on how to do this – http://bit.ly/21054qe
Also, (in reference to the Front Page 2 Widget Background Color) if you don’t want to wait on the update, you can go ahead and add this line of code – .front-page-2 .image-section
to your output.php file inside your lib folder of your theme –
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.archive-pagination li a:hover,
.archive-pagination .active a,
.button,
.footer-widgets,
.widget .button,
.front-page-2 .image-section {
background-color: %1$s;
}
Once you do that, access your Customizer by going to Appearance > Customize
then click Colors
. Change the accent color (orange is default) to whatever color you want from the color changer. That will allow you to change the color without any code needed.
Ok, now I have to get back to finishing up the Documentation Section I’ve been working on. I’ve been busy all day with a lot of emails, posts and other things, so I’m just now getting to it today. Working as quickly as I can!
Wes, I made the adjustment to the height at 60px. Looks good.
I don’t mind taking a crack at the Customizer but I would like to know when the update will come? No sense in doing this on the dev site if the Update is right around the corner. Any dates at to when it will come?
Also, I noticed with the changes it’s effecting the look of the theme on Mobile ie iPHONE 6splus. So I don’t want to launch with it not functioning well on mobile.
Let me know about the update. 馃槈
Thanks – Greg
Hey Greg, I’m going to release that update later today. It will be a minor update covering a couple of the things we’ve already discussed.
BTW, I just finished the Docs for Aspire. You can access it by clicking the Tutorials and Documentation link above this site in the menu. Here is the direct link to the Aspire Documentation – https://appfinite.com/theme-setup/aspire-theme-setup/
I will be creating the Documentation in this format for the rest of my themes as well.
OK… cool. Thanks.
Just updated it. You should be able to re-download it from your account – https://appfinite.com/my-account
Added the Front Page 2 Background color and the Orange/Popular Plan to the Customizer……Check out the Demo to see the “Plan” section that I’m referring to.
Hi Wes… I downloaded but do not see what you’ve mentioned above in the customizer. Just fyi.
Here is what I was referring to – https://appfinite.com/theme-setup/aspire-theme-setup/#tcu
Once you access the Customizer, you can change the default color to the color you want by using the Color Picker. The Color Picker can change all of the links, buttons, backgrounds, etc (which are currently orange) to the Theme Color you want for your site. So by using the Customizer, you’ll be able to change your site’s main colors to look however you need.