Community Forums › Forums › Archived Forums › General Discussion › Metro theme: full width top, 3 widgets below
- This topic has 9 replies, 2 voices, and was last updated 9 years, 10 months ago by nutsandbolts.
-
AuthorPosts
-
May 16, 2014 at 4:17 pm #105555MissKittyMember
We are currently using the Metro theme.
For the home page, we'd like:
1. full width top surrounded container div, text and image only
2. (3) widgets below that, with separate container div (not footer)http://thexisles.com/newsite/Sample-Final-Homepage.jpg
Is this possible w/ Metro theme?
I realize that I can keep home-top widget and change CSS,
but unregister home sidebar?
and add new widget section that has separate div?Would a different theme lend itself more to our needs?
http://thexisles.com/newsite/Sample-Final-Homepage.jpgMay 16, 2014 at 5:32 pm #105561nutsandboltsMemberYes, that's possible with Metro. This tutorial should help you get started as far as getting your left, center, and right widget areas to display horizontally: http://sridharkatakam.com/display-widgets-columns-using-genesis-column-classes/
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 17, 2014 at 7:24 am #105618MissKittyMemberThanks Andrea, I'll give it a go.
May 17, 2014 at 1:53 pm #105644MissKittyMemberHi again,
Ok, I was easily able to get the 3 widgets to display horizontally using column classes.My other issue, however, is that these 3 widgets are only to display on the home page, and the background is different than the curved background.
The rendering we are working from has a main area at the top w/ just image and text, from top of header to bottom of Home Top, with a semi-transparent background with curved corners.
Then a gap.
Then the 3 widgets w/ a different transparency, also curved corners.
Currently, I have:
.site-container { /* background-color: #fff;*/ margin: 32px auto; max-width: 1140px; overflow: hidden; padding: 36px; /*added jlr 5-16-14*/ background:#f7f7f7; background:rgba(255,255,255,0.3) } which applies the semi-transparent background to the entire space.... so, using the metro theme "as is" I cannot figure out (or if it's even possible) to achieve what we have in the rendering. Would it be more optimum to: 1. choose a different theme? 2. use the 3 widgets as footer widgets and disable them on all non-home pages?
May 17, 2014 at 2:49 pm #105652nutsandboltsMemberGiven the custom nature of your mockup, any child theme would require a similar amount of customization/CSS to look the way you need it to look. You can use PHP to display the current widget areas only on the homepage, and the other changes would require editing the stylesheet. I don't know that it's necessary to start over with a different theme but there will definitely be some work required to achieve the desired styling.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 17, 2014 at 3:28 pm #105660MissKittyMemberThank you. That was my concern 🙂
Would it be feasible to reposition the home_bottom widget to genesis_before_footer area?
May 17, 2014 at 3:31 pm #105661nutsandboltsMemberYou could do that, or you could use the footer widget areas and display them conditionally only on the homepage, as you mentioned before.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+May 18, 2014 at 1:50 pm #105776MissKittyMemberOk, thanks so much, Andrea! I'll try the first option and then the second one.
You're the best 🙂May 18, 2014 at 3:38 pm #105790MissKittyMemberOk, I'm back again....
Still struggling w/ getting 3 widget areas along bottom outside of .site-container div.My first choice would be to move home_bottom widgets to genesis_before_footer.
However, I cannot figure out how to code the phpMy second choice would be to register a new widget (which I did),
and then hook it to genesis_before_footer, conditionally programming it to display only on the home page.
However, whenever I try second step (hooking to genesis_before_footer, and conditionally on home page) it breaks the site.
For this option, this is what I've added to my functions.php file:genesis_register_sidebar( array( 'id' => 'home-three', 'name' => __( 'Home Three', 'metro' ), 'description' => __( 'This is section for 3 areas on Home page', 'metro' ), ) ); //* Hook Home Three widget area before footer on home page add_action( 'genesis_before_footer', 'home-three' ); function home-three() { if ( is_front_page() ) genesis_widget_area( 'home-three', array( 'before' => '<div class="home-three widget-area">', 'after' => '</div>', ) ); }
My last and least desired option is to show 3-column widgets on home page only.
And I truly cannot figure that out.Please help 🙂
May 20, 2014 at 5:12 pm #106093nutsandboltsMemberIt may be the fact that your function is using a dash instead of an underscore - try changing that in both spots and see if it works.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.