T3 FRAMEWORK教程

T3-Framework教程

T3定制

布局宽度定制

模板宽度由网格定义,分为若干列(默认为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; 

现在更改响应布局的大小。

T3框架

这里是网格系统。你可以改变网格的数量。

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

主题定制

所有主题文件夹都位于:templates/t3_bs3_blank/less/themes/

T3框架

在每个主题文件夹中,它有3个文件:

1.template.less这个文件包括风格,定制默认主题。

  1. // Logo Text
  2. // ----------
  3. .logo-text h1 {
  4. color: @white;
  5. }
  6. // Taglines
  7. .logo-text .site-slogan {
  8. display: block;
  9. font-size: @font-size-base;
  10. margin-top: 5px;
  11. }

2.variables.less:此文件包含自定义变量的默认variables.less文件。

  1. // Global values
  2. // --------------------------------------------------
  3. @t3-base-img-path: "../../../images";
  4. @t3-theme-img-path: "@{t3-base-img-path}/themes/dark";
  5. // Scaffolding
  6. // -------------------------
  7. @body-bg: @gray-darker;
  8. @text-color: @gray-lighter;

3.variables-custom.less:此文件包含新的变量,创建自定义当前主题。

  1. // Links
  2. // -------------------------
  3. @link-color: lighten(@blue, 20%);

创建新的主题

创建新主题的最佳方法是拷贝主题文件夹。

T3框架

你可以手动创建新的主题文件夹,然后添加3个文件:template.less,variables.less和variables-custom.less

自定义主题

在后台,你可以选择新创建的主题风格你想自定义主题与thememagic。

T3框架

您可以自定义主题少文件创建的主题:templates/t3_bs3_blank/less/themes/dark-copy 

编制less的CSS

在定制主题,请编译less、CSS。新的主题的CSS文件将位于templates/t3_bs3_blank/css/themes/dark-copy

T3框架

添加CSS文件:

bootstrap.css

home.css

megamenu.css

off-canvas.css

windows.css

所有添加的CSS文件将被加载时,网站运行的主题,通过这种方式,所有的文件都是从1个文件夹才可以提高站点的性能负载。


自定义模板的CSS

Custom.css文件位于:templates/t3_blank/css。如果你不看文件,创建新文件,然后打开文件添加CSS样式模板。

T3框架

一些特点Custom.css文件

默认情况下不包含该文件,需要创建新文件。

该文件是在您的站点中加载的最后一个文件。

该文件不是一个编译文件从少所以不会被覆盖或丢失当你编译。

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

进入CSS样式模板。

  1. .show-grid {
  2. margin-top: 10px;
  3. margin-bottom: 20px;
  4. }
  5. .show-grid [class*="span"] {
  6. background-color: #eee;
  7. text-align: center;
  8. -webkit-border-radius: 3px;
  9. -moz-border-radius: 3px;
  10. border-radius: 3px;
  11. min-height: 40px;
  12. line-height: 40px;
  13. }
  14. .show-grid:hover [class*="span"] {
  15. background: #ddd;
  16. }

让我们检查前端

T3框架


thememagic定制

T3框架是强大的简单主题定制基于thememagic。您可以添加无限的参数定制。

你必须使thememagic第一,然后点击thememagic按钮打开thememagic面板。

T3框架

工作面板

T3框架

选择要自定义的主题

通过更改参数值自定义主题

点击预览查看更改

保存或保存为复制

自定义主题

添加新的参数

T3框架

您可以添加无限的参数,主题定制组。定制的参数设置在文件夹中的文件thememagic.xml:templates/t3_bs3_blank

步骤1.定义一个新的组

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

步骤2.新组中定义参数

  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>
  1. <fieldset name="module_params" label="T3_TM_MODULE">
  2. <field name="t3-module-bg" type="color" class="t3tm-color"label="T3_TM_VARS_MODULE_BGCOLOR_LABEL"description="T3_TM_VARS_MODULE_BGCOLOR_DESC" />
  3. </fieldset>

步骤3.定义参数少

定义的参数少,具有相同的名称,如上述定义@your-field-name variables.less /template/less/。

  1. // Module General
  2. @t3-module-bg: transparent;

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

这取决于你,只是想你想如何使用这个参数,以及它如何影响到模板。你必须有一定的基础知识和CSS。我们建议你添加到文件:style.less

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

步骤5.定义语言的关键

打开模板en-GB.tpl_t3_bs3_blank.ini位于language\en-GB\语言文件和定义你使用以上语言的关键参数确定。

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

检查是否有新的组和参数被添加

T3框架


LOGO定制

1.改变标志形象

有2种方法来改变标志为T3框架开发的Joomla模板。

# 1:改变的logo模板管理

每一种风格都可以有不同的标志。要设置logo样式,请在模板样式设置中打开主题设置。

T3框架

# 2:改变的标志从variable.less文件

另一种方式来改变这个标志是改变variables.less文件logo图像的路径,它位于templates/t3_blank/less。

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

2.logo造型

为标志的自定义风格,打开文件style.less位于templates/t3_blank/less文件夹。搜索logo文本,你会发现样式,您可以添加更多的样式或自定义它。

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

页脚信息定制

T3框架

T3空白默认页脚信息包括3件事:

T3页脚标识

T3的版权信息

自定义版权信息

1.自定义页脚标识T3

# 1:如何禁用页脚标识?

禁用页脚标识,打开T3模板管理器,在General选项卡,禁用T3logo的选择

T3框架

# 2:改变链接,T3页脚

打开footer.php文件位于 templates/t3_bs3_blank/tpls/blocks/,改变页脚标识链接,添加/更改类风格的logo…

T3框架

  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" href="http://t3-framework.org" 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样式。

T3框架

  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. }
  12. // Sizes
  13. .t3-logo {
  14. width: 182px;
  15. height: 50px;
  16. }
  17. .t3-logo-small {
  18. width: 60px;
  19. height: 30px;
  20. }
  21. // Styles
  22. .t3-logo,
  23. .t3-logo-color {
  24. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-color.png");
  25. }
  26. .t3-logo-small,
  27. .t3-logo-small.t3-logo-color {
  28. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-color.png");
  29. }
  30. .t3-logo-dark {
  31. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-dark.png");
  32. }
  33. .t3-logo-small.t3-logo-dark {
  34. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-dark.png");
  35. }
  36. .t3-logo-light {
  37. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-big-light.png");
  38. }
  39. .t3-logo-small.t3-logo-light {
  40. background-image: url("http://joomlart.s3.amazonaws.com/images/jat3v3-documents/logo-complete/t3logo-small-light.png");
  41. }

您可以更改logo图像,logo图像的大小…

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

前端外观

T3框架

2。自定义T3版权信息

T3的版权信息在default.php文件放置在templates/t3_bs3_blank/html/mod_footer。打开文件和自定义T3版权信息。

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. */
  9. // no direct access
  10. defined('_JEXEC') or die;
  11. ?>
  12. <div class="module">
  13. <small><?php echo $lineone; ?> Designed by <a href="http://www.joomlart.com/" title="Visit Joomlart.com!" <?php echo method_exists('T3', 'isHome') && T3::isHome() ? '' : 'rel="nofollow"' ?>>JoomlArt.com</a>.</small>
  14. <small><?php echo JText::_( 'MOD_FOOTER_LINE2' ); ?></small>
  15. </div>

3.自定义引导和字体版权信息

打开footer.php文件位于templates/t3_bs3_blank/tpls/blocks/然后自定义版权信息的引导和字体。

T3框架

  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 <ahref="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。

T3框架

步骤2:定义字体

现在打开文件assets.xml位于 templates/template_folder/etc文件夹定义字体(S)你刚才添加的

T3框架

  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文件要嵌入到你的网站。使用下面的格式:

  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页的样式。如果你想定制,这将引导您通过快速入门:

T3框架

步骤1:添加文件error.php

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

T3框架

步骤2:自定义404页

打开此文件并按照您希望的页面自定义。

你的CSS文件的页面将使用定义。

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

您可以创建新的CSS文件,404页,但我们建议复制默认Joomla error.css templates/system/css/ CSS然后粘贴到templates/t3_bs3_blank/css/。打开文件并开始自定义。

T3框架

一件事是,每个主题可以使用不同的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. */
  7. defined('_JEXEC') or die;
  8. if (!isset($this->error)) {
  9. $this->error = JError::raiseWarning(404, JText::_('JERROR_ALERTNOAUTHOR'));
  10. $this->debug = false;
  11. }
  12. //get language and direction
  13. $doc = JFactory::getDocument();
  14. $this->language = $doc->language;
  15. $this->direction = $doc->direction;
  16. $theme = JFactory::getApplication()->getTemplate(true)->params->get('theme', '');
  17. ?>
  18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  19. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  20. <head>
  21. <title><?php echo $this->error->getCode(); ?> - <?php echo $this->title; ?></title>
  22. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/error.css" type="text/css" />
  23. <?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/error.css')):?>
  24. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/error.css" type="text/css" />
  25. <?php endif; ?>
  26. <link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
  27. </head>
  28. <body class="page-error">
  29. <div class="error-page-wrap">
  30. <div class="inner">
  31. <div class="error-code"><?php echo $this->error->getCode(); ?></div>
  32. <div class="error-message">
  33. <h2>SORRY!</h2>
  34. <p>
  35. <?php echo $this->error->getMessage(); ?><br />
  36. <?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>
  37. </p>
  38. </div>
  39. </div>
  40. </div>
  41. </body>
  42. </html>

在每个主题404网页的CSS文件位于templates/t3_bs3_blank/css/themes/theme_name/

注:

CSS文件不被当你编译less/CSS。

2。覆盖线下页

若要自定义脱机页,您只需要为您进行404页定制,就可以使用相同的过程.

T3框架

步骤1:添加新的offline.php文件

复制文件offline.php文件夹templates/system然后粘贴到templates/t3_bs3_blank

T3框架

步骤2:自定义脱机页

打开此文件并根据需要脱机页自定义它。

你的CSS文件的页面将使用定义。

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

您可以创建新的脱机页CSS文件,但我们建议复制默认Joomla offline.css文件模板/系统/ CSS然后粘贴到templates/t3_bs3_blank/css/。

T3框架

你可以定义每个主题使用一个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; ?>
  1. <?php
  2. /**
  3. * $JA#COPYRIGHT$
  4. */
  5. defined('_JEXEC') or die;
  6. $app = JFactory::getApplication();
  7. $theme = JFactory::getApplication()->getTemplate(true)->params->get('theme', '');
  8. //check if t3 plugin is existed
  9. if(!defined('T3')){
  10. if (JError::$legacy) {
  11. JError::setErrorHandling(E_ERROR, 'die');
  12. JError::raiseError(500, JText::_('T3_MISSING_T3_PLUGIN'));
  13. exit;
  14. } else {
  15. throw new Exception(JText::_('T3_MISSING_T3_PLUGIN'), 500);
  16. }
  17. }
  18. $t3app = T3::getApp($this);
  19. ?>
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
  22. <head>
  23. <jdoc:include type="head" />
  24. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/offline.css" type="text/css" />
  25. <?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/offline.css')):?>
  26. <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/offline.css" type="text/css" />
  27. <?php endif; ?>
  28. <?php
  29. // T3 BASE HEAD
  30. $t3app->addHead();?>
  31. </head>
  32. <body>
  33. <div id="frame" class="outline">
  34. <div class="offline-page">
  35. <?php if ($app->getCfg('offline_image') && file_exists($app->getCfg('offline_image'))) : ?>
  36. <img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>" />
  37. <?php endif; ?>
  38. <div class="brand">
  39. <a href="/\index.php" title="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>"><?php echo htmlspecialchars($app->getCfg('sitename')); ?></a>
  40. </div>
  41. <div class="offline-message">
  42. <?php if ($app->getCfg('display_offline_message', 1) == 1 && str_replace(' ', '', $app->getCfg('offline_message')) != ''): ?>
  43. <p>
  44. <?php echo $app->getCfg('offline_message'); ?>
  45. </p>
  46. <?php elseif ($app->getCfg('display_offline_message', 1) == 2 && str_replace(' ', '',JText::_('JOFFLINE_MESSAGE')) != ''): ?>
  47. <p>
  48. <?php echo JText::_('JOFFLINE_MESSAGE'); ?>
  49. </p>
  50. <?php endif; ?>
  51. </div>
  52. <div class="login-form">
  53. <form action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login">
  54. <fieldset class="input">
  55. <div class="wrap-input">
  56. <p id="form-login-username">
  57. <input name="username" id="username" type="text" class="inputbox" alt="<?php echo JText::_('JGLOBAL_USERNAME') ?>" size="18" placeholder="<?php echo JText::_('JGLOBAL_USERNAME') ?>" />
  58. </p>
  59. <p id="form-login-password">
  60. <input type="password" name="password" class="inputbox" size="18" alt="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" id="passwd" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
  61. </p>
  62. <?php if (count($twofactormethods) > 1) : ?>
  63. <p id="form-login-secretkey">
  64. <label for="secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY') ?></label>
  65. <input type="text" name="secretkey" class="inputbox" size="18" alt="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" id="secretkey" />
  66. </p>
  67. <?php endif; ?>
  68. </div>
  69. <?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
  70. <p id="form-login-remember">
  71. <input type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" id="remember" />
  72. <label for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
  73. <input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGIN') ?>" />
  74. </p>
  75. <?php endif; ?>
  76. <input type="hidden" name="option" value="com_users" />
  77. <input type="hidden" name="task" value="user.login" />
  78. <input type="hidden" name="return" value="<?php echo base64_encode(JURI::base()) ?>" />
  79. <?php echo JHtml::_('form.token'); ?>
  80. </fieldset>
  81. </form>
  82. <jdoc:include type="message" />
  83. </div>
  84. </div>
  85. </div>
  86. </body>
  87. </html>

在每个主题的CSS文件的脱机页位于templates/t3_bs3_blank/css/themes/theme_name/

注:

CSS文件不被当你编译less/CSS。


添加“回顶”按钮 “回到顶部”

按钮允许您快速导航到您的网站的顶部。

T3框架

步骤1:启用“回顶”按钮

在你的网站上添加这个按钮,打开的文件templates/t3_bs3_blank/tpls/blocks/footer.php然后将下面的代码添加到文件。

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

步骤2:样式“回顶”按钮

打开templates/t3_bs3_blank/less/style.less然后添加样式规则:

  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;
  10. @media (min-width: @screen-sm-min) {
  11. display: block;
  12. }
  13. .btn {
  14. background: none;
  15. border: 2px solid @brand-primary;
  16. color: @brand-primary;
  17. height: 40px;
  18. width: 40px;
  19. border-radius: 50%;
  20. line-height: 1;
  21. padding: 0;
  22. text-align: center;
  23. .opacity(0.7);
  24. .transition(0.2s);
  25. &:hover, &:active, &:focus {
  26. background: none;
  27. outline: none;
  28. .opacity(1);
  29. }
  30. }
  31. &.affix {
  32. bottom: @t3-global-margin * 2;
  33. }
  34. {
  35. outline: none;
  36. }
  37. {
  38. font-size: @font-size-large + 10;
  39. line-height: 22px;
  40. }
  41. }

多语种megamenu

T3框架支持megamenu,当你运行一个多语种的网站,你需要配置多语言megamenu。按照本指南,使其工作。

T3框架

请确保建立多语种网站的所有步骤都完成。如果这些步骤不做的还不够,有2种方法来建立一个多语种的网站:手动设置或自动设置与JA多语种构件。这取决于你去哪一种方式。

创建语言菜单

步骤1:创建语言菜单

对于每种语言,您需要创建一个基于默认语言菜单系统的菜单系统.。例如,你的网站是目前2种语言:英语和阿拉伯语。那么你应该创建基于现有阿拉伯语英语菜单菜单。

T3框架

步骤2:复制默认模板样式

转到“扩展”模板管理器,然后复制默认模板样式。

T3框架

步骤3:重命名和指定复制模板样式的语言

接下来,打开重复的模板样式来重命名它。然后分配到所需的语言。

T3框架

步骤4:指定菜单megamenu

现在打开导航标签,使megamenu然后创建菜单菜单中的领域。

T3框架

步骤5:Save Mengamenu设置

现在你要做的就是拯救megamenu设置,请记住,这一步是即使你没有改变任何东西,因为它的目的是检测你的megamenu要求。

打开megamenu设置面板,然后确保你选择阿拉伯语的右键菜单-主菜单。

T3框架


多实例megamenu

T3框架允许你为Megamenu创建的多个实例。在写这篇文章,我们将创建主菜单和网站顶部菜单megamenu。

T3框架

步骤1:创建主菜单和topmenu

T3框架

步骤2:创建主菜单和菜单项topmenu

T3框架

步骤3:创建topnav.php文件

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

T3框架

步骤4:自定义mainnav.php文件

打开mainnav.php文件然后改变:

T3框架

Find the code

  1. data-target=".t3-navbar-collapse"
  1. data-target=".t3-navbar-mainmenu"

“主菜单”是主菜单的菜单类型名称。

添加类T3导航栏菜单

T3框架

Find the code

  1. <div class="t3-navbar-collapse navbar-collapse collapse"></div>
  1. <div class="t3-navbar-mainmenu t3-navbar-collapse navbar-collapse collapse"></div>

步骤5:自定义topnav.php文件

打开topnav.php文件然后替换下面的代码。

T3框架

Find the code

  1. data-target=".t3-navbar-collapse"

Replace with:

  1. data-target=".t3-navbar-topmenu"
  1. <div class="t3-navbar-collapse navbar-collapse collapse"></div
  1. <div class="t3-navbar-topmenu t3-navbar-collapse navbar-collapse collapse"></div>
  1. <jdoc:include type="<?php echo $this->getParam('navigation_type', 'megamenu') ?>" name="<?php echo $this->getParam('mm_type', 'mainmenu') ?>" />
  1. <jdoc:include type="<?php echo $this->getParam('navigation_type', 'megamenu') ?>" name="'topmenu" menutype="topmenu" />

步骤6:loadblock topmenu

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

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

T3框架

说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search