zabbix二次开发之借用zabbix样式

 

     最近搞zabbix二次开发有点痛苦,尾毛呢,因为我现在开始搞一些前端的货了。zabbix这玩意前后端都没有分开,所以灰常蛋疼。

 

    前面一篇文章说过了,为了搞开前后端,我把smarty弄了进来,但遗留了一个问题,css咋办?我比较菜,

不会手写css,所以打算用前端框架easyui呀这些去搞,但仔细想了下还是不合适。现在zabbix页面已经有了

一套自己的样式,你新做的功能如果风格不统一,那再牛逼也不好看呀。所以我打算抄下zabbix的样式。

 

1.zabbix样式:

      先随便打开一个zabbix的页面,看下现在的css是怎么处理的:

 

                                               image

                                             

     zabbix自身的css主要是引用了css.css这么一个css文件,里面又import了style目录下的一大堆东西。

    我不大熟css,所以没仔细看了,而且我要的是抄,既然是抄,那就更不用关心怎么实现的了。

 

2.引用zabbix样式:

 

           其实引入zabbix样式前面我也已经提过了,就是你引用include/page_header.php就可以了。没别的,

就这一个文件,你值得拥有。当然你也可以直接引用css.css,不过那样的话页首的菜单也需要你自己去写,比较麻烦。

 

3.对组件设置class:

     

          引入了zabbix的css样式只是一个开始,大家都知道css一般都是结合class、id这些选择器来用的,

所以你如果不设置对应的class,那效果同样也是没有的。所以为了实现和zabbix其他页面一样的样式风格,

那我们的form、table这些组件也需要设置成对应的class类。

 

         我们来看下页尾的html代码:

 

                                                                         image

       整个页尾的table被设置成了page_footer,又细分了page_footer_l、page_footer_r两块,分别对应

左右的两块内容。 所以我们要做的就是看下zabbix自己的页面是怎么设置对应的组件的,然后我们仿照这去做就ok了。

 

4.实践:

    

   前面说过了我引入了smarty,所以前端这部分就分开了。前面搞smarty的时候,有一个问题,就是包含

include/page_footer.php文件的时候出错了,所以导致我现在的页面是没有页尾的,报错很难搞,

修复半天无果,所以我打算自己按照zabbix的样式去写一个得了。

 

    开搞吧,很简单的:

<table class="page_footer" cellspacing="0" cellpadding="1">
        <tbody>
                <tr>
                 <td class="page_footer_l">
                        <a class="highlight" href="http://www.zabbix.com">Zabbix 1.8.15 Copyright 2001-2011 by SIA Zabbix</a>
                <td class="page_footer_r">
                        <span class="divider">  |  </span>
                        <span class="footer_sign">Connected as "<{$user_login}>"</span>
                </td>
                </tr>
        </tbody>
</table>
 
  这部分就是页尾的代码,对照前面的zabbix的前端html,你就懂了,我都是抄的。然后搞了个user_login变量
去存储不同用户登录进来的状态,我在后台代码进行了一次赋值:
  
       include_once('include/page_header.php');
        require_once('include/user_hosts.inc.php');

        require "smarty_main.py";

        global $USER_DETAILS;

        $tpl->assign("user_login", $USER_DETAILS['alias']);

 

   主要就是一次assign的赋值,没事特别的,我smarty刚学的,大神不要见笑。

  刷新下看看:

 

                                                      image

 

      高仿有木有?

     其他的地方类似的,先找下zabbix自己的效果,觉得好看,那就抄过来:

 

                                                     image

 

5.总结:

 

       风格是个大麻烦,其实对于我这种不懂css的人直接上easyui这种前端模块是最痛苦的,但。。

为了和现有风格保持一致呀,只能还是用zabbix的样式了。牛逼的大神直接手写css就好了,

例如理总(www.iamle.com)。

 

Leave a Reply

Your email address will not be published. Required fields are marked *


To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax