Outreach theme, move home widget area

Community Forums Forums Design Tips and Tricks Outreach theme, move home widget area

This topic is: not resolved

This topic contains 28 replies, has 6 voices, and was last updated by  kathiemt 1 year ago.

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #14793

    Paul
    Participant
    Post count: 43

    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!

    #14918

    Paul
    Participant
    Post count: 43

    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. :-( )

    #14919

    Paul
    Participant
    Post count: 43

    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?

    #14921

    anitac
    Participant
    Post count: 6375

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #14922

    Paul
    Participant
    Post count: 43

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

    #14928

    anitac
    Participant
    Post count: 6375

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #14935

    Paul
    Participant
    Post count: 43

    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.

    #14936

    anitac
    Participant
    Post count: 6375

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #15586

    Paul
    Participant
    Post count: 43

    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?)

    #16877

    Paul
    Participant
    Post count: 43

    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.

    #16912

    anitac
    Participant
    Post count: 6375

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #16923

    Susan
    Moderator
    Post count: 7196

    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


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #16938

    anitac
    Participant
    Post count: 6375

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #20089

    dkrause
    Participant
    Post count: 27

    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.

    #27549

    kathiemt
    Participant
    Post count: 106

    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: VADirectoryClick here for Australian images

Viewing 15 posts - 1 through 15 (of 29 total)

You must be logged in to reply to this topic.