Call WP Modal Login with image instead of text - PHP

http://wordpress.org/plugins/wp-modal-login/
http://wp-modal-login.colegeissinger.com/

add_modal_login_button( $login_text = 'Login', $logout_text = 'Logout', $logout_url = '', $show_admin = true)

I am using the above code (with different set values) that I received from the 2nd link from the top... it creates a hyperlink to call the WP Modal Login window via PHP. Basically, it is used for calling it on a custom page, which I am currently doing.

I have found that the text hyperlink that the code snippet creates to open the modal window for logging in sorta blends in with the rest of the site, so I want to use a hyperlinked image that I have created instead. Unfortunately, my programming knowledge is highly limited and I have no clue what to do here

Would someone be able to help me out with this? Please respond ASAP. Thanks in advance!

  • signed_up

    @Vaughan

    a.login.wpml-btn {
       #000000 url('/path-to-your-button/image.png') no-repeat fixed center;
    }

    So this code would replace the text hyperlink with that image and that image would act as the hyperlink?

    change #000000 to any colour you want #000000 = black

    but you can use proper names, such as red, white, black, gray, blue and so on.

    Sorry, my css skills are extremely poor... What does this color even affect?

    Please respond ASAP. Thanks in advance

  • Vaughan

    hiya

    yes, that will add an image as the background so if you have a button image it will be the background image

    the text of the link will then be overlayed on the image you choose. the colour #00000 will be the colour of the text.

    in the case of the page you linked to, the link text 'Demo Login' will be overlayed on top of the background image and it's colour (if using #000000) will be black.

    you don't actually have to have an image though, you can actually use pure CSS to create a button.

    something like this

    a.login.wpml-btn {
    	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
    	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
    	box-shadow:inset 0px 1px 0px 0px #f29c93;
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #290b0b) );
    	background:-moz-linear-gradient( center top, #fe1a00 5%, #290b0b 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#290b0b');
    	background-color:#fe1a00;
    	-webkit-border-top-left-radius:20px;
    	-moz-border-radius-topleft:20px;
    	border-top-left-radius:20px;
    	-webkit-border-top-right-radius:20px;
    	-moz-border-radius-topright:20px;
    	border-top-right-radius:20px;
    	-webkit-border-bottom-right-radius:20px;
    	-moz-border-radius-bottomright:20px;
    	border-bottom-right-radius:20px;
    	-webkit-border-bottom-left-radius:20px;
    	-moz-border-radius-bottomleft:20px;
    	border-bottom-left-radius:20px;
    	text-indent:0;
    	border:1px solid #d83526;
    	display:inline-block;
    	color:#ffffff;
    	font-family:Arial;
    	font-size:14px;
    	font-weight:bold;
    	font-style:normal;
    	height:40px;
    	line-height:40px;
    	width:120px;
    	text-decoration:none;
    	text-align:center;
    	text-shadow:1px 1px 0px #b23e35;
    }
    .wpml-btn:hover {
    	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #290b0b), color-stop(1, #fe1a00) );
    	background:-moz-linear-gradient( center top, #290b0b 5%, #fe1a00 100% );
    	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#290b0b', endColorstr='#fe1a00');
    	background-color:#290b0b;
    }
    .wpml-btn:active {
    	position:relative;
    	top:1px;
    }

    the above will create a red button with a black gradiant and rounded corners.

    you can use this to generate CSS for any button you like. http://www.cssbuttongenerator.com/

    this will also give you some great tips on CSS http://w3schools.com (it might look daunting, but if you really want to learn, it's a superb site & it's free, and even professional developers use it as it's great for referring to.

    hope this helps

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.