:::
所有書籍
「[1061] XOOPS佈景設計」目錄
MarkDown
8. 現有網頁改製為XOOPS佈景
1. HTML5的開發環境與基礎
1-1 index.html
2. 用CSS3美化版面
2-1 index.html
2-2 style.css
3. 自適應CSS排版
3-1 index.html
3-2 style.css
3-3 index.html 動態標題背景
3-4 style.css 動態標題背景
4. BootStrap響應式框架
4-1 bootstrap/index.html
5. 同上週～
6. XOOPS可調式佈景開發（上）
6-1 tad2017/theme.tpl
6-2 tad2017/css/style.css
7. XOOPS可調式佈景開發（下）
7-1 tad2017/config.php
7-2 tad2017/theme.tpl
7-3 tad2017/css/style.css
7-4 tad2017/config2.php
8. 現有網頁改製為XOOPS佈景
8-1 themes/eElectronics/theme.html
8-2 themes/eElectronics/config.php
8-3 themes/eElectronics/css/style.css
8-4 themes/photography/theme.html
8-5 themes/photography/config.php
8-6 themes/photography/xotpl/logo.tpl
8-7 themes/photography/css/style.css
9. XOOPS佈景運作原理
9-1 themes/eElectronics/theme.html
9-2 themes/eElectronics/css/style.css
9-3 themes/eElectronics/config2.php
9-4 themes/eElectronics/xotpl/slider.tpl
9-5 themes/eElectronics/xotpl/system.tpl
9-6 themes/photography/xotpl/footer.tpl
9-7 themes/eElectronics/modules/system/system_siteclosed.tpl
8-2 themes/eElectronics/config.php
\[1061\] XOOPS佈景設計 ================== ``` <pre class="brush:xml;gutter:false;"> <html lang="<{$xoops_langcode}>"> <head> <!--目前$_SESSION['bootstrap']="<{php}>echo $_SESSION['bootstrap'];<{/php}>"; --> <!--將目前的資料夾名稱，設定為樣板標籤變數 theme_name--> <{assign var=theme_name value=$xoTheme->folderName}> <!--載入由使用者設定的各項佈景變數--> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/get_var.tpl"}> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/meta.tpl"}> <!-- 網站的標題及標語 --> <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title> <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/link_css.tpl"}> <!-- 給模組套用的樣板標籤 --> <{$xoops_module_header}> <!-- 局部套用的樣式，如果有載入完整樣式 theme_css.tpl 那就不需要這一部份 --> <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/theme_css.tpl"}> <!-- Google Fonts --> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'> <!-- Custom CSS --> <link rel="stylesheet" href="<{xoImgUrl}>css/owl.carousel.css"> <link rel="stylesheet" href="<{xoImgUrl}>css/responsive.css"> <style type="text/css"> body{ font-family:<{$font_family}>; } .navbar{ margin-bottom: 0px; } </style> </head> <body> <div class="site-branding-area"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="logo"> <h1><{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/logo.tpl"}></h1> </div> </div> </div> </div> </div> <!-- End site branding area --> <!-- 預設選單（$menu_var_kind 建議用 my_menu） --> <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/navbar.tpl"}> <div class="slider-area"> <div class="zigzag-bottom"></div> <div id="slide-list" class="carousel carousel-fade slide" data-ride="carousel"> <div class="slide-bulletz"> <div class="container"> <div class="row"> <div class="col-md-12"> <ol class="carousel-indicators slide-indicators"> <{foreach from=$slider_var item=pic name=slider}> <li data-target="#slide-list" data-slide-to="<{$smarty.foreach.slider.index}>" <{if $smarty.foreach.slider.first}>class="active"<{/if}>></li> <{/foreach}> </ol> </div> </div> </div> </div> <div class="carousel-inner" role="listbox"> <{foreach from=$slider_var item=pic name=slider}> <div class="item <{if $smarty.foreach.slider.first}>active<{/if}>"> <div class="single-slide"> <div class="slide-bg" style="background-image: url('<{$pic.file_url}>');"></div> <div class="slide-text-wrapper"> <div class="slide-text"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-6"> <div class="slide-content"> <{$pic.description}> </div> </div> </div> </div> </div> </div> </div> </div> <{/foreach}> </div> </div> </div> <!-- End slider area --> <div class="promo-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="single-promo"> <i class="fa fa-refresh"></i> <p>30 Days return</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="single-promo"> <i class="fa fa-truck"></i> <p>Free shipping</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="single-promo"> <i class="fa fa-lock"></i> <p>Secure payments</p> </div> </div> <div class="col-md-3 col-sm-6"> <div class="single-promo"> <i class="fa fa-gift"></i> <p>New products</p> </div> </div> </div> </div> </div> <!-- End promo area --> <div class="maincontent-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="latest-product"> <h2 class="section-title">Latest Products</h2> <div class="product-carousel"> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-1.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2> <div class="product-carousel-price"> <ins>$700.00</ins> <del>$800.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-2.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Apple new mac book 2015 March :P</a></h2> <div class="product-carousel-price"> <ins>$899.00</ins> <del>$999.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-3.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Apple new i phone 6</a></h2> <div class="product-carousel-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-4.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Sony playstation microsoft</a></h2> <div class="product-carousel-price"> <ins>$200.00</ins> <del>$225.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-5.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Sony Smart Air Condtion</a></h2> <div class="product-carousel-price"> <ins>$1200.00</ins> <del>$1355.00</del> </div> </div> <div class="single-product"> <div class="product-f-image"> <img src="<{xoImgUrl}>img/product-6.jpg" alt=""> <div class="product-hover"> <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a> <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a> </div> </div> <h2><a href="single-product.html">Samsung gallaxy note 4</a></h2> <div class="product-carousel-price"> <ins>$400.00</ins> </div> </div> </div> </div> </div> </div> </div> </div> <!-- End main content area --> <div class="brands-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="brand-wrapper"> <h2 class="section-title">Brands</h2> <div class="brand-list"> <img src="<{xoImgUrl}>img/services_logo__1.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__2.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__3.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__4.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__1.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__2.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__3.jpg" alt=""> <img src="<{xoImgUrl}>img/services_logo__4.jpg" alt=""> </div> </div> </div> </div> </div> </div> <!-- End brands area --> <div class="product-widget-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="single-product-widget"> <h2 class="product-wid-title">Top Sellers</h2> <a href="" class="wid-view-more">View All</a> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-1.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Sony Smart TV - 2015</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-2.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Apple new mac book 2015</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-3.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Apple new i phone 6</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> </div> </div> <div class="col-md-4"> <div class="single-product-widget"> <h2 class="product-wid-title">Recently Viewed</h2> <a href="#" class="wid-view-more">View All</a> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-4.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Sony playstation microsoft</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-1.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Sony Smart Air Condtion</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-2.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Samsung gallaxy note 4</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> </div> </div> <div class="col-md-4"> <div class="single-product-widget"> <h2 class="product-wid-title">Top New</h2> <a href="#" class="wid-view-more">View All</a> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-3.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Apple new i phone 6</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-4.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Samsung gallaxy note 4</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> <div class="single-wid-product"> <a href="single-product.html"><img src="<{xoImgUrl}>img/product-thumb-1.jpg" alt="" class="product-thumb"></a> <h2><a href="single-product.html">Sony playstation microsoft</a></h2> <div class="product-wid-rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="product-wid-price"> <ins>$400.00</ins> <del>$425.00</del> </div> </div> </div> </div> </div> </div> </div> <!-- End product widget area --> <div class="footer-top-area"> <div class="zigzag-bottom"></div> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="footer-about-us"> <h2>e<span>Electronics</span></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis sunt id doloribus vero quam laborum quas alias dolores blanditiis iusto consequatur, modi aliquid eveniet eligendi iure eaque ipsam iste, pariatur omnis sint! Suscipit, debitis, quisquam. Laborum commodi veritatis magni at?</p> <div class="footer-social"> <a href="#" target="_blank"><i class="fa fa-facebook"></i></a> <a href="#" target="_blank"><i class="fa fa-twitter"></i></a> <a href="#" target="_blank"><i class="fa fa-youtube"></i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="#" target="_blank"><i class="fa fa-pinterest"></i></a> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-menu"> <h2 class="footer-wid-title">User Navigation </h2> <ul> <li><a href="#">My account</a></li> <li><a href="#">Order history</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Vendor contact</a></li> <li><a href="#">Front page</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-menu"> <h2 class="footer-wid-title">Categories</h2> <ul> <li><a href="#">Mobile Phone</a></li> <li><a href="#">Home accesseries</a></li> <li><a href="#">LED TV</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Gadets</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="footer-newsletter"> <h2 class="footer-wid-title">Newsletter</h2> <p>Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!</p> <div class="newsletter-form"> <form action="#"> <input type="email" placeholder="Type your email"> <input type="submit" value="Subscribe"> </form> </div> </div> </div> </div> </div> </div> <!-- End footer top area --> <div class="footer-bottom-area"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="copyright"> <p>© 2015 eElectronics. All Rights Reserved. Coded with <i class="fa fa-heart"></i> by <a href="http://wpexpand.com" target="_blank">WP Expand</a></p> </div> </div> <div class="col-md-4"> <div class="footer-card-icon"> <i class="fa fa-cc-discover"></i> <i class="fa fa-cc-mastercard"></i> <i class="fa fa-cc-paypal"></i> <i class="fa fa-cc-visa"></i> </div> </div> </div> </div> </div> <!-- End footer bottom area --> <!-- jQuery sticky menu --> <script src="<{xoImgUrl}>js/owl.carousel.min.js"></script> <script src="<{xoImgUrl}>js/jquery.sticky.js"></script> <!-- jQuery easing --> <script src="<{xoImgUrl}>js/jquery.easing.1.3.min.js"></script> <!-- Main Script --> <script src="<{xoImgUrl}>js/main.js"></script> <!-- 載入bootstrap --> <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/bootstrap_js.tpl"}> <!-- 載入自訂js --> <{includeq file="$xoops_rootpath/modules/tadtools/themes3_tpl/my_js.tpl"}> <{$my_code}> <!-- 顯示參數，開發用，開發完可刪除 --> <{if $show_var=='1'}> <{includeq file="$xoops_rootpath/modules/tadtools/themes_common/show_var.tpl"}> <{/if}> </body> </html> ``` </body></html>
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
550
人線上 (
195
人在瀏覽
線上書籍
)
會員: 0
訪客: 550
更多…
:::
主選單
NTPC OpenID
活動報名
模組控制台
進階區塊管理
站長工具箱（急救版）
網站地圖
Tad Tools 工具包
站長工具箱
行事曆
討論留言
嵌入區塊模組
快速登入
網站計數器
好站連結
最新消息
檔案下載
線上書籍
電子相簿
影音播放
常見問題
萬用表單
友站消息
社大學員
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
登入
登入
帳號
密碼
登入
8. 現有網頁改製為XOOPS佈景
