Changing Submit Button to Image on Homepage Login

Simple thing to do, Yet, for some reason it isn't.  OK, I wanted to change the grey submit button of the Homepage login block with an image to match the rest of the buttons on our site.  So I pull up design_inc.php and make the following changes:

array(
 'type' => 'input_set',
 'colspan' => false,
  0 => array(
  // 'type' => 'submit',
  'type' => 'image',
  'src' => 'loginbuttonoff.png',
  'name' => 'LogIn',
  'caption' => '',
   'value' => _t('_Login'),
   ),

Save the code out, uploaded it to the server, clear caches, reload the page and yes, the type is changed to image but it won't include the src="file.ext" to the input tag.  OK, I thought the code that generated the form read through the array and built the input tag for the submit button; but it doesn't seem to be the case.  So I spend several hours searching through the files without a lot of luck.  Can anyone give me some information on this?

I thought maybe after searching for four freaking hours that BxBaseFormView was the script:

   function genInputButton(&$aInput)
    {
        // clone attributes for system use ;)
        $aAttrs = empty($aInput['attrs']) ? array() : $aInput['attrs'];

        // add default className to attributes
        $aAttrs['class'] = "form_input_{$aInput['type']} bx-btn" . (isset($aAttrs['class']) ? (' ' . $aAttrs['class']) : '');
        $aAttrs['type']  = $aInput['type'];
        $aAttrs['src']  = $aInput['src'];
        $aAttrs['name']  = $aInput['name'];
        $aAttrs['value'] = $aInput['value'];

        // for inputs with labels generate id
        if (isset($aInput['label']))
            $aAttrs['id'] = $this->getInputId($aInput);

        // for checkboxes
        if(isset($aInput['checked']) && $aInput['checked'])
            $aAttrs['checked'] = 'checked';

        $sAttrs = $this->convertArray2Attrs($aAttrs);

        $sCode = <<<BLAH
            <div class="button_wrapper">
                <input $sAttrs />
            </div>

However, it isn't.  So what freaking script is generating the freaking button for the homepage login/join message block?  I know one thing for sure, Dolphin is the biggest freaking time waster I have ever come across because you can not find anything.  This should have been a simple one minute change out.

This is how Democrats would change the button.  Republicans would just the button's CSS.

HL, The type of the input tag is submit.  That creates a button. I don't want the submit button.  Yes, I could use CSS to change the appearance to a degree of the button but I don't want a standard submit button.

Thank you for your answer; however, that was not the question.  Have a nice day

Here is another area that comes into play.  Often certain elements are shared across the interface; that is common in CMS and similar applications.  Therefore, you have to know that some elements share common style sheets entries.  For example, I want to change the appearance of the profile comments editor.  However, I have found out that the reply box for the profile comments share the same CSS as the editor and changes to the Editor will be applied to the replies.  So it is necessary to hack the code so that the editor and reply boxes don't share a common style element.

Therefore, HL, my guess would be if I changed the CSS for the button, it would most likely get applied site wide and I don't want that.

I have two mods to edit blocks and both don't have the homepage login block.  That block does not just appear by magic, there is freaking code somewhere that creates it but I don't where it is located.  So if someone would be so kind to tell me, either in the files or the database, I don't care where, I just want to edit the freaking thing.

The button images are indeed controlled via css like HL stated.

The type submit or button is just the behavior. submit will submit the form with clicked, the other type does not.

Anyhow. The images are CSS controlled. .bx-btn in common.css at line 580 is one of them. There are other CSS classes that need to be changed but i do not have time right now to find them all.

Anyhow, you are right that changing it will affect all buttons on the site, but there are apparently things about CSS that your not aware of.

You can target just that one button by creating a new css target for .bx-btn in common.css that targets css classes within the ID of that form.

Example

#login_box_form .bx-btn {

CSS code.

}

In that example only the .bx-btn class within the #logon_box_form ID will be targeted.

When and if i get more time today i will provide a working example. Most buttons are constructed with a left and a right image which allows the button to change sizes as needed based on text in the button for various words and translated versions.

HL may provide a example as well. But yes believe it or not, it can all be done in CSS.

EDIT: Now that i think of it, dolphin 7.1 no longer uses two images for buttons. But should still be able to be done with CSS alone.

You could also just edit the login form template.

There are several depending on where the login is. page block, popup, ect. login_form.html would be a good start

I have been doing HTML and CSS for  a very long time; and no, not using Dreamweaver.

You can use type = image and it will submit the form. just do a search to learn.

I looked for the login form for that homepage block and could not find it.

Thanks for you help, it is appreciated even if I do get frustrated with Dolphin and sound a bit, uh, you know. :-)

 RE:

 Well here ya go, Miss  doing HTML and CSS for  a very long time.  Just add something like this to the end of common.css

#login_box_form .bx-btn {
background-color:transparent;
background:url('../images/BigOleFckingButtonSprite.jpg');
background-size:180px 180px;
background-repeat:no-repeat;
height:180px;
width:180px;
color:transparent;
background-position:0 0;
}

#login_box_form .bx-btn:hover {
background-color:transparent;
background:url('../images/BigOleFckingButtonSprite.jpg');
background-size:180px 180px;
background-repeat:no-repeat;
height:180px;
width:180px;
color:transparent;
background-position:-180px 0;
}

Best regards,

Mr. also been doing html and css for a very long time but probably not as long or as well as Deano.

P.S.  Don't forget to upload BigOleFckingButtonSprite.jpg to your template's images folder.