Community Forums › Forums › Archived Forums › General Discussion › 3 Column Layout on the Home Page, AgentpressII
- This topic has 4 replies, 3 voices, and was last updated 11 years, 2 months ago by littlecrown.
-
AuthorPosts
-
February 4, 2013 at 1:31 pm #17955rabMember
Really struggling with AgentpressII. AgentpressI seemed a lot easier to layout. I want a 3 column layout on my homepage and either a 1 or 2 column layout on subsequent pages. How do I accomplish this?
Cheers,
Rab
February 4, 2013 at 3:28 pm #18017cdilsParticipantHi Rab,
For any page BUT the home page, AgentPress has a layout options for full-width, content-sidebar, or sidebar-content-sidebar. To change that, go to any individual post, listing, or page editor screen and look for "Layout Settings". If you want the same exact setting on all posts/pages/listings, you can change it universally at Genesis > Theme Settings and look for "Layout Settings."
Now, if you're not talking about sidebars and want the content area itself to contain one more columns, you can use these content column classes.
Things get a little trickier on the home page since there are multiple widget areas to deal with and their corresponding CSS specs. The easiest solution would be to go to Settings > Reading and change the "Front page displays" from your latest posts to a static page. Doing that will cause the default AgentPress home page template (home.php) not to show.
The alternative solution is to dig into the code and modify the structure of the home page. Depending on your level of comfort with PHP and CSS, you may or may not want to tackle it.
Cheers,
Carrie
Have you been helped in this forum? Pay it forward and answer someone else’s question. I bet you’ll know the answer to at least one question. 🙂
I host a weekly WordPress-focused podcast called Office Hours. I tweet @cdils.
February 4, 2013 at 3:49 pm #18032rabMemberThanks for the quick response Carrie. That's what I figured. I think I prefer the flexibility of AgentpressI and will just revert back to it. Upgrades aren't always for everyone.
Cheers,
February 11, 2013 at 5:00 am #19570littlecrownMemberI, however, would love to dig into the CSS and PHP to create a three-column layout on the homepage! May I continue the thread? I'm also using AgentPress and I'm using version 1.9.1.
I've been struggling with the correct php syntax to do this for days and haven't been able to get it right.
I'm wanting to create two 3-column widgets on the homepage (as can be seen at http://www.keeperofthehome.org). Thus, I'm trying to assign two ID's (#home-top and #home-bottom) and three classes on each ID (.home-top-1 .home-top-2 .home-top-3 .home-bottom-1 ... etc) but I can't figure out how to deal with the multiple classes when I'm writing the code for home.php.
Here's what I've put in my functions.php:
<code>
/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home Top', 'agentpress' ),
'description' => __( 'This is the widget area for the top columns on the homepage', 'agentpress' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>'
) );/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home Bottom', 'agentpress' ),
'description' => __( 'This is the widget area for the bottom columns on the homepage', 'agentpress' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>'
) );</code>
And here's where I'm struggling with my home.php (I get a "T_CONSTANT_ENCAPSED_STRING" error message when I run this code):
<code>
<div id="home-top">
<div class="home-top-1">
<?php if (!dynamic_sidebar('Home Top #1')) : ?>
<div class="widget">
<h4><?php _e("Home Top #1", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the top left column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-top-1 -->
</div><!-- end #home-top --><div id="home-top">
<div class="home-top-2">
<?php if (!dynamic_sidebar('Home Top #2')) : ?>
<div class="widget">
<h4><?php _e("Home Top #2", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the top middle column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-top-2 -->
</div><!-- end #home-top --><div id="home-top">
<div class="home-top-3">
<?php if (!dynamic_sidebar('Home Top #3')) : ?>
<div class="widget">
<h4><?php _e("Home Top #3", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the top right column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-top-3 -->
</div><!-- end #home-top --><div id="home-bottom">
<div class="home-bottom-1">
<?php if (!dynamic_sidebar('Home Bottom #1')) : ?>
<div class="widget">
<h4><?php _e("Home Bottom #1", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the bottom left column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-bottom-1 -->
</div><!-- end #home-bottom --><div id="home-bottom">
<div class="home-bottom-2">
<?php if (!dynamic_sidebar('Home Bottom #2')) : ?>
<div class="widget">
<h4><?php _e("Home Bottom #2", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the bottom middle column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-bottom-2 -->
</div><!-- end #home-bottom --><div id="home-bottom">
<div class="home-bottom-3">
<?php if (!dynamic_sidebar('Home Bottom #3')) : ?>
<div class="widget">
<h4><?php _e("Home Bottom #3", 'genesis'); ?></h4>
<p><?php _e("This is the widgeted area for the bottom right column on the homepage.", 'genesis'); ?></p>
</div><!-- end .widget -->
<?php endif; ?>
</div><!-- end .home-bottom-3 -->
</div><!-- end #home-bottom -->
</code>And here's what I've put in my style.css:
<code>
#home-top .widget, #home-bottom .widget {
float: left;
margin: 0 15px 20px 0;
width: 215px;
}
.home-top-1, .home-top-2, .home-bottom-1 {
border-right: 1px dashed #505050;
padding-right: 15px;
}#home-top {
border-bottom: 1px dashed #505050;
margin-bottom: 20px;
padding-bottom: 5px;
}#home-top, #home-bottom {
clear: both;
overflow: hidden;
}</code>
Thank you so much!
February 11, 2013 at 5:04 am #19571littlecrownMemberAnd I'm so sorry to have posted all that long code as text! I can't figure out how to place code in the new forum.......... is it a shortcode now?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.