Joomla 3.x：限制模块的大小

Question

我是 Joomla 新手，对 html/css 缺乏经验。我有一个模块可以向我的网站添加菜单。菜单显示正确，但我使用的位置似乎比我填充的位置专用的宽度多得多。如何调整位置的大小或占用该位置的模块的大小？我看不到任何允许我更改宽度的设置。

我想我必须修改 css 文件，对吗？如何找到负责模块宽度扩展的CSS？我天真地寻找“位置 8”，但这太容易了。

我很感激任何指点。

屏幕截图显示了我位于位置 8 的菜单以及该位置的大小（灰色区域）。它旁边是文章内容区域。我想解决整个问题，但我不确定该怎么做。 enter image description here

Firebug 向我展示了灰色区域的 html 值

<div id="sidebar" class="span3" style="overflow: visible; z-index: 1;">
<div class="sidebar-nav" style="overflow: visible; z-index: 1;">
<div class="moduletable sidebar.swmenu" style="overflow: visible; z-index: 1;">
<h3>LTL Menu</h3>
<table id="outertable" class="outer" align="left" style="overflow: visible; z-index: 1;">
<tbody style="overflow: visible; z-index: 1;">
<tr style="overflow: visible; z-index: 1;">
<td style="overflow: visible; z-index: 1;">
<div id="outerwrap" style="overflow: visible; z-index: 1;">
</td>
</tr>
</tbody>
</table>
<hr style="display:block;clear:left;margin:-0.66em 0;visibility:hidden;">
<script type="text/javascript">
<script type="text/javascript">
</div>
</div>

我的模板的index.php，我想改变位置-8的大小

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;

$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->getCfg('sitename');

if($task == "edit" || $layout == "form" )
{
    $fullWidth = 1;
}
else
{
    $fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Add current user information
$user = JFactory::getUser();

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span9";
}
else
{
    $span = "span12";
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
    $logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
    $logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
    $logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <jdoc:include type="head" />
    <?php
    // Use of Google Font
    if ($this->params->get('googleFont'))
    {
    ?>
        <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
        <style type="text/css">
            h1,h2,h3,h4,h5,h6,.site-title{
                font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
            }
        </style>
    <?php
    }
    ?>
    <?php
    // Template color
    if ($this->params->get('templateColor'))
    {
    ?>
    <style type="text/css">
        body.site
        {
            border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
            background-color: <?php echo $this->params->get('templateBackgroundColor');?>
        }
        a
        {
            color: <?php echo $this->params->get('templateColor');?>;
        }
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: <?php echo $this->params->get('templateColor');?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
    </style>
    <?php
    }
    ?>
    <!--[if lt IE 9]>
        <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
    <![endif]-->
</head>

<body class="site <?php echo $option
    . ' view-' . $view
    . ($layout ? ' layout-' . $layout : ' no-layout')
    . ($task ? ' task-' . $task : ' no-task')
    . ($itemid ? ' itemid-' . $itemid : '')
    . ($params->get('fluidContainer') ? ' fluid' : '');
?>">

    <!-- Body -->
    <div class="body">
        <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
            <!-- Header -->
            <header class="header" role="banner">
                <div class="header-inner clearfix">
                    <a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
                        <?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
                    </a>
                    <div class="header-search pull-right">
                        <jdoc:include type="modules" name="position-0" style="none" />
                    </div>
                </div>
            </header>
            <?php if ($this->countModules('position-1')) : ?>
            <nav class="navigation" role="navigation">
                <jdoc:include type="modules" name="position-1" style="none" />
            </nav>
            <?php endif; ?>
            <jdoc:include type="modules" name="banner" style="xhtml" />
            <div class="row-fluid">
                <?php if ($this->countModules('position-8')) : ?>
                <!-- Begin Sidebar -->
                <div id="sidebar" class="span3">
                    <div class="sidebar-nav">
                        <jdoc:include type="modules" name="position-8" style="xhtml" />
                    </div>
                </div>
                <!-- End Sidebar -->
                <?php endif; ?>
                <main id="content" role="main" class="<?php echo $span;?>">
                    <!-- Begin Content -->
                    <jdoc:include type="modules" name="position-3" style="xhtml" />
                    <jdoc:include type="message" />
                    <jdoc:include type="component" />
                    <jdoc:include type="modules" name="position-2" style="none" />
                    <!-- End Content -->
                </main>
                <?php if ($this->countModules('position-7')) : ?>
                <div id="aside" class="span3">
                    <!-- Begin Right Sidebar -->
                    <jdoc:include type="modules" name="position-7" style="well" />
                    <!-- End Right Sidebar -->
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="footer" role="contentinfo">
        <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
            <hr />
            <jdoc:include type="modules" name="footer" style="none" />
            <p class="pull-right">
                <a href="#top" id="back-top">
                    <?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
                </a>
            </p>
            <p>
                &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
            </p>
        </div>
    </footer>
    <jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

Answer 1

如果您检查：

<?php if ($this->countModules('position-8')) : ?>
                <!-- Begin Sidebar -->
                <div id="sidebar" class="span3">
                    <div class="sidebar-nav">
                        <jdoc:include type="modules" name="position-8" style="xhtml" />
                    </div>
                </div>
                <!-- End Sidebar -->
                <?php endif; ?>

position-8

在里面

div #sidebar

您必须在模块设置中添加后缀：高级 -> 模块类后缀：mymenu

然后在你的模板CSS中：templates/your_template/css/template.css

您必须添加：

div#sidebar div.mymenu{ width: 100%; }

*更改 100% 为更适合的数字

编辑：

您的模板是基于引导程序的响应式模板。您必须将

<div id="sidebar" class="span3">

span3 值编辑为 span2 或 span1，并在 head 部分中：

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
    $span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
    $span = "span9";
}
else
{
    $span = "span12";
}

将span9增加到span10或span11以填补空白。

Joomla 3.x：限制模块的大小

问题描述投票：0回答：1

1个回答

最新问题

Joomla 3.x：限制模块的大小

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1