登录 注册

登录

问题 T3模板下 设置一个模块full width

更多
2016年04月07日 10:18 #1 作者: likunzhou
白老师你好

我在JA Smashboard模板下mainbody.php里面message与component之间加了一个模块的位置,并且修改了模块占位为span12,在variables.less里也照葫芦画瓢 添加了一夜更高尺寸像素的代码。可是虽然仍是响应式布局,但是宽度仍然最大不超过1200px,当显示器尺寸或分辨率很高时无法full width。
请教白老师该怎么处理这个呢?

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月07日 22:19 #2 作者: Joomla之门
把你修改过的文件及涉及到的源代码都贴出来(注意使用 code 标记),我们一起探讨一下。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月07日 23:39 - 2016年04月07日 23:40 #3 作者: likunzhou
首先mainbody.php里部分由
// Layout configuration
  $layout_config = json_decode ('{
    "one_sidebar1": {
      "default" : [ "span9 pull-left"         , "span3"             ],
      "wide"    : [],
      "xtablet" : [ "span8 pull-left"         , "span4"             ],
      "tablet"  : [ "span9"                   , "span9 spanfirst"   ]
    },
    "no_sidebar": {
      "default" : [ "span9" ]
    }
  }');
 
  // positions configuration
  $sidebar1 = 'sidebar-1';
 
  // Detect layout
  if ($this->countModules($sidebar1)) {
    $layout = 'one_sidebar1';
  } else {
    $layout = 'no_sidebar';
  }
  $layout = $layout_config->$layout;
 
  $col = 0;
?>
 
<section id="t3-mainbody" class="container t3-mainbody">
	<div class="row">
	  <!-- MAIN CONTENT -->
	  <div id="t3-content" class="t3-content <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
	    <jdoc:include type="message" />
      	    <jdoc:include type="component" />
	  </div>
	  <!-- //MAIN CONTENT -->


修改为了
// Layout configuration
  $layout_config = json_decode ('{
    "one_sidebar1": {
      "default" : [ "span12 pull-left"         , "span3"             ],
      "wide"    : [],
      "xtablet" : [ "span12 pull-left"         , "span4"             ],
      "tablet"  : [ "span9"                   , "span9 spanfirst"   ]
    },
    "no_sidebar": {
      "default" : [ "span12" ]
    }
  }');
 
  // positions configuration
  $sidebar1 = 'sidebar-1';
 
  // Detect layout
  if ($this->countModules($sidebar1)) {
    $layout = 'one_sidebar1';
  } else {
    $layout = 'no_sidebar';
  }
  $layout = $layout_config->$layout;
 
  $col = 0;
?>
 
<section id="t3-mainbody" class="wrap container t3-mainbody">
	<div class="row">
	  <!-- MAIN CONTENT -->
	  <div id="t3-content" class="t3-content <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
	    <jdoc:include type="message" />
            <jdoc:include type="modules" name="<?php $this->_p('insertbody') ?>" style="T3Xhtml" />
	    <jdoc:include type="component" />
	  </div>
	  <!-- //MAIN CONTENT -->

templateDetails.xml文件里添加了
<position>insertbody</position>

variables.less 文件里添加了
// 1920px min
@T3gridWidth1920:         1920px;  // T3 add
@gridGutterWidth1920:     20px;
@gridColumnWidth1920:     floor((@T3gridWidth1920 - @gridGutterWidth1920 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1920:        (@gridColumns * @gridColumnWidth1920) + (@gridGutterWidth1920 * (@gridColumns - 1));
 
// 1600px min
@T3gridWidth1600:         1600px;  // T3 add
@gridGutterWidth1600:     20px;
@gridColumnWidth1600:     floor((@T3gridWidth1600 - @gridGutterWidth1600 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1600:        (@gridColumns * @gridColumnWidth1600) + (@gridGutterWidth1600 * (@gridColumns - 1));
 
// 1920px min
@fluidGridColumnWidth1920:  percentage(@gridColumnWidth1920/@gridRowWidth1920);
@fluidGridGutterWidth1920:  percentage(@gridGutterWidth1920/@gridRowWidth1920);
 
// 1600px min
@fluidGridColumnWidth1600:  percentage(@gridColumnWidth1600/@gridRowWidth1600);
@fluidGridGutterWidth1600:  percentage(@gridGutterWidth1600/@gridRowWidth1600);

其他的未作变动
最后修改: 2016年04月07日 23:40 由 likunzhou.

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月08日 11:47 - 2016年04月08日 11:48 #4 作者: 羿无名
你把你的模块位置放在了class为container的section里面了,container类是响应式的类,根据屏幕宽度不同对应的设置了对应的宽度,这个宽度不是100%,最宽是1200px,所以不管你里面怎么设置,它都不可能比container宽,你要全宽的话要么改container的宽度,要么让你的模块位放在container外面。
最后修改: 2016年04月08日 11:48 由 羿无名.

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月08日 14:33 #5 作者: likunzhou
感谢楼上的回复,请教如何改container的宽度?

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月09日 10:01 #6 作者: 野草工作室
T3的模板,可以在后台直接修改
进入模板管理,点击编辑模板风格,点击模板的ThemeMagic功能,找到左栏的Grid区域,就可以看到不同屏幕下container的宽度值。

当然,如果你是需要full width,更好的做法是创建自己的子模板,然后HTML里不使用container,这样你的内容区就会自动占满屏幕。具体的子模板创建方法建议查看T3文档,这里就不详述。


野草工作室提供专业 Joomla建站 服务,点击查看我们的 Joomla案例

登录 或者   注册一个会员帐号 来参与讨论

更多
2016年04月09日 15:48 #7 作者: likunzhou
谢谢野草工作室的回复

这个JA Smashboard模板比较怪异,在ThemeMagic里只能调字体大小什么的,没有grid等类似调大小的选项。把他从container里拿出来显示的更奇怪,而且也不是fullwidth。
感觉要放弃了 :pinch:

登录 或者   注册一个会员帐号 来参与讨论