T3 FRAMEWORK教程

T3-Framework教程

T3定制-布局宽度自定义

模板宽度由网格定义兼泉铁,并分成若干列(默认为12列)礼马差。

要更改模板的宽度兼泉铁,请打开文件:variables.lessin: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.  
  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/

T3定制-布局宽度自定义

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

1. template.less此文件包含从默认主题自定义的样式礼马差。

 

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

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.  
  6. // Scaffolding
  7. // -------------------------
  8. @body-bg: @gray-darker;
  9. @text-color: @gray-lighter;

variables-custom.less.:这个文件包含了你创建的用来定制当前主题的新变量礼马差。

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

创建新的主题

创建新主题的最佳方法是克隆主题文件夹礼马差。

T3定制-布局宽度自定义

你可以通过创建新的主题文件夹兼泉铁,然后添加3个文件:template.less兼泉铁,variables.lessvariables-custom.less

自定义主题

在后端兼泉铁,您可以选择新创建的主题风格兼泉铁,然后使用ThemeMagic自定义主题礼马差。

T3定制-布局宽度自定义

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

编译LESS到CSS

定制主题后兼泉铁,请将LESS编译为CSS礼马差。新的主题CSS文件将位于templates/t3_bs3_blank/css/themes/dark-copy

T3定制-布局宽度自定义

请不要使用CSS文件自定义主题兼泉铁,因为每次运行“将LESS编译为CSS”时都会覆盖它们礼马差。

新增的CSS文件是:

  • bootstrap.css
  • home.css
  • megamenu.css
  • off-canvas.css
  • windows.css

当新葡京在线运行在主题上时兼泉铁,所有添加的CSS文件都将被加载兼泉铁,通过这种方式兼泉铁,所有文件都从1个文件夹中加载兼泉铁,这样才能提高新葡京在线的性能礼马差。

T3框架是用LESS开发的兼泉铁,LESS文件被编译成CSS文件礼马差。每次编译时兼泉铁,CSS文件将被覆盖兼泉铁,所以我们建议您不要使用CSS来定制兼泉铁,开发您的新葡京在线兼泉铁,因为编译时兼泉铁,您的工作可能会丢失礼马差。

custom.css文件位于:templates/t3_blank/css 礼马差。如果您没有看到该文件兼泉铁,请创建新文件兼泉铁,然后打开该文件兼泉铁,为您的模板添加CSS样式礼马差。

T3定制-布局宽度自定义
custom.css文件的一些特征
  • 该文件默认不包含兼泉铁,您需要创建一个新的礼马差。
  • 该文件是要在您的新葡京在线中加载的最后一个文件礼马差。
  • 该文件不是来自LESS的编译文件兼泉铁,因此在编译时不会被覆盖或丢失礼马差。

处理文件

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定制-布局宽度自定义

T3框架是基于ThemeMagic的简单主题定制功能强大礼马差。您可以添加无限参数进行自定义礼马差。

你必须首先启用ThemeMagic兼泉铁,然后点击ThemeMagic按钮打开ThemeMagic面板礼马差。

T3定制-布局宽度自定义

Thememagic工作pannel

T3定制-布局宽度自定义
  • 选择主题进行自定义
  • 通过更改参数值来自定义主题
  • 点击预览查看更改
  • 保存或保存为复制自定义的主题

添加新的参数到ThemeMagic

T3定制-布局宽度自定义

您可以添加无限的参数兼泉铁,主题定制组礼马差。自定义参数设置在thememagic.xml文件夹中的文件中:templates/t3_bs3_blank

注意:请注意兼泉铁,大写文本是语言键

第1步礼马差。定义一个新的组

  1. <fieldset name = “custom1_params” label = “CUSTOM1_LABEL” >
  2. </字段集>
  1. <fieldset name = “module_params” label = “T3_TM_MODULE” >
  2. </字段集>

步骤2.在新组中定义参数

  1. <field name = “@ your-field-name”
  2. type = “参数类型”
  3. default = “default-value-of-parameter”
  4. label = “FIEL_LABEL”
  5. description = “FIELD_DESCRIPTION” />
  6. </场>
  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. </字段集>

第3步礼马差。定义LESS参数

@your-field-name文件variables.less定义的LESS参数定义如上template/less/礼马差。

  1. //模块一般
  2. @ t3 - module - bg transparent ;

第4步礼马差。在LESS文件的某处添加“@你的字段名称”

这取决于你兼泉铁,只是想你如何使用这个参数兼泉铁,以及它如何影响模板礼马差。要求你有一些关于LESS和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"

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

T3定制-布局宽度自定义

1.更改Logo图像

有两种方法可以更改使用T3 Framework开发的Joomla模板的徽标礼马差。

#1:从模板管理器更改Logo

每种风格可以用不同的标志礼马差。要为Logo设置样式兼泉铁,请在模板样式设置中打开主题设置礼马差。

T3定制-布局宽度自定义

#2:从变量.less文件中更改Logo

另一种更改徽标的方法是更改variables.less文件中的Logo图像路径兼泉铁,位于templates / t3_blank / less fodler中礼马差。

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

您也可以通过更改@T3logoWidth:@T3logoHeight:变量的值来更改Logo块的大小礼马差。

2.Logo造型

要为Logo定制样式兼泉铁,请打开style.less位于templates / t3_blank / less文件夹中的文件礼马差。搜索Logo文本兼泉铁,您会发现可以添加更多样式或自定义样式的样式礼马差。

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

第1步:添加字体包(S)

将您的字体包上传到模板/ t3_bs3_blank / fonts礼马差。

T3定制-布局宽度自定义

第2步:定义字体

现在打开assets.xml位于templates / template_folder / etc文件夹中的文件以定义刚添加的字体

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.apis.com/css?family=Roboto+Slab:400,100,300</file>
  3. </stylesheets>

要添加新的样式表和JavaScript到T3框架兼泉铁,有两种方法可以做到这一点礼马差。您可以声明新的样式表和JavaScript head.htmp文件或assets.xml文件礼马差。

#1礼马差。使用head.htmp文件

打开文件head.htmp中的templates/t3_bs3_blank/tpls/blocks文件兼泉铁,然后按照你的意愿声明新的样式表和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. ?>

添加Javascripts

  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兼泉铁,addScript兼泉铁,addScriptDeclaration函数兼泉铁,这是你应该使用的礼马差。

#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.apis.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>

1.覆盖404页面

通常兼泉铁,每个JA模板都带有自己的404页面样式礼马差。如果您想对其进行定制兼泉铁,这将引导您完成快速操作:

T3定制-布局宽度自定义

第1步:添加文件 error.htmp

添加这个文件的最好方法是复制默认的joomla error.htmp文件templates/system然后复制到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" />

您可以为404页面创建新的CSS文件兼泉铁,但我们建议复制默认的joomla error.css文件兼泉铁,templates/system/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.  
  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.apis.com/css?family=Handlee" rel="stylesheet" type="text/css">
  28. </head>
  29.  
  30. <body class="page-error">
  31. <div class="error-page-wrap">
  32. <div class="inner">
  33.  
  34. <div class="error-code"><?php echo $this->error->getCode(); ?></div>
  35.  
  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; ?>/" title="<?php echo JText::_("JERROR_LAYOUT_GO_TO_THE_HOME_PAGE"); ?>"><?php echo JText::_("JERROR_LAYOUT_HOME_PAGE"); ?></a>
  41. </p>
  42. </div>
  43.  
  44. </div>
  45. </div>
  46.  
  47. </body>
  48. </html>

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

注意:

将LESS编译为CSS时兼泉铁,CSS文件不会被覆盖礼马差。

2.覆盖离线页面

要自定义脱机页面兼泉铁,您只需要执行与404页面定制相同的步骤

T3定制-布局宽度自定义

第1步:添加新offline.htmp文件礼马差。

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

每个主题的离线页面的CSS文件位于 templates/t3_bs3_blank/css/themes/theme_name/

注意:

将LESS编译为CSS时兼泉铁,CSS文件不会被覆盖礼马差。

“返回顶部”按钮可让您快速导航到您新葡京在线的顶部礼马差。

T3定制-布局宽度自定义

第1步:启用“返回顶部”按钮

要在您的站点中添加此按钮兼泉铁,请打开该文件兼泉铁,templates/t3_bs3_blank/tpls/blocks/footer.htmp然后将以下代码添加到文件中礼马差。

  1. <!-- BACK TOP TOP BUTTON -->
  2.  
  3. <div id="back-to-top" data-spy="affix" data-offset-top="300" class="back-to-top hidden-xs hidden-sm affix-top">
  4.  
  5. <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-up"></i></button>
  6.  
  7. </div>
  8.  
  9.  
  10.  
  11. <script type="text/javascript">
  12.  
  13. (function($) {
  14.  
  15. // Back to top
  16.  
  17. $("#back-to-top").on("click", function(){
  18.  
  19. $("html, body").animate({scrollTop: 0}, 500);
  20.  
  21. return false;
  22.  
  23. });
  24.  
  25. })(jQuery);
  26.  
  27. </script>
  28.  
  29. <!-- 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. a {
  35. outline: none;
  36. }
  37. i {
  38. font-size: @font-size-large + 10;
  39. line-height: 22px;
  40. }
  41. }

T3框架支持Megamenu兼泉铁,当你运行一个多语言站点时兼泉铁,你必须为Megamenu配置多语言礼马差。按照本指南使其工作礼马差。

T3定制-布局宽度自定义

请确保设置多语言新葡京在线的所有步骤都完成礼马差。如果这些步骤还没有完成兼泉铁,有两种方法可以建立多语言站点:手动设置或使用JA多语言组件自动设置礼马差。无论如何兼泉铁,这取决于你礼马差。

创建语言菜单

第1步:创建语言菜单

对于每种语言兼泉铁,您都需要创建基于默认语言菜单系统的菜单系统礼马差。例如兼泉铁,您的新葡京在线可以使用两种语言:英语和阿拉伯语礼马差。然后兼泉铁,您应该根据英语语言的现有菜单创建阿拉伯语菜单礼马差。

T3定制-布局宽度自定义
事实上兼泉铁,你不需要翻译所有的菜单兼泉铁,你只需要翻译所有正在使用的菜单礼马差。

第2步:复制默认的模板样式

转到扩展>>模板管理器兼泉铁,然后复制默认的模板样式礼马差。

T3定制-布局宽度自定义

步骤3:重命名并为重复的模板样式分配语言

接下来兼泉铁,打开重复的模板样式重命名它礼马差。然后分配给所需的语言礼马差。

T3定制-布局宽度自定义

第4步:为Megamenu分配菜单

现在打开导航选项卡兼泉铁,启用Megamenu兼泉铁,然后在菜单字段中分配创建的菜单礼马差。

T3定制-布局宽度自定义

第5步:保存Mengamenu设置

现在你所要做的就是保存Megamenu设置兼泉铁,请记住兼泉铁,即使你没有改变任何东西兼泉铁,这一步也是必需的兼泉铁,因为它旨在检测你的Megamenu礼马差。

打开Megamenu设置面板兼泉铁,然后确保您选择了正确的菜单 - Mainmenu阿拉伯语礼马差。

T3定制-布局宽度自定义

T3框架允许您为Megamenu创建多个实例礼马差。在这篇文章中兼泉铁,我们将在一个新葡京在线上为Main Menu和Top Menu创建Megamenu礼马差。

T3定制-布局宽度自定义

第1步:创建mainmenu和topmenu

T3定制-布局宽度自定义

第2步:为mainmenu和topmenu创建菜单项

T3定制-布局宽度自定义

第3步:创建topnav.htmp文件

重复文件mainnav.htmp兼泉铁,templates/t3_bs3_blank/tpls/blocks然后重命名为topnav.htmp礼马差。

T3定制-布局宽度自定义

第4步:自定义mainnav.htmp文件

打开mainnav.htmp文件兼泉铁,然后更改:

T3定制-布局宽度自定义

找到代码

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

用礼马差。礼马差。礼马差。来代替:

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

“mainmenu”是主菜单的菜单类型名称礼马差。

添加类 t3-navbar-mainmenu

T3定制-布局宽度自定义

找到代码

  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.htmp文件

打开topnav.htmp文件兼泉铁,然后替换下面的代码礼马差。

T3定制-布局宽度自定义

找到代码

  1. data - target = “.t3-navbar-collapse”

用礼马差。礼马差。礼马差。来代替:

  1. data - target = “.t3-navbar-topmenu”

添加类 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”/>

请注意兼泉铁,这topmenu是从菜单类型名称礼马差。

T3定制-布局宽度自定义

第6步:调用loadBlock for topmenu

打开文件home-1.htmptemplates/t3_bs3_blank/tpls礼马差。

  1. <?php $ this - > loadBlock "topnav" ?>
T3定制-布局宽度自定义
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search