background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount

Replacing a submit button with an image using CSS
Eric.London's picture
Submitted by Eric.London on 12/18/2008
Tags:
  • 1 comment
  • Share this

I just created a new image to replace the generic submit button appearance, when I remembered the submit buttons are type submit, not type image. I decided to use some quick CSS instead. The trick is adding a background image to the submit button, and then *hiding* the button text by adding padding-top CSS that is greater than the height of the image, and adding "overflow: hidden" to ensure the text does not get pushed outside the button...

form#MYFORMID #edit-submit {
  height: 22px;
  width: 73px;
  background: url('images/button_submit.jpg') no-repeat;
  border: none;
  overfow: hidden;
  padding-top: 25px;
}

Replacing the Confirm Delete Node Cancel Links with Buttons
Eric.London's picture
Submitted by Eric.London on 4/25/2008
Tags:

Here is a way to globally replace all the cancel links on the confirm delete node pages...

<?php
function MYMODULE_form_alter($form_id, &$form) {
  // ...code...
  if ($form_id == 'node_delete_confirm') {
    _MYMODULE_form_alter_node_delete_confirm($form);
  }
  // ...code...
}

function _MYMODULE_form_alter_node_delete_confirm(&$form) {
  if (is_array($form['actions']['cancel'])) {

    // convert the html from the link into an xml object to get at its attributes       
    $o = simplexml_load_string($form['actions']['cancel']['#value']);

    // replace the link with a new button
    // NOTE: jQuery is added afterwards to convert the button type from a submit to a button       
    $form['actions']['cancel'] = array(
      '#type' => 'button',
      '#value' => 'Cancel',
      '#attributes' => array(
        'onClick' => "window.location = '" . urldecode($o['href']) . "';",
      ),
      '#suffix' => "
        <script type='text/javascript'>
          $(document).ready(function(){
            $('form#node-delete-confirm input#edit-cancel').attr('type', 'button');
          });
        </script>"
    );
  }
}
?>

Change default drupal buttons and links using jQuery
Eric.London's picture
Submitted by Eric.London on 4/14/2008
Tags:

Today, I was creating a theme and the design called for custom button images across the site. Here's how I changed the node deletion confirmation page (button and link) into images using jQuery...

<?php
// per delete buttons
$(document).ready(function(){
  $('form input#edit-delete').attr({
    src: themePath + "/images/button_delete.jpg",
    type: "image"
  });
});

// per cancel links
$(document).ready(function(){
  $("form div.container-inline a[@innerHTML='Cancel']").html("<img src='" + themePath + "/images/button_cancel.jpg' />");
});
?>

Adding an image to a submit button using jQuery
Eric.London's picture
Submitted by Eric.London on 4/10/2008
Tags:

I created a custom registration form in a module using the forms api. When I received the design for the project, there was an image input type instead of a regular submit, so I added a little jQuery to the theme to change the input type and src.

<?php
themePath = "<?php print base_path() . path_to_theme(); ? >";
$(document).ready(function() {
  $('#MY-FORM-ID #edit-submit').attr({
    src: themePath + "/images/createAccount.jpg",
    type: "image"
  });
});
?>

Syndicate content