黄华志

黄华志个人博客

您好,欢迎您访问黄华志个人博客,梦想从一个博客开始!

关注我黄华志个人微信号:243045836

您现在的位置是:首页 > 博客日记

帝国cms如何自定义留言以及评论样式
在帝国cms自带的评论和留言系统的功能上,简单修改一下它的样式,就能美美的调用出畅言一样的效果了。

一,修改内容页评论:
1、公共模板-评论js调用模板
[!--empirenews.listtemp--] 
<div class="fb">
<ul>
<p class="fbtime"><span>[!--pltime--]</span> [!--username--]</p>
<p class="fbinfo">[!--pltext--]</p>
</ul>
</div>
[!--empirenews.listtemp--]

2、公共模板变量-管理公共模板-[!--temp.pl--] 找到评论表单
<link href="[!--news.url--]skin/jxhx/css/base.css" rel="stylesheet">
<script>
          function CheckPl(obj)
          {
          if(obj.saytext.value=="")
          {
          alert("您没什么话要说吗?");
          obj.saytext.focus();
          return false;
          }
          return true;
          }
          </script>
<form action="[!--news.url--]e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
  <div id="plpost">
    <p class="saying"><span><a href="[!--news.url--]e/pl/?classid=[!--classid--]&amp;id=[!--id--]">共有<script type="text/javascript" src="[!--news.url--]e/public/ViewClick/?classid=[!--classid--]&id=[!--id--]&down=2"></script>条评论</a></span>来说两句吧...</p>
    <p class="yname"><span>用户名:</span>
      <input name="username" type="text" class="inputText" id="username" value="" size="16" />
    </p>
    <p class="yzm"><span>验证码:</span>
      <input name="key" type="text" class="inputText" size="16" />
      <img src="[!--news.url--]e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='[!--news.url--]e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </p>
    <input name="nomember"  type="hidden" id="nomember" value="1" checked="checked" />
    <textarea name="saytext" rows="6" id="saytext"></textarea>
    <input name="imageField" type="submit" value="提交"/>
    <input name="id" type="hidden" id="id" value="[!--id--]" />
    <input name="classid" type="hidden" id="classid" value="[!--classid--]" />
    <input name="enews" type="hidden" id="enews" value="AddPl" />
    <input name="repid" type="hidden" id="repid" value="0" />
    <input type="hidden" name="ecmsfrom" value="[!--titleurl--]">
    </td>
  </div>
</form>

4.头像图片存放在/e/tool/images/
6679396d7e95ba20926c9e076097edb5.zip
aa2c9c14aaa14f4f78caed9cb1c0c9a0.zip (53.92 KB)

5、css 增加以下css,jxhx的路径在 /skin/jxhx/css/base.css
.saying { line-height30pxcolor#a9a6a6; }
.saying span { floatright }
.saying span a { color#de1513; }
img#plKeyImg { display: inline-block; }
.yname { margin10px 10px 10px 0 }
.yname span, .yzm span { padding-right10px; }
.yzm { margin0 10px 10px 0 }
.gbox input[type="submit"] { displayblockbackground#303030color#fffborder0line-height30pxpadding0 20px; border-radius: 5pxfloatright; }
#plpost textarea#saytext { width100%; }
#plpost input[type="submit"] { displayblockbackground#040404color#fffborder0line-height30pxpadding0 20px; border-radius: 5pxfloatright; }
.gbox { padding0overflowhidden; }
.gbox p { margin-bottom10pxoverflowhidden; }
p.fbtime { color#000; }
.fbtime span { floatrightcolor#999font-size12pxoverflowhiddenwhite-spacenowrap; }
p.fbinfo { margin10px 0; }
.fb ul { margin10px 0padding20px 10pxborder-bottom#ececec 1px solid; }
span.tximg { displayblockfloatleftmargin-right10px; }
.gbox i { displayblockfloatleftmargin-right10px; }
.gbox i input { margin10px autodisplayblock; }
.hf ul { padding10px 10pxbackground#f9f9f9; }
.hf { padding-bottom20pxborder-bottom#dedddd 1px dashed; }
textarea#lytext { width99%; }
.gbox input[type="submit"] { displayblockbackground#040404color#fffborder0line-height30pxpadding0 20px; border-radius: 5pxfloatright; }
.ecomment { border#dedcdc 1px solidpadding10pxmargin-bottom10px; }
span.ecommentauthor { color#b5b5b5font-size14pxmargin-bottom5pxdisplayblock; }
.gbook .fb ul { margin10px 10pxpadding10px 10px 10px 70pxborder-bottom#ececec 1px solid; }
.gbook .fb:nth-child(8n-7) ul { backgroundurl(../../../e/tool/images/tx10.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-6) ul { backgroundurl(../../../e/tool/images/tx9.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-5) ul { backgroundurl(../../../e/tool/images/tx8.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-4) ul { backgroundurl(../../../e/tool/images/tx7.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-3) ul { backgroundurl(../../../e/tool/images/tx6.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-2) ul { backgroundurl(../../../e/tool/images/tx5.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n-1) ul { backgroundurl(../../../e/tool/images/tx4.jpg) no-repeat top 20px left 10px; }
.gbook .fb:nth-child(8n) ul { backgroundurl(../../../e/tool/mages/tx3.jpg) no-repeat top 20px left 10px; }
.gbook .fb:first-child ul { backgroundurl(../../../e/tool/images/tx2.jpg) no-repeat top 20px left 10px; }
.gbook .fb:last-child ul { backgroundurl(../../../e/tool/images/tx1.jpg) no-repeat top 20px left 10px; }

6、修改内容模板
<div class="whitebg gbook">
  <h2 class="htitle">文章评论</h2>
  <ul>
<script src="[!--news.url--]e/pl/more/?classid=[!--classid--]&id=[!--id--]&num=20"></script>
[!--temp.pl--]
  </ul>
</div>

7、修改完以后,刷新内容页,动态页面



二,修改留言:
1,留言板  位置在:公共模板-留言板
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>[!--bname--]</title>
<meta name="keywords" content="[!--pagekey--]" />
<meta name="description" content="    [!--pagedes--]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="[!--news.url--]skin/jxhx/css/base.css" rel="stylesheet">
<link href="[!--news.url--]skin/jxhx/css/m.css" rel="stylesheet">
<script src="[!--news.url--]skin/jxhx/js/jquery-1.8.3.min.js" ></script>
<script src="[!--news.url--]skin/jxhx/js/comm.js"></script>
<!--[if lt IE 9]>
<script src="[!--news.url--]skin/jxhx/js/modernizr.js"></script>
<![endif]-->
</head>
<body>
[!--temp.header--]
<article>
  <div class="whitebg">
    <h2 class="htitle">[!--bname--]</h2>
    <div class="news_infos m20">
      <div class="gbox">
        <form action="../../enews/index.php" method="post" name="form1" id="form1">
          <p> <strong>来说点儿什么吧...</strong></p>
          <p><span> 您的姓名:</span>
            <input name="name" type="text" id="name" />
            *</p>
          <input name="email" type="hidden" id="email" value="admin@qq.com"  />
          <p><span>选择头像:</span> *</p>
          <p> <i>
            <input type="radio" value"../images/tx1.jpg" id"1" name="mycall" style="display:none" selected>
            <img id="a" src="../images/tx1.jpg " onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx2.jpg" id"2" name="mycall" style="display:none">
            <img id="b" src="../images/tx2.jpg" onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx3.jpg" id"3" name="mycall" style="display:none">
            <img id="c" src="../images/tx3.jpg" onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx4.jpg" id"4" name="mycall" style="display:none">
            <img id="d" src="../images/tx4.jpg " onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx5.jpg" id"5" name="mycall" style="display:none">
            <img id="e" src="../images/tx5.jpg" onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx6.jpg" id"6" name="mycall" style="display:none">
            <img id="f" src="../images/tx6.jpg" onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx7.jpg" id"7" name="mycall" style="display:none">
            <img id="g" src="../images/tx7.jpg" onclick="myFun(this.id)"></i> <i>
            <input type="radio" value"../images/tx8.jpg" id"8" name="mycall" style="display:none">
            <img id="h" src="../images/tx8.jpg" onclick="myFun(this.id)"></i> </p>
          <p><span class="tnr">留言内容:</span>
            <textarea name="lytext" cols="60" rows="12" id="lytext"></textarea>
          </p>
          <p>
            <input type="submit" name="Submit3" value="提交" />
            <input name="enews" type="hidden" id="enews" value="AddGbook" />
                  <input name="bid" type="hidden" value="1" />
          </p>
        </form>
      </div>
      [!--empirenews.listtemp--]
      <div class="fb">
        <ul>
          <span class="tximg"><img src="[!--mycall--]"></span>
          <p class="fbtime"><span>
            <?=format_datetime($r[lytime],'Y-m-d')?>
            </span> [!--name--]</p>
          <p class="fbinfo">[!--lytext--]</p>
        </ul>
      </div>
      [!--start.regbook--]
      <div class="hf">
        <ul>
          <p class="zzhf"><font color="#FF0000">站长回复:</font>[!--retext--]</p>
        </ul>
      </div>
      [!--end.regbook--] 
       
      [!--empirenews.listtemp--] 
      <script>
  function myFun(sId) {
 
    var oImg = document.getElementsByTagName('img');
 
    for (var i = 0; i < oImg.length; i++) {
      if (oImg[i].id == sId) {
        oImg[i].previousSibling.previousSibling.checked true;
        oImg[i].style.opacity '1';
      } else {
        oImg[i].style.opacity '.8';
 
      }
    }
  }
</script> 
    </div>
    <!--newsinfo end--> 
     
  </div>
</article>
<div class="clear"></div>
[!--temp.footer--]
</body>
</html>