Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
July 18, 2014 at 1:09 am #292748
Hi, I want to create a form so my users can signup to my service, but the problem is that the theme always apply his CSS over my CSS.
So for example, the element INPUT have an attribute “block” but that give me problems.
I try to create the entire thing with the code block but it’s not working
This is the code of the form:
<div class="row white"> <div class="container newsletter"> Receba as novidades por email. <input type="text" placeholder=" (Email address hidden if logged out) "> <button class="button"> <span>Receber</span> </button> </div> </div> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 60px 0; font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; font-size: 22px; background: #000; color: #FFF; } .row { padding: 30px; } .white { background: #FFF; color: #000; } .container { margin: 0 auto; max-width: 100%; width: 940px; } input { height: 50px; width: 300px; border: none; background: #EEE; margin-right: 20px; margin-left: 30px; -webkit-box-shadow: inset 0 4px 0 rgba(0,0,0,0.06); -moz-box-shadow: inset 0 4px 0 rgba(0,0,0,0.06); box-shadow: inset 0 4px 0 rgba(0,0,0,0.06); padding: 0 15px; } input:focus { background: #F3F3F3; } .button, input{ font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; font-size: 22px; color: #000; text-decoration: none; display: inline-block; } .button { height: 50px; background: #CDDB28; text-transform: uppercase; font-weight: 600; -webkit-box-shadow: 0 4px 0 #A3B021; -moz-box-shadow: 0 4px 0 #A3B021; box-shadow: 0 4px 0 #A3B021; padding: 0 50px; border: none; cursor: pointer; -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .button:active { background: #A3B021; -webkit-box-shadow: inset 0 4px 0 #8D931D; -moz-box-shadow: inset 0 4px 0 #8D931D; box-shadow: inset 0 4px 0 #8D931D; } .button span { display: block; } .button:active span { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); -o-transform: translateY(4px); transform: translateY(4px); } textarea, input { outline: none; } </style> <script> $('.button').click(function() { var rowHeight = $('.row').height(); $('.newsletter').fadeOut(500, function() { $('.row').height(rowHeight); $(this).html('<strong>Quase lá!</strong> <br />Verifique sua caixa de email para confirmar a assinatura.'); $(this).fadeIn(500); }); }) </script>
July 18, 2014 at 1:12 am #292749Also how we can add a code box like the box above? with the stripes and the correct layout?
because I want to show a little JS code to my visitors, but when I use the code box, the entire code is align to the left and the structure is lost and looks uglyJuly 18, 2014 at 1:49 am #292753Hi!
Can you post a link to the page where you are trying this form?
Regarding showcasing code, do it this way: http://screencast.com/t/XxKPgqNpTT
Cheers!
Josue -
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.