Hit enter to search or ESC to close

Frequently Search Tags

T3 FRAMEWORK教程

T3-Framework教程

T3定制-布局宽度自定义

53435

模板宽度由网格定义，并分成若干列（默认为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. }

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.  
  6. // Scaffolding
  7. // -------------------------
  8. @body-bg: @gray-darker;
  9. @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定制-布局宽度自定义

您可以在创建主题的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个文件夹中加载，这样才能提高网站的性能。

使用CSS自定义模板

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

ThemeMagic自定义

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

LOGO定制

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>

Google字体

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框架，有两种方法可以做到这一点。您可以声明新的样式表和JavaScript head.php文件或assets.xml文件。

＃1。使用head.php文件

打开文件夹head.php中的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.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页面

通常，每个JA模板都带有自己的404页面样式。如果您想对其进行定制，这将引导您完成快速操作：

T3定制-布局宽度自定义

第1步：添加文件 error.php

添加这个文件的最好方法是复制默认的joomla error.php文件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.googleapis.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; ?>/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>
  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.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文件，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="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>" />
  43. <?php endif; ?>
  44.  
  45. <div class="brand">
  46. <a href="/\index.php" 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::_('index.php', 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.php然后将以下代码添加到文件中。

  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;
  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，当你运行一个多语言站点时，你必须为Megamenu配置多语言。按照本指南使其工作。

T3定制-布局宽度自定义

请确保设置多语言网站的所有步骤都完成。如果这些步骤还没有完成，有两种方法可以建立多语言站点：手动设置或使用JA多语言组件自动设置。无论如何，这取决于你。

创建语言菜单

第1步：创建语言菜单

对于每种语言，您都需要创建基于默认语言菜单系统的菜单系统。例如，您的网站可以使用两种语言：英语和阿拉伯语。然后，您应该根据英语语言的现有菜单创建阿拉伯语菜单。

T3定制-布局宽度自定义
事实上，你不需要翻译所有的菜单，你只需要翻译所有正在使用的菜单。

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

转到扩展>>模板管理器，然后复制默认的模板样式。

T3定制-布局宽度自定义

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

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

T3定制-布局宽度自定义

第4步：为Megamenu分配菜单

现在打开导航选项卡，启用Megamenu，然后在菜单字段中分配创建的菜单。

T3定制-布局宽度自定义

第5步：保存Mengamenu设置

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

打开Megamenu设置面板，然后确保您选择了正确的菜单 - Mainmenu阿拉伯语。

T3定制-布局宽度自定义

多实例megamenu

T3框架允许您为Megamenu创建多个实例。在这篇文章中，我们将在一个网站上为Main Menu和Top Menu创建Megamenu。

T3定制-布局宽度自定义

第1步：创建mainmenu和topmenu

T3定制-布局宽度自定义

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

T3定制-布局宽度自定义

第3步：创建topnav.php文件

重复文件mainnav.php，templates/t3_bs3_blank/tpls/blocks然后重命名为topnav.php。

T3定制-布局宽度自定义

第4步：自定义mainnav.php文件

打开mainnav.php文件，然后更改：

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

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

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.php或default.php在templates/t3_bs3_blank/tpls。

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

第一个发表评论

joomlass-logo31.png

Search