Side by Side Featured Section – Video & Optin Form in Sample Theme

[StephanieTreasure]

My Website link is http://www.StephanieTreasure.com

I am trying to achieve a similar effect as in this Website http://www.LoveandPassionCoach.com

I have installed a 2-widget Featured Section. So far I have been able to add the video. However, I am having trouble getting the image http://www.stephanietreasure.com/wp-content/uploads/2015/02/Free-Audio-Program-2.png to show from the Stylesheet AND getting the optin form which I have added in the 2nd (right) widget to show up on the website.

The code I used for the Featured section is:

Functions.php

add_action('genesis_after_header', 'wpsites_two_column_widgets');
/*** @author Brad Dalton* @example http://wpsites.net/* @copyright 2014 WP Sites */
function wpsites_two_column_widgets()
{
    if (is_front_page() && is_active_sidebar('left-column') || is_active_sidebar('right-column')) {
        echo '<div class="two-column-widgets">';
        echo '<div class="wrap">';
 
        genesis_widget_area('left-column',
            array(
                'before' => ' <div class="left-column widget-area">',
                'after'  => '</div>'
            )
        );
 
        genesis_widget_area('right-column', 
            array(
                'before' => '<div class="right-column widget-area">', 
                'after' => '</div>'
            )
        );
        
        echo '</div>';
        echo '</div>';
    }
}
 
genesis_register_sidebar(
    array(
        'id' => 'left-column',
        'name' => __('Left Column', 'wpsites'),
        'description' => __('This is the left column widget for the slider.', 'wpsites'),
    ));
 
genesis_register_sidebar(
    array(
        'id' => 'right-column',
        'name' => __('Right Column', 'wpsites'),
        'description' => __('This is the right column widget for genesis enews widget.', 'wpsites'),
    ));

and
Stylesheet

Slider 2 Thirds E-Mail Opt in Form 1 Third
--------------------------------------------------------------- */
.two-column-widgets {

color: #fff;
text-align: center;
height: 330px;
padding-top: 10px;
}

.two-column-widgets .wrap {
background-color: #FFe9ba;

}
 
.two-column-widgets .widget-title {
font-size: 30px;
color: #000;
text-align: center;
}
 
.left-column {	
float: left;
padding: 10px 10px 0;
padding: 1rem 1rem 0;
width: 50%;
}
 
.right-column {
color: #fff;
float: right;
padding: 10px 10px 0;
padding: 1rem 1rem 0;
width: 50%;

}
 
.right-column .enews-widget p {
color: #000;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
}
 
.right-column .enews-widget input[type="submit"] {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
zoom: 1;
}
 
.right-column .enews-widget input[type="submit"]:nth-child(n) {
filter: none;
}
 
.right-column .enews-widget input[type="submit"]:hover {
background-color: #fff;
color: #333;
}

Thanks in advance for your help.

http://www.stephanietreasure.com

[StephanieTreasure]

I was able to get the image to show on the right. However, I cannot get it to be in alignment with the video on the left.

Same thing with the Opt-in form which I added from the Appearance -> Widget side.

Here's my CSS:

/* Slider 2 Thirds E-Mail Opt in Form 1 Third
--------------------------------------------------------------- */
.two-column-widgets {

color: #fff;
text-align: center;
height: 330px;
padding-top: 10px;
}

.two-column-widgets .wrap {
background-color: #FFe9ba;

}
 
.two-column-widgets .widget-title {
font-size: 30px;
color: #000;
text-align: center;
}
 
.left-column {	
float: left;
padding: 10px 10px 0;
padding: 1rem 1rem 0;
width: 50%;
}
 
.right-column {
color: #fff;
float: right;
padding: 10px 10px 100px;
padding: 1rem 1rem 100px;
width: 50%;
background: url(http://www.stephanietreasure.com/wp-content/uploads/2015/02/Free-Audio-Program-2.png) no-repeat;
background-position: top right;
}
 
.right-column .enews-widget p {
color: #000;
padding-top: 0px;
padding-bottom: 100px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
}
 
.right-column .enews-widget input[type="submit"] {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
zoom: 1;
}
 
.right-column .enews-widget input[type="submit"]:nth-child(n) {
filter: none;
}
 
.right-column .enews-widget input[type="submit"]:hover {
background-color: #fff;
color: #333;
}

I appreciate any help I can get to rectify this.

[Brad Dalton]

Link to the source of the code please.

---

Tutorials for StudioPress Themes.

[StephanieTreasure]

This code comes from my Website at http://www.StephanieTreasure.com

Here is a file of the entire functions.php

https://gist.github.com/stephtreasure/02ab5f7f286586603bc6

[Brad Dalton]

Its my code from my site.

---

Tutorials for StudioPress Themes.

[StephanieTreasure]

Hello @braddalton

I wasn't trying to hide that. The very 1st code in this thread shows credit to your code. I haven't tried to edit that out. Not sure what your point is.

[Brad Dalton]

The point is my copyright policy clearly states do not re-publish my work.

You could have linked it.

Also, the SP forum rules state respect copyright.

---

Tutorials for StudioPress Themes.

[Hiker]

Hello Stephanie...

Wondering which theme template you're using for your are you site?

Thank you ...

Renee
619-838-8800

---

ReneeStern.com

[dbg888]

Renee

The theme is genesis sample http://my.studiopress.com/themes/genesis/

[Author]

Posts