首页 / 帖子
怎么修改drupal自带登入区块的样式

我用

    <?php
    $block = module_invoke('user', 'block_view', 'login');
    print render($block['content']);
    ?>

在tpl里调出用户登入区块,想把原来的样式去掉,加上自己的样式,应该怎么做?

6个答案
发布于:2014-08-21 21:42

样式可以复写,可以覆盖的,你只需要给前端工程师说把登陆框修改好看点,css写在style.css里面,就能搞定。

我的意思是,css可以覆盖已有的样式,不需去掉之前的。

所以,你的tpl里面也许不用直接调用drupal登陆框代码,而只需要后台配置block即可,只是或许,看你实际情况了。

YOYO
发布于:2014-08-21 23:38

既然用了module_invoke('user', 'block_view', 'login'),可以print_r($block)看一下结构。

比如想修改输入用户名的文本框的class:$block['content']['name']['#attributes']['class'] = array('a-class', 'b-class');

然后print render($block);

这样就可以了。

闻涛
发布于:2014-08-22 09:05

@37度男人 的方法就很容易实现


再分享下其他解决方法:


通过hook_form_alter修改属性,例如在主题template.php文件中,添加

function yourthemename_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == 'user_login_block'){
    $form['name']['#attributes']['class'][] = 'my-class';
  }
}

这样就可以为用户名input控件添加了「my-class」的类

要去除drupal自带的几个样式类名需要通过覆写系统默认主题,如 theme_textfield,在里面去掉样式名,但会影响其他控件,要单独指定登录block的话挺麻烦


另一种可行的方法,是通过覆盖 theme_user_login_block 函数

在template实现 hook_theme,如

/**
 * hook_theme()
 */
function themename_theme(){
  return array(
    'user_login_block' = array(
      'render element'=> 'form',
      'template' => 'user-login-block', // 加入这行则使用 user-login-block.tpl.php 模板文件输出
      'path' => path_to_theme().'/templates',
    )
  );
}

/**
 * theme_user_login_block()
 */
function themename_user_login_block($vars){
  $form = $vars['form'];
  //... 修改$form变量
  return drupal_render_children($form);
}

或使用 user_login_block.tpl.php 来输出表单,模板文件非常灵活,可以写出自己想要的dom格式,但是要对Drupal比较熟悉


发布于:2014-08-22 16:27

这里有一篇完美的讲解《Drupal 7 and bootstrap 3 theming the login form》:

http://www.hbensalem.com/php/drupal-7-and-bootstrap-3-theming-the-login-form/

跟你的要求基本吻合,就是通过theme的一些机制修改,不过赶脚drupal有时候修改到boostrapde 的时候,给一些element添加一些class,很麻烦。。

AnnyO
发布于:2014-08-22 16:52

下面介绍的玩法,给你高度定制的灵活性。
https://www.drupal.org/node/1167712#comment-5080586


如果领悟了这种玩法;基本上关于form的样式自定义都不在话下了。

YOYO
发布于:2014-08-23 23:39

感觉drupal大学回答问题人比原来多了,真好,非常感谢大家!

在猪跑啦看到一个方法,他是自己新建个登入block,然后在tpl中调用。

<div style="float:left; width:350px; border-right: solid 1px #ccc;">
<form action="/user?destination=node" id="user-login-form" method="post"> 
<div class="form-item">
<label for="edit-name">用户名</label>
<input class="form-text required" id="edit-name" maxlength="60" name="name"onblur="if(this.value=='')this.value=this.defaultValue" onfocus="if(this.value==this.defaultValue){this.value='';}else{this.select();}" size="20" tabindex="1" type="text" value="用户名" />
<label for="edit-pass">密码</label><input class="form-text required" id="edit-pass" name="pass"onblur="if(this.value=='')this.value=this.defaultValue" onfocus="if(this.value==this.defaultValue){this.value='';}else{this.select();}" size="20" tabindex="2" type="password" value="******" />
<div style="height:10px;"></div>
<input class="form-submit" id="edit-submit" name="op" tabindex="3" type="submit" value="登陆" />
<span class="field-suffix">&nbsp;&nbsp;&nbsp;&nbsp;<a href="/user/register">注册</a></span>
</div>
<input id="edit-user-login" name="form_id" type="hidden" value="user_login" />
</form>
</div>

我用了他这个办法,,,很灵活。可是不太明白,貌似代html并没有调用drupal的form,为什么drupal能认出这个登入表单呢?