- 文章： 1031
- 活躍值: 21
- 謝謝您收到： 166
請問怎麼修改模板
- peggyy
-
Topic Author
- 訪客
-
- sunlango
-
- 訪客
-
- 羽城君拉
-
- Offline
- 管理員
-
Less
More
2010-05-14 18:10 #17977
來自 羽城君拉
...
羽城君拉 replied the topic: 請問怎麼修改模板
教學（英文）
http://docs.joomla.org/Creating_rounded_corners
http://joomlapanel.com/joomla-article/joomla-tutorial/130-rounded-corners-border.html
http://docs.joomla.org/Creating_rounded_corners
http://joomlapanel.com/joomla-article/joomla-tutorial/130-rounded-corners-border.html
...
Please 登入 to join the conversation.
- peggyy
-
Topic Author
- 訪客
-
2010-05-14 20:58 #17980
來自 peggyy
peggyy replied the topic: 請問怎麼修改模板
看到頭昏眼花 還是有點看不懂
例如 http://joomlapanel.com/joomla-article/j ... order.html
把
div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
把這個放在 templet.css裡
然後如果我要應用在who's online
要如何使用 :redface: 謝謝
例如 http://joomlapanel.com/joomla-article/j ... order.html
把
div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
把這個放在 templet.css裡
然後如果我要應用在who's online
要如何使用 :redface: 謝謝
Please 登入 to join the conversation.
- CharlesJiang
-
- 訪客
-
2010-05-14 22:53 #17982
來自 CharlesJiang
CharlesJiang replied the topic: 請問怎麼修改模板
以上面 Eddy大大 所提的官方文件
http://docs.joomla.org/Creating_rounded_corners
為基礎，
我在此用我的方法做個簡單翻譯說明。
Joomla 預設的 rhuk_milkway 佈景主題是個很值得學習的範例，裡面就有圓角：
1. template\rhuk_milkway\index.php 第90行上面code 中 style="rounded" 即表示要以圓角輸出格式，
2. http://docs.joomla.org/What_is_module_chrome%3F從 style -> rounded 可以看到會 output 一個四層<div>。
3. template\rhuk_milkway\css\blue.css四個<div>各提供一張背景圖來包裹成一個圓角menu。
以上就是預設佈景左邊的 menu 的做法，這需要一些 css 的基礎才看得懂，希望對您有幫助。
我在此用我的方法做個簡單翻譯說明。
Joomla 預設的 rhuk_milkway 佈景主題是個很值得學習的範例，裡面就有圓角：
1. template\rhuk_milkway\index.php 第90行
<jdoc:include type="modules" name="left" style="rounded" />2. http://docs.joomla.org/What_is_module_chrome%3F
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>3. template\rhuk_milkway\css\blue.css
div.module_menu {
background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}
div.module_menu div {
background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}
div.module_menu div div {
background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}
div.module_menu div div div {
background: url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
}以上就是預設佈景左邊的 menu 的做法，這需要一些 css 的基礎才看得懂，希望對您有幫助。
Please 登入 to join the conversation.
- 羽城君拉
-
- Offline
- 管理員
-
Less
More
- 文章： 1031
- 活躍值: 21
- 謝謝您收到： 166
2010-05-15 11:40 #17985
來自 羽城君拉
...
羽城君拉 replied the topic: 請問怎麼修改模板
如果你懂一點css或javascript，可以服用大還丹
25個用css的圓角技巧
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
線上自動產生器
http://www.spiffycorners.com/index.php
http://spiffybox.com/
http://www.neuroticweb.com/recursos/css-rounded-box/
Mootools外掛
http://ryan.ifupdown.com/2009/08/26/goodcorners-rounded-corners-with-mootools/
JQuery外掛
http://docs.jquery.com/Tutorials:Rounded_Corners
25個用css的圓角技巧
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
線上自動產生器
http://www.spiffycorners.com/index.php
http://spiffybox.com/
http://www.neuroticweb.com/recursos/css-rounded-box/
Mootools外掛
http://ryan.ifupdown.com/2009/08/26/goodcorners-rounded-corners-with-mootools/
JQuery外掛
http://docs.jquery.com/Tutorials:Rounded_Corners
...
Please 登入 to join the conversation.