布局寬度定制

模板寬度由網(wǎng)格定義，分為若干列（默認為12列）。

改變寬度的模板，打開文件：variables.less：templates/t3_bs3_blank/less 不改變模板定義寬度。

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min; 

現(xiàn)在更改響應布局的大小。

這里是網(wǎng)格系統(tǒng)。你可以改變網(wǎng)格的數(shù)量。

1. // Grid system
2. // --------------------------------------------------
4. // Number of columns in the grid system
5. @grid-columns: 12;
6. // Padding, to be divided by two and applied to the left and right of all columns
7. @grid-gutter-width: 30px;
8. // Point at which the navbar stops collapsing
9. @grid-float-breakpoint: @screen-sm-min;

主題定制

所有主題文件夾都位于：templates/t3_bs3_blank/less/themes/

在每個主題文件夾中，它有3個文件：

1.template.less這個文件包括風格，定制默認主題。

2.variables.less：此文件包含自定義變量的默認variables.less文件。

3.variables-custom.less：此文件包含新的變量，創(chuàng)建自定義當前主題。

創(chuàng)建新的主題

創(chuàng)建新主題的最佳方法是拷貝主題文件夾。

你可以手動創(chuàng)建新的主題文件夾，然后添加3個文件：template.less，variables.less和variables-custom.less

自定義主題

在后臺，你可以選擇新創(chuàng)建的主題風格你想自定義主題與thememagic。

您可以自定義主題少文件創(chuàng)建的主題：templates/t3_bs3_blank/less/themes/dark-copy 

編制less的CSS

在定制主題，請編譯less、CSS。新的主題的CSS文件將位于templates/t3_bs3_blank/css/themes/dark-copy

添加CSS文件：

bootstrap.css

home.css

megamenu.css

off-canvas.css

windows.css

所有添加的CSS文件將被加載時，網(wǎng)站運行的主題，通過這種方式，所有的文件都是從1個文件夾才可以提高站點的性能負載。

自定義模板的CSS

Custom.css文件位于：templates/t3_blank/css。如果你不看文件，創(chuàng)建新文件，然后打開文件添加CSS樣式模板。

一些特點Custom.css文件

默認情況下不包含該文件，需要創(chuàng)建新文件。

該文件是在您的站點中加載的最后一個文件。

該文件不是一個編譯文件從少所以不會被覆蓋或丟失當你編譯。

與文件工作 的Custom.css文件是其他任何CSS文件相同。

進入CSS樣式模板。

讓我們檢查前端

thememagic定制

T3框架是強大的簡單主題定制基于thememagic。您可以添加無限的參數(shù)定制。

你必須使thememagic第一，然后點擊thememagic按鈕打開thememagic面板。

工作面板

選擇要自定義的主題

通過更改參數(shù)值自定義主題

點擊預覽查看更改

保存或保存為復制

自定義主題

添加新的參數(shù)

您可以添加無限的參數(shù)，主題定制組。定制的參數(shù)設置在文件夾中的文件thememagic.xml：templates/t3_bs3_blank

步驟1.定義一個新的組

1. <fieldset name="custom1_params" label="CUSTOM1_LABEL">
2. </fieldset>

步驟2.新組中定義參數(shù)

1. <field name="@your-field-name"
2. type="type-of-parameter"
3. default="default-value-of-parameter"
4. label="FIEL_LABEL"
5. description="FIELD_DESCRIPTION" />
6. </field>

步驟3.定義參數(shù)少

定義的參數(shù)少，具有相同的名稱，如上述定義@your-field-name variables.less /template/less/。

步驟4.在更少的文件中添加“@你的域名”

這取決于你，只是想你想如何使用這個參數(shù)，以及它如何影響到模板。你必須有一定的基礎知識和CSS。我們建議你添加到文件：style.less

1. .t3-module {
2. background: @t3-module-bg;
3. }

步驟5.定義語言的關鍵

打開模板en-GB.tpl_t3_bs3_blank.ini位于language\en-GB\語言文件和定義你使用以上語言的關鍵參數(shù)確定。

1. ; MODULE
2. T3_TM_MODULE ="Module"
3. T3_TM_VARS_MODULE_BGCOLOR_LABEL ="Module Background Color"

檢查是否有新的組和參數(shù)被添加

LOGO定制

1.改變標志形象

有2種方法來改變標志為T3框架開發(fā)的Joomla模板。

# 1：改變的logo模板管理

每一種風格都可以有不同的標志。要設置logo樣式，請在模板樣式設置中打開主題設置。

# 2：改變的標志從variable.less文件

另一種方式來改變這個標志是改變variables.less文件logo圖像的路徑，它位于templates/t3_blank/less。

1. // T3 LOGO
2. // --------------------------------------------------
3. @T3logoWidth: 60px;
4. @T3logoHeight: 50px;
6. @T3LogoImage: "../images/logo.png";

2.logo造型

為標志的自定義風格，打開文件style.less位于templates/t3_blank/less文件夾。搜索logo文本，你會發(fā)現(xiàn)樣式，您可以添加更多的樣式或自定義它。

1. // Logo
2. // ---------------------------------------------------------
3. .logo {
4. float: left;
6. a {
7. display: inline-block;
8. line-height: 1;
9. margin: 0;
10. }
12. }
14. // Logo Image
15. // ----------
16. .logo-image {
17. overflow: hidden;
19. a {
20. background-image: url("@{T3LogoImage}");
21. background-repeat: no-repeat;
22. width: @T3logoWidth;
23. height: @T3logoHeight;
24. }
26. //hide sitename and slogan
27. span, small {
28. display: none;
29. }
31. }

頁腳信息定制

T3空白默認頁腳信息包括3件事：

T3頁腳標識

T3的版權信息

自定義版權信息

1.自定義頁腳標識T3

# 1：如何禁用頁腳標識？

禁用頁腳標識，打開T3模板管理器，在General選項卡，禁用T3logo的選擇

# 2：改變鏈接，T3頁腳

打開footer.php文件位于 templates/t3_bs3_blank/tpls/blocks/，改變頁腳標識鏈接，添加/更改類風格的logo…

1. <?php if ($this->getParam('t3-rmvlogo', 1)): ?>
2. <div class="col-md-4 poweredby text-hide">
3. <a class="t3-logo t3-logo-color" title="<?php echo JText::_('T3_POWER_BY_TEXT') ?>"
4. target="_blank" <?php echo method_exists('T3', 'isHome') && T3::isHome() ? '' : 'rel="nofollow"' ?>><?php echo JText::_('T3_POWER_BY_HTML') ?></a>
5. </div>
6. <?php endif; ?>

3：改變#頁腳logo形象，大小和自定義風格

頁腳的標志風格在t3.less文件位于plugins/system/t3/base-bs3/less。打開文件并自定義logo樣式。

1. // T3 Logo
2. // ---------------------------------------------------------
3. .t3-logo,
4. .t3-logo-small {
5. display: block;
6. text-decoration: none;
7. //text-indent: -9999em; - use text-hide
8. text-align: left;
9. background-repeat: no-repeat;
10. background-position: center;
11. }
13. // Sizes
14. .t3-logo {
15. width: 182px;
16. height: 50px;
17. }
19. .t3-logo-small {
20. width: 60px;
21. height: 30px;
22. }
24. // Styles
25. .t3-logo,
26. .t3-logo-color {
27. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-color.png");
28. }
30. .t3-logo-small,
31. .t3-logo-small.t3-logo-color {
32. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-color.png");
33. }
35. .t3-logo-dark {
36. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-dark.png");
37. }
39. .t3-logo-small.t3-logo-dark {
40. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-dark.png");
41. }
43. .t3-logo-light {
44. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-light.png");
45. }
47. .t3-logo-small.t3-logo-light {
48. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-light.png");
49. }

您可以更改logo圖像，logo圖像的大小…

1. // Sizes
2. .t3-logo {
3. width: 300px;
4. height: 40px;
5. }
7. .t3-logo-small {
8. width: 100px;
9. height: 30px;
10. }
12. // Styles
13. .t3-logo,
14. .t3-logo-color {
15. background-image: url("http://joomlart.s3.amazonaws.com/blog/joomlart_logo_full.png");
16. }
18. .t3-logo-small,
19. .t3-logo-small.t3-logo-color {
20. background-image: url("http://joomlart.s3.amazonaws.com/blog/small-logo.png");
21. }

前端外觀

2。自定義T3版權信息

T3的版權信息在default.php文件放置在templates/t3_bs3_blank/html/mod_footer。打開文件和自定義T3版權信息。

1. <?php
2. /**
3. * @package Joomla.Site
4. * @subpackage mod_footer
5. *
6. * @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
7. * @license GNU General Public License version 2 or later; see LICENSE.txt
8. */
10. // no direct access
11. defined('_JEXEC') or die;
12. ?>
13. <div class="module">
14. <small><?php echo $lineone; ?> Designed by <a title="Visit Joomlart.com!" <?php echo method_exists('T3', 'isHome') && T3::isHome() ? '' : 'rel="nofollow"' ?>>JoomlArt.com</a>.</small>
15. <small><?php echo JText::_( 'MOD_FOOTER_LINE2' ); ?></small>
16. </div>

3.自定義引導和字體版權信息

打開footer.php文件位于templates/t3_bs3_blank/tpls/blocks/然后自定義版權信息的引導和字體。

1. <small>
2. <a href="http://twitter.github.io/bootstrap/" title="Bootstrap by Twitter" target="_blank">Bootstrap</a> is a front-end framework of Twitter, Inc. Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" title="MIT License" target="_blank">MIT License.</a>
3. </small>
4. <small>
5. <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>.
6. </small>

添加/安裝新字體

步驟1：添加字體包（S）

上傳你的字體包（S）templates/t3_bs3_blank/font。

步驟2：定義字體

現(xiàn)在打開文件assets.xml位于 templates/template_folder/etc文件夾定義字體（S）你剛才添加的

1. <stylesheets>
2. <file>fonts/font-awesome/css/font-awesome.min.css</file>
3. <file>fonts/novecentowide/stylesheet.css</file>
4. </stylesheets>

谷歌字體

T3框架支持谷歌字體，所有您需要做的就是定義谷歌的字體你想用在assets.xml文件（位于 templates/template_folder/etc）。

1. <stylesheets>
2. <file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
3. </stylesheets>

嵌入的樣式表和Javascript

增加新的樣式和JavaScript的T3框架，有2種方法來做。你可以聲明新的樣式和JavaScript來head.php文件或assets.xml文件。

# 1.使用head.php文件

在模板/ t3_bs3_blank /供應商/塊文件夾打開文件head.php，然后宣布新的樣式和JavaScript的如你所愿的格式如下。

添加CSS樣式表

1. <?php
2. // CUSTOM CSS
3. if(is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
4. $this->addStyleSheet(T3_TEMPLATE_URL.'/css/custom.css');
5. }
6. ?>

添加JavaScript

1. <?php
2. if(is_file(T3_TEMPLATE_PATH . '/templates/TEMPLATE-FOLDER-NAME/js/slider/lofslidernews.mt11.js')) {
3. $this->addScript(T3_TEMPLATE_URL.'/templates/TEMPLATE-FOLDER-NAME/js/slider/lofslidernews.mt11.js');
4. }
5. ?>

只要復制然后正確路徑的CSS和Javascript文件。

Joomla提供addstylesheet，addscriptdeclaration addScript，功能，這是你應該使用的。

# 2.使用assets.xml文件

另一種方法來添加新的CSS，Javascript嵌入他們assets.xml，位于templates/t3_bs3_blank/etc。 CSS樣式表和字體

添加要嵌入到站點的樣式表和字體的路徑.。使用下面的格式：

1. <stylesheets>
2. <file>fonts/novecentowide/stylesheet.css</file>
3. <file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
4. </stylesheets>

Javascript

添加路徑的Javascript文件要嵌入到你的網(wǎng)站。使用下面的格式：

1. <scripts>
2. <file>js/jquery.mousewheel.js</file>
3. <file>js/iscroll.js</file>
4. <file>js/script.js</file>
5. </scripts>

覆蓋404頁和脫機頁

1.重寫404頁

通常，每個模板都是自己的404頁的樣式。如果你想定制，這將引導您通過快速入門：

步驟1：添加文件error.php

要添加文件的最好方式是復制默認Joomla templates/system error.php文件然后復制到templates/t3_bs3_blank/

步驟2：自定義404頁

打開此文件并按照您希望的頁面自定義。

你的CSS文件的頁面將使用定義。

1. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/error.css" type="text/css" />

您可以創(chuàng)建新的CSS文件，404頁，但我們建議復制默認Joomla error.css templates/system/css/ CSS然后粘貼到templates/t3_bs3_blank/css/。打開文件并開始自定義。

一件事是，每個主題可以使用不同的CSS文件，使其具有不同的風格。

1. <?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/error.css')):?>
2. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/error.css" type="text/css" />
3. <?php endif; ?>

1. <?php
2. /**
3. * @package Joomla.Site
4. * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
5. * @license GNU General Public License version 2 or later; see LICENSE.txt
6. */
8. defined('_JEXEC') or die;
9. if (!isset($this->error)) {
10. $this->error = JError::raiseWarning(404, JText::_('JERROR_ALERTNOAUTHOR'));
11. $this->debug = false;
12. }
13. //get language and direction
14. $doc = JFactory::getDocument();
15. $this->language = $doc->language;
16. $this->direction = $doc->direction;
17. $theme = JFactory::getApplication()->getTemplate(true)->params->get('theme', '');
18. ?>
19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
21. <head>
22. <title><?php echo $this->error->getCode(); ?> - <?php echo $this->title; ?></title>
23. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/error.css" type="text/css" />
24. <?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/error.css')):?>
25. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/error.css" type="text/css" />
26. <?php endif; ?>
27. <link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
28. </head>
30. <body class="page-error">
31. <div class="error-page-wrap">
32. <div class="inner">
34. <div class="error-code"><?php echo $this->error->getCode(); ?></div>
36. <div class="error-message">
37. <h2>SORRY!</h2>
38. <p>
39. <?php echo $this->error->getMessage(); ?><br />
40. <?php echo JText::_('JERROR_LAYOUT_PLEASE_TRY_ONE_OF_THE_FOLLOWING_PAGES'); ?> <a href="/<?php echo $this->baseurl; ?>/index.php" title="<?php echo JText::_('JERROR_LAYOUT_GO_TO_THE_HOME_PAGE'); ?>"><?php echo JText::_('JERROR_LAYOUT_HOME_PAGE'); ?></a>
41. </p>
42. </div>
44. </div>
45. </div>
47. </body>
48. </html>

在每個主題404網(wǎng)頁的CSS文件位于templates/t3_bs3_blank/css/themes/theme_name/

注：

CSS文件不被當你編譯less/CSS。

2。覆蓋線下頁

若要自定義脫機頁，您只需要為您進行404頁定制，就可以使用相同的過程.

步驟1：添加新的offline.php文件

復制文件offline.php文件夾templates/system然后粘貼到templates/t3_bs3_blank

步驟2：自定義脫機頁

打開此文件并根據(jù)需要脫機頁自定義它。

你的CSS文件的頁面將使用定義。

1. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/offline.css" type="text/css" />

您可以創(chuàng)建新的脫機頁CSS文件，但我們建議復制默認Joomla offline.css文件模板/系統(tǒng)/ CSS然后粘貼到templates/t3_bs3_blank/css/。

你可以定義每個主題使用一個CSS文件，每個主題都會有不同的風格為脫機頁。

1. <?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/offline.css')):?>
2. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/offline.css" type="text/css" />
3. <?php endif; ?>

在每個主題的CSS文件的脫機頁位于templates/t3_bs3_blank/css/themes/theme_name/

注：

CSS文件不被當你編譯less/CSS。

添加“回頂”按鈕 “回到頂部”

按鈕允許您快速導航到您的網(wǎng)站的頂部。

步驟1：啟用“回頂”按鈕

在你的網(wǎng)站上添加這個按鈕，打開的文件templates/t3_bs3_blank/tpls/blocks/footer.php然后將下面的代碼添加到文件。

1. <!-- BACK TOP TOP BUTTON -->
3. <div id="back-to-top" data-spy="affix" data-offset-top="300" class="back-to-top hidden-xs hidden-sm affix-top">
5. <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-up"></i></button>
7. </div>
11. <script type="text/javascript">
13. (function($) {
15. // Back to top
17. $('#back-to-top').on('click', function(){
19. $("html, body").animate({scrollTop: 0}, 500);
21. return false;
23. });
25. })(jQuery);
27. </script>
29. <!-- BACK TO TOP BUTTON -->

步驟2：樣式“回頂”按鈕

打開templates/t3_bs3_blank/less/style.less然后添加樣式規(guī)則：

1. // Back to Top
2. // -----------
3. #back-to-top {
4. position: fixed;
5. right: @t3-global-margin;
6. top: auto;
7. z-index: 999;
8. display: none;
9. bottom: -60px;
11. @media (min-width: @screen-sm-min) {
12. display: block;
13. }
15. .btn {
16. background: none;
17. border: 2px solid @brand-primary;
18. color: @brand-primary;
19. height: 40px;
20. width: 40px;
21. border-radius: 50%;
22. line-height: 1;
23. padding: 0;
24. text-align: center;
25. .opacity(0.7);
26. .transition(0.2s);
28. &:hover, &:active, &:focus {
29. background: none;
30. outline: none;
31. .opacity(1);
32. }
33. }
35. &.affix {
36. bottom: @t3-global-margin * 2;
37. }
39. a {
40. outline: none;
41. }
43. i {
44. font-size: @font-size-large + 10;
45. line-height: 22px;
46. }
47. }

多語種megamenu

T3框架支持megamenu，當你運行一個多語種的網(wǎng)站，你需要配置多語言megamenu。按照本指南，使其工作。

請確保建立多語種網(wǎng)站的所有步驟都完成。如果這些步驟不做的還不夠，有2種方法來建立一個多語種的網(wǎng)站：手動設置或自動設置與JA多語種構件。這取決于你去哪一種方式。

創(chuàng)建語言菜單

步驟1：創(chuàng)建語言菜單

對于每種語言，您需要創(chuàng)建一個基于默認語言菜單系統(tǒng)的菜單系統(tǒng).。例如，你的網(wǎng)站是目前2種語言：英語和阿拉伯語。那么你應該創(chuàng)建基于現(xiàn)有阿拉伯語英語菜單菜單。

步驟2：復制默認模板樣式

轉到“擴展”模板管理器，然后復制默認模板樣式。

步驟3：重命名和指定復制模板樣式的語言

接下來，打開重復的模板樣式來重命名它。然后分配到所需的語言。

步驟4：指定菜單megamenu

現(xiàn)在打開導航標簽，使megamenu然后創(chuàng)建菜單菜單中的領域。

步驟5：Save Mengamenu設置

現(xiàn)在你要做的就是拯救megamenu設置，請記住，這一步是即使你沒有改變?nèi)魏螙|西，因為它的目的是檢測你的megamenu要求。

打開megamenu設置面板，然后確保你選擇阿拉伯語的右鍵菜單-主菜單。

多實例megamenu

T3框架允許你為Megamenu創(chuàng)建的多個實例。在寫這篇文章，我們將創(chuàng)建主菜單和網(wǎng)站頂部菜單megamenu。

步驟1：創(chuàng)建主菜單和topmenu

步驟2：創(chuàng)建主菜單和菜單項topmenu

步驟3：創(chuàng)建topnav.php文件

在templates/t3_bs3_blank/tpls/blocks然后重命名為topnav.php。

步驟4：自定義mainnav.php文件

打開mainnav.php文件然后改變：

“主菜單”是主菜單的菜單類型名稱。

添加類T3導航欄菜單

步驟5：自定義topnav.php文件

打開topnav.php文件然后替換下面的代碼。

步驟6：loadblock topmenu

打開文件home-1.php或default.php templates/t3_bs3_blank/tpls。

1. <?php $this->loadBlock ('topnav') ?>