How add a full width sign up form in the magazine pro

[monicasalazar]

Hi!
How can I add a sign up form like this (full width) in the magazine pro theme?
This is the example: http://mentemprendedora.com/

Thank you.

[Brad Dalton]

The code on that site is written to work on the Minimum Pro theme so may need tweaking to work on Magazine Pro:

.site-tagline {
	background-color: #BF392C;
	margin-top: 76px;
        padding: 5px 0;
	position: relative !important;
       -webkit-transition: all 0.1s ease 0.1s;
       -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
        transition: all 0.1s ease 0.1s;

}

.site-tagline p {
	margin: 0;
}

.site-tagline-left {
	float: left;
	width: 50%;
	color: #fff;
}

.site-tagline-right {
	float: right;
	width: 50%;
	position: relative !important;
}

.minimum .site-tagline {
	margin-top: 400px;
}

/* tagline form */

.site-tagline:hover .enews-widget input[type="submit"] {
background: url( images/image.png) no-repeat; 
  -webkit-transition: all 0.1s ease 0.1s;
     -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
          transition: all 0.1s ease 0.1s;
}

.site-tagline:hover {
 background-color: #63213B;
  -webkit-transition: all 0.1s ease 0.1s;
     -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
          transition: all 0.1s ease 0.1s;
}
.site-tagline-right .enews-widget input[type="submit"] {
background: url(images/image2.png)  no-repeat;
background-color: transparent;
right:10px;
bottom: -25px;
width: 90px !important;
height: 90px !important;
z-index: 2;
float: center;
position: absolute;
  -webkit-transition: all 0.1s ease 0.1s;
     -moz-transition: all 0.1s ease 0.1s;
       -o-transition: all 0.1s ease 0.1s;
      -ms-transition: all 0.1s ease 0.1s;
          transition: all 0.1s ease 0.1s;
}


.site-tagline-right .enews-widget input {
    	width: 40% !important;
	font-size: 12px;
	height: 40px !important;
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	margin-left: 5px;

}

You can grab the code using a tool like Chrome http://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

Or Firebug.

Uses the Genesis eNews Extended widget.

I would hook in a new widget area with a div class named site-tagline http://wpsites.net/web-design/adding-new-widget-areas-in-studiopress-themes/

---

Tutorials for StudioPress Themes.

[monicasalazar]

Thank you so much Brad, let me follow your instructions and later I will tell you if I can make it works 😉

[monicasalazar]

Hello again
I have tried follow your instructions, but it is still difficult for me the conditionals, could you tell me how can I make the new widget appears on all posts and pages?
Thank you.

[Author]

Posts