• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Outreach theme, move home widget area

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: home widget area, outreach

  • This topic has 28 replies, 6 voices, and was last updated 10 years ago by kathiemt.
Viewing 20 posts - 1 through 20 (of 29 total)
1 2 →
  • Author
    Posts
  • January 25, 2013 at 3:24 pm #14793
    Paul
    Member

    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

    January 25, 2013 at 6:49 pm #14918
    Paul
    Member

    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

    January 25, 2013 at 6:53 pm #14919
    Paul
    Member

    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

    January 25, 2013 at 7:02 pm #14921
    Anita
    Keymaster

    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!

    January 25, 2013 at 7:09 pm #14922
    Paul
    Member

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


    Grace and Peace,
    Paul

    January 25, 2013 at 7:53 pm #14928
    Anita
    Keymaster

    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!

    January 25, 2013 at 8:04 pm #14935
    Paul
    Member

    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

    January 25, 2013 at 8:08 pm #14936
    Anita
    Keymaster

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


    Love coffee, chocolate and my Bella!

    January 28, 2013 at 11:14 am #15586
    Paul
    Member

    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

    January 31, 2013 at 5:10 pm #16877
    Paul
    Member

    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

    January 31, 2013 at 6:54 pm #16912
    Anita
    Keymaster

    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!

    January 31, 2013 at 7:22 pm #16923
    Susan
    Moderator

    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

    January 31, 2013 at 7:59 pm #16938
    Anita
    Keymaster

    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!

    February 13, 2013 at 10:54 am #20089
    dkrause
    Member

    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.

    March 16, 2013 at 5:21 am #27549
    kathiemt
    Participant

    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

    March 17, 2013 at 8:59 am #28550
    dkrause
    Member

    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.

    March 17, 2013 at 10:32 am #28595
    Anita
    Keymaster

    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!

    March 17, 2013 at 10:52 am #28599
    Anita
    Keymaster

    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!

    March 17, 2013 at 4:42 pm #28689
    kathiemt
    Participant

    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

    March 17, 2013 at 7:37 pm #28715
    Anita
    Keymaster

    Looks good @kathiemt!


    Love coffee, chocolate and my Bella!

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 29 total)
1 2 →
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble