Community Forums › Forums › Archived Forums › Design Tips and Tricks › How add a full width sign up form in the magazine pro
- This topic has 3 replies, 2 voices, and was last updated 10 years, 5 months ago by
monicasalazar.
-
AuthorPosts
-
May 29, 2014 at 5:57 am #107268
monicasalazar
MemberHi!
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.
May 29, 2014 at 6:12 am #107271Brad Dalton
ParticipantThe 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/
May 30, 2014 at 10:49 am #107508monicasalazar
MemberThank you so much Brad, let me follow your instructions and later I will tell you if I can make it works 😉
September 8, 2014 at 12:32 am #123294monicasalazar
MemberHello 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. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.