帝国cms如何自定义留言以及评论样式
在帝国cms自带的评论和留言系统的功能上,简单修改一下它的样式,就能美美的调用出畅言一样的效果了。
一,修改内容页评论:
1、公共模板-评论js调用模板
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--]&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/
5、css 增加以下css,jxhx的路径在 /skin/jxhx/css/base.css
6、修改内容模板
7、修改完以后,刷新内容页,动态页面
二,修改留言:
1,留言板 位置在:公共模板-留言板
一,修改内容页评论:
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--]&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/
5、css 增加以下css,jxhx的路径在 /skin/jxhx/css/base.css
.saying {
line-height
:
30px
;
color
:
#a9a6a6
; }
.saying span {
float
:
right
}
.saying span a {
color
:
#de1513
; }
img#plKeyImg {
display
: inline-
block
; }
.yname {
margin
:
10px
10px
10px
0
}
.yname span, .yzm span {
padding-right
:
10px
; }
.yzm {
margin
:
0
10px
10px
0
}
.gbox input[type=
"submit"
] {
display
:
block
;
background
:
#303030
;
color
:
#fff
;
border
:
0
;
line-height
:
30px
;
padding
:
0
20px
; border-radius:
5px
;
float
:
right
; }
#plpost textarea#saytext {
width
:
100%
; }
#plpost input[type=
"submit"
] {
display
:
block
;
background
:
#040404
;
color
:
#fff
;
border
:
0
;
line-height
:
30px
;
padding
:
0
20px
; border-radius:
5px
;
float
:
right
; }
.gbox {
padding
:
0
;
overflow
:
hidden
; }
.gbox p {
margin-bottom
:
10px
;
overflow
:
hidden
; }
p.fbtime {
color
:
#000
; }
.fbtime span {
float
:
right
;
color
:
#999
;
font-size
:
12px
;
overflow
:
hidden
;
white-space
:
nowrap
; }
p.fbinfo {
margin
:
10px
0
; }
.fb ul {
margin
:
10px
0
;
padding
:
20px
10px
;
border-bottom
:
#ececec
1px
solid
; }
span.tximg {
display
:
block
;
float
:
left
;
margin-right
:
10px
; }
.gbox i {
display
:
block
;
float
:
left
;
margin-right
:
10px
; }
.gbox i input {
margin
:
10px
auto
;
display
:
block
; }
.hf ul {
padding
:
10px
10px
;
background
:
#f9f9f9
; }
.hf {
padding-bottom
:
20px
;
border-bottom
:
#dedddd
1px
dashed
; }
textarea#lytext {
width
:
99%
; }
.gbox input[type=
"submit"
] {
display
:
block
;
background
:
#040404
;
color
:
#fff
;
border
:
0
;
line-height
:
30px
;
padding
:
0
20px
; border-radius:
5px
;
float
:
right
; }
.ecomment {
border
:
#dedcdc
1px
solid
;
padding
:
10px
;
margin-bottom
:
10px
; }
span.ecommentauthor {
color
:
#b5b5b5
;
font-size
:
14px
;
margin-bottom
:
5px
;
display
:
block
; }
.gbook .fb ul {
margin
:
10px
10px
;
padding
:
10px
10px
10px
70px
;
border-bottom
:
#ececec
1px
solid
; }
.gbook .fb:nth-child(
8
n
-7
) ul {
background
:
url
(../../../e/tool/images/tx
10
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-6
) ul {
background
:
url
(../../../e/tool/images/tx
9
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-5
) ul {
background
:
url
(../../../e/tool/images/tx
8
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-4
) ul {
background
:
url
(../../../e/tool/images/tx
7
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-3
) ul {
background
:
url
(../../../e/tool/images/tx
6
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-2
) ul {
background
:
url
(../../../e/tool/images/tx
5
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n
-1
) ul {
background
:
url
(../../../e/tool/images/tx
4
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:nth-child(
8
n) ul {
background
:
url
(../../../e/tool/mages/tx
3
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:first-child ul {
background
:
url
(../../../e/tool/images/tx
2
.jpg)
no-repeat
top
20px
left
10px
; }
.gbook .fb:last-child ul {
background
:
url
(../../../e/tool/images/tx
1
.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
>