SupeSite默認(rèn)焦點(diǎn)輪轉(zhuǎn)圖簡單美化方法_SupeSite教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
先上最終效果圖:
方法很簡單,需要修改的代碼很少:
1、打開templates/default/下的index.html.php文件,找到如下代碼:
(說明:控制輪轉(zhuǎn)圖的代碼,這個(gè)大家都知道)
2、把上面代碼中的
移動到上面代碼中的
的上面,即<ul id="focus_tx">的上面。
(說明:focus_opacity是控制默認(rèn)輪轉(zhuǎn)圖的底部白色透明條的,因?yàn)橐训撞课淖终f明(即focus_tx)放在白色透明條的上方,所以先移動下順序,如果不移動會造成文字說明被白色透明條遮住)
3、修改
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
中的
margin:5px 0 0 12px;
為
margin:-40px 0 0 12px;
主要是修改了距頂?shù)奈恢茫?40px),具體數(shù)值大小,需要自己適當(dāng)調(diào)整。(說明:通過把底部說明文字的距頂數(shù)值改為負(fù)值,把底部說明文字移動白色透明條的同樣高度。)
4、修改好上面的,刷新后發(fā)現(xiàn)錯(cuò)位,別急,接下來打開CSS文件(templates/default/css/目錄下)common.css,找到如下代碼:
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
在其中間添加
position:absolute;
(說明:現(xiàn)在正常了,但白色透明條的顏色太淡,不協(xié)調(diào)。繼續(xù)往下看。)
5、然后繼續(xù)在css文件中查找到
#focus_opacity { position:absolute; left:14px; bottom:41px; width:350px; height:24px; background:#FFF; opacity:0.4; filter:alpha(opacity=40); }
修改背景色為黑色,即修改
background:#FFF;
中的#FFF為#000。
(說明:換個(gè)黑色的背景,讓文字更突出。修改背景色的時(shí)候,你也可以修改為其他顏色,同時(shí)還可以通過修改
filter:alpha(opacity=40);
中的值(即那個(gè)opacity=40)來控制其透明度,數(shù)值范圍為0~100。)
6、刷新下看看效果,文字不明顯了,這是因?yàn)槲淖值念伾捅尘吧粯釉斐傻模酉聛碓贑SS文件中找到
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
#focus_tx .normal { display:none; }
在“#focus_tx"和"#focus_tx .normal”中間添加一段CSS代碼
#focus_tx a { color:#FFF; }
如果想讓這部分文字加粗或是字號增大/減小,可以在
#focus_tx a { color:#FFF; }
中添加font-weight:700;(文字粗體)和font-size:14px;(字號大小),具體的數(shù)值調(diào)整自己喜歡為止。
其他:
修改圖片序號(即上圖中的1、2、3)的背景顏色、文字顏色、和邊框顏色的方法:
修改邊框顏色、樣式:
1、修改
#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
中的background的值控制背景色,color控制文字顏色。
3、修改未選中圖片的序號的背景顏色和文字顏色的方法同上,修改的代碼是
#focus_btn .normal { background:#FFF; color:#1A4963; }
方法很簡單,需要修改的代碼很少:
1、打開templates/default/下的index.html.php文件,找到如下代碼:
- <div id="focus_turn">
- <!--{if !empty($_SBLOCK['hotnewspic'])}-->
- <ul id="focus_pic">
- <!--{eval $j = 0}-->
- <!--{loop $_SBLOCK['hotnewspic'] $pkey $pvalue}-->
- <!--{eval $pcurrent = ($j == 0 ? 'current' : 'normal');}-->
- <li class="$pcurrent"><a href="$pvalue[url]"><img src="$pvalue['a_filepath']" alt="" /></a></li>
- <!--{eval $j++}-->
- <!--{/loop}-->
- </ul>
- <ul id="focus_tx">
- <!--{eval $i = 0}-->
- <!--{loop $_SBLOCK['hotnewspic'] $key $value}-->
- <!--{eval $current = ($i == 0 ? 'current' : 'normal');}-->
- <li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li>
- <!--{eval $i++}-->
- <!--{/loop}-->
- </ul>
- <div id="focus_opacity"></div>
- <!--{/if}-->
- </div><!--focus_turn end-->
(說明:控制輪轉(zhuǎn)圖的代碼,這個(gè)大家都知道)
2、把上面代碼中的
- <div id="focus_opacity"></div>
移動到上面代碼中的
- <ul id="focus_tx">
- <!--{eval $i = 0}-->
- <!--{loop $_SBLOCK['hotnewspic'] $key $value}-->
- <!--{eval $current = ($i == 0 ? 'current' : 'normal');}-->
- <li class="$current"><a href="$value[url]" title="$value[subjectall]">$value[subject]</a></li>
- <!--{eval $i++}-->
- <!--{/loop}-->
- </ul>
的上面,即<ul id="focus_tx">的上面。
(說明:focus_opacity是控制默認(rèn)輪轉(zhuǎn)圖的底部白色透明條的,因?yàn)橐训撞课淖终f明(即focus_tx)放在白色透明條的上方,所以先移動下順序,如果不移動會造成文字說明被白色透明條遮住)
3、修改
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
中的
margin:5px 0 0 12px;
為
margin:-40px 0 0 12px;
主要是修改了距頂?shù)奈恢茫?40px),具體數(shù)值大小,需要自己適當(dāng)調(diào)整。(說明:通過把底部說明文字的距頂數(shù)值改為負(fù)值,把底部說明文字移動白色透明條的同樣高度。)
4、修改好上面的,刷新后發(fā)現(xiàn)錯(cuò)位,別急,接下來打開CSS文件(templates/default/css/目錄下)common.css,找到如下代碼:
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
在其中間添加
position:absolute;
(說明:現(xiàn)在正常了,但白色透明條的顏色太淡,不協(xié)調(diào)。繼續(xù)往下看。)
5、然后繼續(xù)在css文件中查找到
#focus_opacity { position:absolute; left:14px; bottom:41px; width:350px; height:24px; background:#FFF; opacity:0.4; filter:alpha(opacity=40); }
修改背景色為黑色,即修改
background:#FFF;
中的#FFF為#000。
(說明:換個(gè)黑色的背景,讓文字更突出。修改背景色的時(shí)候,你也可以修改為其他顏色,同時(shí)還可以通過修改
filter:alpha(opacity=40);
中的值(即那個(gè)opacity=40)來控制其透明度,數(shù)值范圍為0~100。)
6、刷新下看看效果,文字不明顯了,這是因?yàn)槲淖值念伾捅尘吧粯釉斐傻模酉聛碓贑SS文件中找到
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
#focus_tx .normal { display:none; }
在“#focus_tx"和"#focus_tx .normal”中間添加一段CSS代碼
#focus_tx a { color:#FFF; }
如果想讓這部分文字加粗或是字號增大/減小,可以在
#focus_tx a { color:#FFF; }
中添加font-weight:700;(文字粗體)和font-size:14px;(字號大小),具體的數(shù)值調(diào)整自己喜歡為止。
其他:
修改圖片序號(即上圖中的1、2、3)的背景顏色、文字顏色、和邊框顏色的方法:
修改邊框顏色、樣式:
1、修改
#focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
中的background的值控制背景色,color控制文字顏色。
3、修改未選中圖片的序號的背景顏色和文字顏色的方法同上,修改的代碼是
#focus_btn .normal { background:#FFF; color:#1A4963; }
查看更多 supesite教程 supesite模板
相關(guān)SupeSite教程:
- SupeSite7.5 讓資訊發(fā)布日期更加個(gè)性化
- SupeSite7.5 讓會員中心擁有不同的title和提示信息
- SupeSite7.5 benbaHTML生成方案第一版
- SupeSite7.5發(fā)布評論后直接跳轉(zhuǎn)回到文章頁面的完美方法
- SupSite7.5單個(gè)頁面頻道編輯后無法訪問
- SupSite7.5登陸后臺先驗(yàn)證權(quán)限問題解決方案
- SupSite模型無權(quán)限評論修改方案
- SupSite模板里經(jīng)常用到以下幾個(gè)標(biāo)簽的說明
- SupSite頁面文件與模塊關(guān)系說明
- 升級SupeSite7.5出現(xiàn)Errno.: 1054的解決方法
- SupeSite7.5 非gbk版本程序,在回復(fù)某帖子時(shí)回復(fù)被截?cái)嘈薷姆桨?/a>
- SupeSite 7.0 模板CSS修改全攻略教程
SupeSite教程教程Rss訂閱Cms教程搜索
SupeSite教程推薦
- SupeSite 7.0 后臺站點(diǎn)設(shè)置教程
- SupSite7.5單個(gè)頁面頻道編輯后無法訪問
- SupeSite7.5 非gbk版本程序,在回復(fù)某帖子時(shí)回復(fù)被截?cái)嘈薷姆桨?/a>
- SupeSite 7.0 系統(tǒng)管理-附件類型教程
- SupeSite默認(rèn)焦點(diǎn)輪轉(zhuǎn)圖簡單美化方法
- SupeSite7.5 讓資訊發(fā)布日期更加個(gè)性化
- SupeSite 7.0 系統(tǒng)管理-預(yù)先值教程
- SupeSite 7.0 用戶管理-恢復(fù)被禁用戶說明教程
- SupeSite 7.0 批量維護(hù)-上傳附件管理說明教程
- SupeSite 7.0 系統(tǒng)管理-緩存更新教程
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說明:
SupeSite教程-SupeSite默認(rèn)焦點(diǎn)輪轉(zhuǎn)圖簡單美化方法。