Drupal自带的语言切换器,可以在区块中启用,但是区块只能显示在黄色区域内,如图:
如何让它显示在 顶部的Logo 图片的右下角呢?
去修改 html.tpl.php
首先,复制一份 html.tpl.php 放到我们当前主题 的目录的模板文件夹下,如 sites/all/themes/your_theme/templates
修改代码:
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" <?php print $html_attributes; ?>><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" <?php print $html_attributes; ?>><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" <?php print $html_attributes; ?>><![endif]-->
<!--[if IE 8]><html class="lt-ie9" <?php print $html_attributes; ?>><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html <?php print $html_attributes . $rdf_namespaces; ?>><!--<![endif]-->
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php if ($default_mobile_metatags): ?>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_respond_js): ?>
<!--[if lt IE 9]>
<script src="<?php print $base_path . $path_to_zen; ?>/js/html5-respond.js"></script>
<![endif]-->
<?php elseif ($add_html5_shim): ?>
<!--[if lt IE 9]>
<script src="<?php print $base_path . $path_to_zen; ?>/js/html5.js"></script>
<![endif]-->
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<ul class="myown-language-switcher"> <li class="myown-li"><a href="/drupal_fllcc/zh-hans/">[简体中文]</a></li> <li class="myown-li"><a href="/drupal_fllcc/en/">[英语]</a></li> </ul>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
下面就是调整CSS 让其显示在合适的位置的问题了
调整老半天,也无法解决适应浏览器的问题
一旦用了 z-index 属性,这块东西就会跟着浏览器的大小变化而变化
最终找到了这样一种实现方案:
简单来说,Logo图片是个IMG,中英文切换器是个ul li 标签
与其让 ul li 标签去浮在 IMG 上,不如让 IMG 作为 ul li 标签的 背景图像
1,找到Druapl系统中输出 LOGO 图片的代码,替换为 中英切换器的代码
2,设置ul 的CSS
代码这次不在 html.tpl.php 中了,而是在 page.tpl.php 中
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
<?php endif; ?>
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"></a>
<ul style="background:url(<?php print $logo; ?>) no-repeat" class="myown-language-switcher">
<li class="myown-li"><a href="/drupal_fllcc/zh-hans/">[简体中文]</a></li>
<li class="myown-li"><a href="/drupal_fllcc/en/">[英语]</a></li></ul>
<?php endif; ?>
并且添加CSS代码(我们这里用的背景图片本身是 10000*140px 大小的)
.myown-language-switcher { position:relative; left:0px; height:140px; width:1000px; font-size:15px; margin:0px; } .myown-li{ padding-right:20px; text-align:right; }问题得到解决。