Outreach theme, move home widget area

[Paul]

The church I am doing this site for would like the home widget areas that show below the slider now (if they were being used), moved to a vertical display to the right of slider, and only have 3 instead of 4.

Is this possible, and if so, where and how would I start on this?
The site I am working on is http://crossroadsefca.org/

Thanks!

---

Grace and Peace,
Paul

[Paul]

Ok, I have read Nick's tutorial, but I'm still completely lost.

I think I sort of grasp the idea behind adding a new widget area, but I have no idea how to figure how to put it in the middle of the page next to the slider. With this theme, the widgets I would like to use already exist,
function outreach_home_sections() {

if ( is_active_sidebar( 'home-1' ) || is_active_sidebar( 'home-2' ) || is_active_sidebar( 'home-3' ) || is_active_sidebar( 'home-4' ) ) {

echo '';

genesis_widget_area( 'home-1', array(
'before' => '',
) );

genesis_widget_area( 'home-2', array(
'before' => '',
) );

genesis_widget_area( 'home-3', array(
'before' => '',
) );

genesis_widget_area( 'home-4', array(
'before' => '',
) );

echo '';

}

}

But they currently line up under the slider. So I think I ought to be able to use the existing widget-areas Home-, home-2, and home-3?

But that is where I am lost, trying to figure out how to stack them vertically in the new space I just created by shrinking the slider.
Right now they come after the slider, in a horizontal row.

(This probably contributes to my 'lostness', but I am lost in php; I have been trying, unsuccessfully for the last 10 years to learn php, but there is something about it that does not compute with me. 🙁 )

---

Grace and Peace,
Paul

[Paul]

Here is how they are currently styled:

/* Home Sections
------------------------------------------------------------ */

.home-featured {width: 500px;}

#home-sections {
background-color: #fff;
overflow: hidden;
padding: 40px 0;
}

#home-sections img {
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999;
margin: 0 0 10px;
padding: 10px;
}

#home-sections img:hover {
-moz-box-shadow: 0 0 3px #333;
-webkit-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
}

.home-1 {
float: left;
margin: 0 40px 0 0;
width: 235px;
}

.home-2 {
float: left;
margin: 0 40px 0 0;
width: 235px;
}

.home-3 {
float: left;
width: 235px;
}

.home-4 {
float: right;
width: 235px;
}

I am guessing I need to change something in the first 3, and delete the 4th?

---

Grace and Peace,
Paul

[Anita]

I did this with another theme. See if it works. Drag another widget into the slider area and set that widget to float right using CSS.

** added this ** drag the first one in there so we can see it and then I can help you with the styling.

---

Love coffee, chocolate and my Bella!

[Paul]

Thanks anitac, I just did that - http://crossroadsefca.org/

---

Grace and Peace,
Paul

[Anita]

Okay so now, you need to add this to the bottom of your CSS - this is the CSS for Featured Page 1 widget area:

#featured-page-4 {
width: 300px;
float: right;
}

Then we have to adjust the slider. Change this to about 960 for now:

.home-featured {
width: 500px;
}

Then, change the SLIDER width to about 525px.

Let's see how that looks.

---

Love coffee, chocolate and my Bella!

[Paul]

Ok, I adjusted the numbers just a bit further - .home-featured is 1060, slider width is 700

so now the widget has slid over to the right, but it is still on the row under it. (and what is causing the title to be misaligned w/ photo?)

My wife is waiting for me, so I am going to have to quit for a few hours, will be back later to see what next steps will be.

Thank you so much! This is really helping me and I'm learning (I think) while doing.

---

Grace and Peace,
Paul

[Anita]

Ok, let me play around with it for a bit.

---

Love coffee, chocolate and my Bella!

[Paul]

Ready to tackle a new week working on this. (And wondering how many times the church will change their mind after I finally figure something out?)

---

Grace and Peace,
Paul

[Paul]

I never did figure out how to make it display exactly as I wanted, within the same widget area as the slider. What I ended up doing is resizing the .home-featured to 700, and changing the layout to use a sidebar. I then dragged Featured Page widgets into the sidebar.
It seems like I also had to edit something in home.php, but I can't remember if I did, or what I did.

Now I am trying to figure out how to make the page titles show without destroying the symmetry of the thumbnails to the slider.

---

Grace and Peace,
Paul

[Anita]

The site looks great Paul! I think you can overlay the title over the images instead. I had a forum post here already but no one responded. I bumped it so let's see if we can get someone to share how to overlay a title over the images.

---

Love coffee, chocolate and my Bella!

[Susan]

Anita - I don't know if this will help (and if it doesn't, I don't have another suggestion!), but have you seen Carrie's tutorial?
http://www.carriedils.com/text-overlay-image/2306

[Anita]

Not quite. She's adding a widget over the image in that scenario. But in response to my other post linked previously, Sozo provided this response:

"Overlay is done through positioning and z-index. You could take a look at how the date is placed atop the featured image in the Decor theme for an example."

I have Decor so I could look at that in just a few minutes.

---

Love coffee, chocolate and my Bella!

[dkrause]

Paul -- I hope I'm not violating protocol here, but I'm jumping in because I also would like to adjust the size of the GR slider on my Outreach theme. I visited the site you did, and you clearly figured out how to do it.

To adjust the GR slider width, do I simply need to go in and add the one line of code --  .home-featured {width: 500px;} -- in my CSS, as you have it in your illustration above?

If I do that, I assume there's now a blank space, with the default background color, to the right of the slider -- correct?

I don't necessarily have a need for something custom to the right of my slider, so do you know if I could make use of the Text widget and add it to the Home Featured slot? Would that automatically fall into place to the right of the slider? If so, would this let me post something like an announcement of the day, or a small blurb about my new book I've just released?

I would appreciate any thoughts/advice you might have, and if I need to move my question to a new post, I will do that.

[kathiemt]

Did you get that sorted dkrause? I'm also trying to find out the answer to this. My text is under my slider and not to the right.

I've read many threads here but it seems all the answers have stopped around 13 February. I can't find any new responses to many threads after this date.

---

Virtual Assistant & Nature Photographer
Kathie Thomas: VADirectory – Click here for Australian images

[dkrause]

Hi kathiemt -- I did not attempt Paul's modification, because I am not to be trusted manipulating code. I wanted a solution I could handle myself, without having to pay someone to make modifications for me.

I did end up finding something that worked for me, at least for now. It's not the 100% ideal, but a suitable temporary option. After some searching, I found the ML Slider. I installed it as a WordPress plugin, and the widget was super-simple to place in the Home Featured area, with no code manipulation required. It's easily re-sized, so I left the width the same as the Genesis Responsive Slider, but decreased the height a bit so that the headings of my 4 Home boxes can be seen.

I like this slider because the slides work pretty much just like posts in WordPress -- I just type in the text I want, and can add an image. I also like it because the content in the slides aren't pulled from pages or posts -- they're entirely separate. So, I can add/subtract/edit as I need to. My only complaint about it is that the slides don't seem to allow any formatting of the text, so I'm not able to display lists, or even do paragraph breaks; only one paragraph. But I can work around that. I am able to insert links into the text. so that's good. If I need this as a teaser for a post or page, I can add a link to the full post.

As I said, this isn't the perfect solution, but it at least works for now. My primary goal was to be able to have an image in the slider, with text to the right. This allows me to do that.

And BTW, in all my searching here on the forums, this particular thread seem to address this issue better than any others I found.

[Anita]

Hi everyone, this is what I was able to come up with. If you want to have the slider on one side and say another text widget on the other side here's what I did. Here is the screenshot - click here.

I took the Genesis Slider code and added it to the Style.css file and added the float. You need to change the size of your slider to about 500px wide to 250 or 300px tall - whatever you like but fits.

#genesis-slider {
    background-color: #FFFFFF;
    border: 10px solid #EEEEEE;
    padding: 10px;
    float: left;
}

Then I dragged a Text widget under the slider in the Home Featured Widget area. That text widget id is “text-2”. I added the float and the width.

#text-2 {
    background-color: #FFFFFF;
    float: right;
    padding: 10px;
    width: 440px;
}

Now, if you want something other than a text widget on the right - you will need to locate the id of that widget. I use Firebug for Firefox. Change out the #text-2 with the id of the widget you placed in there and then modify the CSS as needed.

---

Love coffee, chocolate and my Bella!

[Anita]

I forgot to add in one more step:

You need to also add in for the slider widget, so you'll need to grab the id of your slider. Make the adjustments to the width to your liking.

#genesisresponsiveslider-widget-5 {
width: 550px;
float: left;
}

---

Love coffee, chocolate and my Bella!

[kathiemt]

Thanks everyone, I had someone else come up with the answer for me last night and the site is now as I wanted it at http://www.bsbc.org.au.

I like what Anita has done above too.

The instructions I was given worked a treat. Just enter this into the CSS code.

#genesisresponsiveslider-widget-2 {
float: left;
width: 70%;
}

#text-9 {
float: right;
width: 28%;
}

---

Virtual Assistant & Nature Photographer
Kathie Thomas: VADirectory – Click here for Australian images

[Anita]

Looks good @kathiemt!

---

Love coffee, chocolate and my Bella!

[Author]

Posts