We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Changin button in WebLoginPE

    • 8416
    • 173 Posts
    echaland Reply #1, 18 years, 5 months ago
    Hello,
    I’d like to change buttons in the WebLoginPE template from default button to gif.

    For instance I want to change: 
    <button type="submit" id="wlpeRegisterButton" name="service" value="registernew">Register</button>

    to:
    <input type="image"  id="wlpeRegisterButton" name="service"  value="registernew" src="[(base_url)]assets/templates/myProj/images/submit.gif" alt="Register New User" class="button" />


    Once I use the input type="image" the service login doesn’t get called anymore. What am I doing wrong?
    Thank you.
      http://www.chalandsweb.com
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 18 years, 5 months ago
      why not use the submit button and give it your .gif as a background in the CSS?
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 8416
        • 173 Posts
        echaland Reply #3, 18 years, 5 months ago
        Ok, thanks. I should have thought about it myself :-(
          http://www.chalandsweb.com
          • 5452
          • 41 Posts
          ClevelandSlim Reply #4, 18 years, 2 months ago
          Quote from: sottwell at Apr 01, 2008, 11:53 AM

          why not use the submit button and give it your .gif as a background in the CSS?

          Can you explain this approach further? This is PRECISELY the problem I am having.

          Is this the only resolution?

          All the best,
          ~Slim~
            • 26260
            • 12 Posts
            sauffaus Reply #5, 18 years, 2 months ago
            Well... it would seem, that css is what u need... just style the buttons, instead of transforming the html into "something else".

            So the steps to use css is these:
            1) In your html, place the output of WebLoginPE in a div with a class of "WhateverYouLike".
            2) then setup the css like this:
            /*General attributes for all the buttons*/
.WhateverYouLike button {
    width:50px;font-size:9px;line-height:9px;text-align:center;overflow:hidden;
    margin:0; padding:0; border:1px solid #000;
    background:url(img/ButtonImage1.png) transparent no-repeat scroll 0px 0px;
}
/*Now: change the background-image for any individual button via it's id selector*/
.WhateverYouLike #wlpeLoginButton { background-image:url(img/ButtonImage2.png) }
.WhateverYouLike #wlpeReminderButton { background-image:url(img/ButtonImage3.png }
.WhateverYouLike #wlpeRegisterButton { background-image:url(img/ButtonImage4.png }
.WhateverYouLike #wlpeResetButton { background-image:url(img/ButtonImage5.png }
.WhateverYouLike #wlpeResetCancelButton { background-image:url(img/ButtonImage6.png }


            ... thats pretty much it... I hope this helps you smiley
              Creativity is 1% inspiration and 99% perspiration.