SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)

    Cleaning Up Drupal Form and/or Controls Theme HTML (eliminating useless wrappers)

    I'm in the process of developing my personal site and have used Drupal 7. The only thing I have really had to do is create my own theme and clean-up the front-end HTML so that I can actually be proud of my site. The only place this seems to be proving difficult is the default login form and a custom contact form created using webform. The admin can maintain the default HTML trash but the front-end needs major work to be something that represents by skill level well. So if anyone else has tackled this issue I would be glad to have some pointers.

    Thanks
    The only code I hate more than my own is everyone else's.

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would likely be easier (relatively) to tweak the default contact form using functions in template.php than trying to alter Webform's output. Ten minutes with that module was more than enough to put me off it when I had a very similar need to yours. You can also create a template (tpl.php file) for the contact form using this method, although I haven't tried that. Functions in template.php would also be the best way to tidy the login form, too; though I'm not sure why you would need to show it to visitors unless, of course, you're going to let Joe Public and his mates have accounts for your personal site.

    I won't lie to you: theme functions are pain in the backside, but most of what you are likely to want to change is doable. If you mention specifics, there is a small rat's chance that I might have already found the very solution! Failing that, I'll happily give any pointers that I can.

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,030
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    As Mat30 says, you can override the default login with template.php + a login template. I've done this a lot with D6 but I haven't tried with D7 yet...

    Here's how I did it with D6

    In template.php I added two functions to override the OEM login
    PHP Code:
    <?php
    /**
    * Function to set up login preprocessor 
    * so we can use our own login template and insert tailor made content.
    */
    function my-theme-name_theme() {
      return array(
        
    'user_login' => array(
          
    'template' => 'user-login',
          
    'arguments' => array('form' => NULL),
        ),
        
    // other theme registration code...
      
    );
    }

    /**
    * Function to preprocess Login and insert custom welcome text
    */
    function my-theme-name_preprocess_user_login(&$variables) {

      
    $variables['form']['name']['#size'] = 35;
      
    $variables['form']['pass']['#size'] = 35;
      
      
    $variables['intro_text'] = t('Welcome to my super duper site. Please use the fields below to login.');
      
    $variables['rendered'] = drupal_render($variables['form']);
      
    $variables['password_retrieve'] = t('If you have misplaced your user name or password, click <a href="/user/password"><strong>here</strong></a> to retrieve them.');
    }
    Ok, so now in the first function, I've told Drupal to use a template called user-login.tpl.php

    In the second function I've modified the login fields because I didn't like the massive long fields Drupal makes and I've added some variables we can pulll out in user-login.tpl.php

    * I added a password retrieval link to the login form because I used CSS to hide it on this particular site.

    Here's my user-login.tpl.php
    HTML Code:
    <p><?php print $intro_text; ?></p>
    <p><?php print $password_retrieve; ?></p>
    <div class="my-form-wrapper">
      <?php print $rendered; ?>
    </div>
    So as you can see I've rendered my intro text and password links and then wrapped the login form in my own div with a custom class so I can style it as I want to.

    This is a D6 version but the same idea can be applied to D7. I'm not sure how much of the syntax will need to be adjusted to work with the D7 API... Maybe none.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Alright, thanks for advice I'll have to do some trial and error here. Man… D7 is powerfully but to change mark-up is a damn pain in the @ss. If it wasn't my own portfolio site I would just leave it be.
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,030
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I think I know what you mean about it being a pain to change markup especially compared to D6 but it is more granular in the ----.tpl.php department so you actually have more control that you used to.

    It seems I always got to /modules/system, grab a copy of html.tpl.php and put it in my custom theme so I can modify it as needed. Usually just to force IE to the latest version:
    HTML Code:
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development


Bookmarks

Posting Permissions

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