Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help: Wordpress submit button image replacement (hover))

    Hey guys, I'm pulling my hair out over here. I hope you can help. It would be much appreciated.

    I'm customizing a wordpress theme and have an email capture form plugin (WP Email Capture) with name-email-submit button. The form is very basic and I am changing the submit button to an image rollover button. I am working with MAMP on a local host to view instead of being live.

    I could be going about this all wrong because I'm a bit of a newb.

    My problem:

    The rollover and the button works but I have this damn border around the button an it is driving me crazy! I can't get rid of the border. Also, The button shows up like it can't find the image. Why is this happening? When I remover the src="my image" it show the text "submit" and the border. What do I need to do here? lol

    Code:
    <label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" size="42" type="text" class="wp-email-capture-name"><br/>
    
    	<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" size="42" type="text" class="wp-email-capture-email"><br/>
    
    	<input type="hidden" name="wp_capture_action" value="1">
    
    <input name="input" type="image" height="37" width="115" src="subscribebtn.jpg"  class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >
    
    </form>
    Code:
    #wp_email_capture {
    	
    }
     
    #wp_email_capture label {
    	text-decoration: none;
    	border:none;
    }
     
    #wp_email_capture input {
     	margin: 15px 0 0 0;
    	line-height: 15px;
    	text-decoration: none;
    	border:none;
    	
    }
     
    #wp_email_capture_2 {
     
    }
     
    #wp_email_capture_2 label {
     
    }
     
    #wp_email_capture_2 input {
     
    }
    
    input[type=image] { 
    	height: 37px;
    	width: 115px;
    	background-image:url(../../plugins/wp-email-capture/inc/subscribebtn.jpg);
    	text-decoration: none;
    	border:0;
    	display: block;
    	text-indent: -999em;
     }
    input:hover[type=image] { 
    	height: 37px;
    	width: 115px;
    	background-image:url(../../plugins/wp-email-capture/inc/subscribebtnon.jpg); 
    	text-decoration: none;
    	border:0;
    	display: block;
    	text-indent: -999em;
    }


    This is what is looks like when I remover the src="myimage" from the html


    Any help would be amazing. Thanks in advance!

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not know at all what and to what code you write. I actually wanted to ask you. Do you know the name of the theme on this website?. I'll try to find through google bro.......... CaN u HELP ME?????

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Source code says it is twentyten theme.

    So nobody has any idea about why my button is doing this?

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try

    Code:
    button.wp-email-capture-submit {
        outline: none;
        border: none;
    }
    what browsers is the border showing up in?



    on a side note, I don't believe this has full browser support & I believe they are suppose to have ""
    http://kimblim.dk/css-tests/selectors/
    Code:
    input[type="image"]
    input:hover[type="image"]
    Last edited by Sammy12; 11-06-2011 at 11:29 PM.

  • Users who have thanked Sammy12 for this post:

    insert_car (11-06-2011)

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the tips. I tried both but it didn't change it. This is totally mind boggling to me. I have tried all kinds of stuff and cant figure this out.

    It seems to view correctly in firefox but not in chrome or safari. I cannot check IE.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    is there anyway you could post a live link? or the full code

    if you can, then consider this problem solved these little things are easy when you use inspect element

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I could post live but I could post the full code. Full of html as well as css?

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yes, live is preferred but full code will do

  • #9
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    FORM CODE

    PHP Code:
    <?php 



    function wp_email_capture_form($error 0)

    {

    $url get_option('home');
    $url addLastCharacter($url);

     
    ?> <div id="wp_email_capture"><form name="wp_email_capture" method="post" action="<?php echo $url?>">

         <?php if (isset($_GET["wp_email_capture_error"])) {

            
    $error sanitize($_GET["wp_email_capture_error"]);

            echo 
    "<div style='width:80%;background-color: #FFCCCC; margin: 5px;font-weight'>Error: "$error ."</div>";

        } 
    ?>

        <label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" size="42" type="text" class="wp-email-capture-name"><br/>

        <label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" size="42" type="text" class="wp-email-capture-email"><br/>

        <input type="hidden" name="wp_capture_action" value="1">
        

    <input name="input" type="image" height="37" width="115" src="subscribebtn.jpg"  class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >


    </form>

    </div>

    <?php if (get_option("wp_email_capture_link") == 1) {

            echo 
    "<p style='font-size:10px;'>Powered by <a href='http://www.gospelrhys.co.uk/plugins/wordpress-plugins/wordpress-email-capture-plugin' target='_blank'>WP Email Capture</a></p>\n";

        }

    }



    function 
    wp_email_capture_form_page($error 0)

    {

    $url get_option('home');
    $url addLastCharacter($url);

     
    $display .= "<div id='wp_email_capture_2'><form name='wp_email_capture_display' method='post' action='" $url ."'>\n";

         if (isset(
    $_GET["wp_email_capture_error"])) {

            
    $error sanitize($_GET["wp_email_capture_error"]);

            
    $display .= "<div style='width:80%;background-color: #FFCCCC; margin: 5px;font-weight'>Error: "$error ."</div>\n";

        } 

        
    $display .= "<label class='wp-email-capture-name'>Name:</label> <input name='wp-email-capture-name' type='text' class='wp-email-capture-name'><br/>\n";

        
    $display .= "<label class='wp-email-capture-email'>Email:</label> <input name='wp-email-capture-email' type='text' class='wp-email-capture-email'><br/>\n";

        
    $display .= "<input type='hidden' name='wp_capture_action' value='1'>\n";

        
    $display .= "<input name='Submit' type='submit' value='Submit' class='wp-email-capture-submit'></form></div>\n";

        if (
    get_option("wp_email_capture_link") == 1) {

            
    $display .= "<p style='font-size:10px;'>Powered by <a href='http://www.gospelrhys.co.uk/plugins/wordpress-plugins/wordpress-email-capture-plugin' target='_blank'>WP Email Capture</a></p>\n";
        } 



        return 
    $display;

    }



    function 
    wp_email_capture_display_form_in_post($content)

    {

        
    $get_form wp_email_capture_form_page();

        
    $content str_replace("[wp_email_capture_form]"$get_form$content);

        return 
    $content;

    }





    ?>

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    hm do you have the css for it?

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The CSS is huge, lol. WP Email Capture css is at the very bottom.

    EDIT: code was to long to post so i just posted the css in question

    Code:
    
    /***** NEWSLETTER EMAIL CAPTURE ********************/
    
    	
    #wp_email_capture {
    	outline: none;
        border: none;
    }
     
    #wp_email_capture label {
    	text-decoration: none;
    	border:none;
    	outline: none;
    
    }
     
    #wp_email_capture input {
     	margin: 15px 0 0 0;
    	line-height: 15px;
    	text-decoration: none;
    	border:none;
    	outline: none;
    
    	
    }
     
    #wp_email_capture_2 {
     
    }
     
    #wp_email_capture_2 label {
     
    }
     
    #wp_email_capture_2 input {
     
    }
    
    input[type="image"] { 
    	height: 37px;
    	width: 115px;
    	background-image:url(../../plugins/wp-email-capture/inc/subscribebtn.jpg);
    	text-decoration: none;
    	border:0;
    	display: block;
    	text-indent: -999em;
    	outline: none;
    
     }
    input:hover[type="image"] { 
    	height: 37px;
    	width: 115px;
    	background-image:url(../../plugins/wp-email-capture/inc/subscribebtnon.jpg); 
    	text-decoration: none;
    	border:0;
    	display: block;
    	text-indent: -999em;
    	outline: none;
    
    }

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    post the live version then, the code you gave me is not enough

    there are a lot of free web servers out there in case you need a temporary one

  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok I just ran the inspector in chrome from my local host preview page of the site. It seems it can't find my src image in the html. I don't know why because everything is linked correctly. I even tried changing it a few times because I thought that might have been the problem yesterday. How can I get it to link correctly?

  • #14
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    lol I am not a mind reader, I just need a live view

  • #15
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's treating this as a broken link to an image.

    Code:
    <input name="input" type="image" height="37" width="115" src="subscribebtn.jpg"  class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •