[AgencyPro] Point Home Widgets to Pages

[Liz]

How do I allow these standard home-middle widgets to point to specific static pages, rather than a category of posts? Or have some point to a page, some point to a category of posts (like a Blog page)? What I understand from the theme tutorial is that I am supposed to put Featured post widget into Home-Middle and then have up to 6 posts that can be shown

I have seen a site on the showcase that does this but by looking at CSS code and Firebug, I can't figure it out.
This is the site on the showcase: http://www.valormech.com
>

[nutsandbolts]

This tutorial should help you: http://sridharkatakam.com/show-featured-pages-instead-posts-home-bottom-section-agency-pro/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

This looks great, Andrea. I will try it out after I hear about my other posts related to widget sizing.

thanks for the rapid helpful answer!

[Liz]

I did what it said in the tutorial and all the featured pages were laid out one below the other, instead of the 2 rows of 3 that are the default for this middle section.

I'm trying to achieve the look found in these other Agency theme sites, small images with titles that click through to pages.

This Agency theme site is linking to pages http://www.valormech.com/
This Agency theme site is also linking to pages http://www.vineyardadvising.com/

[nutsandbolts]

Okay, those sites aren't using the featured post/page widget - they are just using custom images linked to the pages. You don't need to add new widget areas to do this (as we were talking about on your other thread) - you can use Genesis column classes to split the widget area into 4 distinct areas. So basically you'd end up with something like this in a text widget:

<center><div class=one-fourth first><a href=LINK_TO_PAGE><img src=LINK_TO_BUTTON/IMAGE #1><br /><h3>TITLE OF PAGE</h3></a></div>
<div class=one-fourth><a href=LINK_TO_PAGE><img src=LINK_TO_BUTTON/IMAGE #2><h3>TITLE OF PAGE</h3></a></div>
<div class=one-fourth><a href=LINK_TO_PAGE><img src=LINK_TO_BUTTON/IMAGE #3><h3>TITLE OF PAGE</h3></a></div>
<div class=one-fourth><a href=LINK_TO_PAGE><img src=LINK_TO_BUTTON/IMAGE #4><h3>TITLE OF PAGE</h3></a></div></center>

Hopefully that makes sense.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

Wow, Andrea, kudos and gratitude to put this all together for me.

My client was originally looking for a section with 4 small boxes/graphics, and above it, a larger box 3/4 width of the 4 boxes containing a video, and a 1/4 page width box to the right of it, containing another link to a page. I chose the Agency Pro theme because it had the look of the multiple boxes on home page. for all I know, another Genesis theme will do this more easily since I'm having to disable the home-top and home-bottom to get the static home page she wants.

when you say Genesis column classes, do I just set it up in the widget or are changes needed to any of the php files too?

Can I have 2 rows/widgets, one with a 3/4 size image and one with a 1/4 sized image?

[nutsandbolts]

Nope, no PHP changes necessary. You can just paste what I gave you into a text widget, drop it in a full-width widget area, and drop in your links to the images and URLs.

For the other area, you should be able to do something like this:

<center><div class="three-fourths first"><code or link for video></div>
<div class="one-fourth"><a href=LINK><img src=IMAGE_LINK></a></div></center>

Give that a try and let me know if something doesn't work right or you need help.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

I will give this 3/4 code a try, thank you!

I don't know where to ask the question below:
Can you please explain why the style.css of Agency Pro is unlike any of the other Studiopress themes I've worked on. All the knowledge I've had from working with Studiopress themes feels totally worthless when I try to do things like increase header height. there are so many extra sections in the stylesheet that I've never heard of. Is there a Studiopress guide somewhere that translates what old style = new style settings?

[nutsandbolts]

You're correct - the Pro themes are different from the older ones in a number of ways. A lot of that is due to HTML5, but other changes are simply an effort to clean up the code, improve mobile responsiveness, and use best practices. There are also a number of changes to the hooks and content areas used in Genesis 2.0 - what used to be #header is now #site-header, for example.

The StudioPress blog had a good post awhile back with links to articles that talk more about the differences: http://www.studiopress.com/news/genesis-2-0-resources.htm

It has definitely involved a learning curve for a lot of people!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

I've put the 3/4 - 1/4 in place, as well as the 4 - 1/4 sections. They are wrapping to the next line even though there is plenty of space, ideas? Test site is here http://www.passiongoddess.com/test/

I'd actually like these all to be in the same section/division (white block background) too so the two rows appear close together. Do I put them all into the same text widget?

[Liz]

If this is bending Agency-Pro in a direction that is more easily done with another theme, please tell me. it feels like I am not even using the coolness of Agency because I'm not using the transparency and home page sections (I now realize that the examples in the showcase we liked were with the non-pro version of Agency).

My client just wants a simple home page with the 4-5 clickable images and a video. My newest themes are Outreach, Prose, Magazine Pro, Lifestyle Pro

[nutsandbolts]

Try putting them in an overall div - this worked for me on a test site:

<div id=homevideo>
<div class="three-fourths first"><img src=/wp-content/uploads/2013/11/robin-39-1140x425.jpg></div>
<div class="one-fourth"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div></div>

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[nutsandbolts]

Oh, just noticed your question about using the same section. This is what I put into a text widget to get everything showing together:

<div id=homevideo>
<div class="three-fourths first"><img src=/wp-content/uploads/2013/11/robin-39-1140x425.jpg></div>
<div class="one-fourth"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div></div>

<div id=fouricons>
<div class="one-fourth first"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div>
<div class="one-fourth"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div>
<div class="one-fourth"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div>
<div class="one-fourth"><img src=/wp-content/uploads/2013/11/Man-in-Graphic-sm.png></div></div>

And it looks like this:

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

Hmm, oddly when I put in the code you mention, nothing at all shows up. I tried it without the quote marks around the one-fourth items too and still doesn't show up. The code I had before did and it certainly does for you ...?

[Liz]

Okay, this theme is officially kicking my a** and I think I'm going to choose another one of the Studiopress themes that is not the pro version, I didn't realize that there was a difference between Agency and Agency Pro, all the sites that had the look I like were with Agency and it feels like I am bending Agency pro inside out to do something that its not meant to do.

[nutsandbolts]

Do you need the non-pro version of Agency? I believe I still have it on my computer somewhere.

Edited to add: I do. If you want, send me an email and I'll send it your way.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Liz]

I have placed both a text widget with 2 sets of 1/3 images AND put featured pages into Home Left/Middle/Right configuration. I like the look of the text widget because there is no white background (want that for other pages, just not home page). However, text widget version will not get all 3 icons in a row. The icons are not all in their rows.

I've tried changing their sizes to smaller size and they still don't align 3 to a row. I'm messing around using one image but once the coding is done, I will put 6 different images into this widget, each linked to a different page.

I'd like them in 2 rows of 3, evenly spaced across the page, preferably spaced as wide as the white background found in the middle section and the footer.

[Author]

Posts