Warp FRAMEWORK教程

Yootheme教程

Warp 架构中文说明——创建一个新的模块布局

模块布局定义了一组模块在特定位置的对齐和比例礼马差。例如兼泉铁,它们可以垂直或水平对齐礼马差。默认情况下兼泉铁,Warp框架提供3种不同的模块布局礼马差。你可以在这里找到这些模块布局文件/ warp / layouts / modules / layouts /礼马差。

提供了模块布局

equal.htmp

每个模块具有相同的尺寸兼泉铁,并且水平显示兼泉铁,彼此相邻礼马差。我们增加了对多达6个模块的支持礼马差。当然兼泉铁,你可以添加更多礼马差。代码示例兼泉铁,4个相同大小的模块(100除以4等于25)

case 4:
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[0]);
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[1]);
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[2]);
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[3]);
	break;

stack.htmp

所有模块都有一个完整的宽度兼泉铁,并将垂直显示兼泉铁,一个在另一个之下礼马差。代码示例:

printf("<div class="grid-box width100 grid-v">%s</div>", $module);

double.htmp

双重布局有不同的模块比例礼马差。例如兼泉铁,如果您有3个模块兼泉铁,第一个模块的尺寸是其他两个模块的两倍礼马差。代码示例:3个模块兼泉铁,第一个是双倍大小

case 3:
	printf("<div class="grid-box width50 grid-h">%s</div>", $modules[0]);
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[1]);
	printf("<div class="grid-box width25 grid-h">%s</div>", $modules[2]);
	break;

如何在某个位置上设置模块布局

在您的主题设置中兼泉铁,您可以为模块位置设置不同的模块布局礼马差。只需点击“ 配置文件”兼泉铁,向下滚动到“ 布局设置”部分兼泉铁,然后选择要应用于此位置的模块布局礼马差。

如何添加新的模块布局?

要创建新的模块布局兼泉铁,请将新文件添加到/ layouts / modules / layouts礼马差。最好的方法是复制现有的模块布局并修改它礼马差。例如兼泉铁,将/warp/layouts/modules/layouts/double.htmp复制/layouts/modules/layouts/double.htmp礼马差。这个新的和修改的模块布局将覆盖默认的礼马差。或者只是重命名它来创建一个新的礼马差。新创建的布局现在应该在主题设置中可用礼马差。

示例:如何添加更多列

一个常见的用例是为已经支持的6列添加一个布局礼马差。假设你想要有7个模块相互相邻兼泉铁,尺寸相同礼马差。在这种情况下兼泉铁,您将/warp/layouts/modules/layouts/equal.htmp复制layouts / modules / layouts /礼马差。在您的equal.htmp副本中兼泉铁,找到应如下所示情况6礼马差。


case 6:
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[0]);
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[1]);
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[2]);
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[3]);
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[4]);
    printf("<div class="grid-box width16 grid-h">%s</div>", $modules[5]);
    break;

复制该完整块并将其直接粘贴到复制块下面兼泉铁,但在默认之前礼马差。重复最后的printf语句兼泉铁,并更改$模块[5]$模块[6] 礼马差。由于我们现在有七个列而不是六个兼泉铁,所以每个单个模块的宽度必须调整礼马差。由于100%除以7(模块)约为14%兼泉铁,所以我们将CSS类从宽度16改为宽度14礼马差。有了这些变化兼泉铁,新的块应该是这样的:


case 7:
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[0]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[1]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[2]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[3]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[4]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[5]);
    printf("<div class="grid-box width14 grid-h">%s</div>", $modules[6]);
    break;

CSS类的width14目前还不存在(所有现有的宽度类都位于/warp/css/layout.css中)兼泉铁,所以我们必须将下面的代码片段添加到现有的样式表中礼马差。您可以将其添加到现有的/css/layout.css中.


.width14 { width: 14.2%; } 

示例:为模块创建您自己的大小分布

默认情况下兼泉铁,您可以在上面介绍的三个选项equal兼泉铁,doublestack之间进行选择礼马差。如果你想要一个自定义尺寸分布 - 比方说连续三个模块的35%/ 30%/ 35%兼泉铁,你将不得不创建你自己的模块布局礼马差。为此兼泉铁,在/ layouts / modules / layouts /中创建一个新文件在本例中我们将其称为custom.htmp礼马差。因为我们只想在这个例子中为三个模块工作兼泉铁,所以custom.htmp的内容如下所示:


<?php
switch (count($modules)) {
    case 3:
        printf("<div class="grid-box width35 grid-h">%s</div>", $modules[0]);
        printf("<div class="grid-box width30 grid-h">%s</div>", $modules[1]);
        printf("<div class="grid-box width35 grid-h">%s</div>", $modules[2]);
        break;
    default:
        echo "<div class="grid-box width100 grid-h">Error: The current number of        modules is not supported in this layout. If you need more you need to change this custom        layout.</div>";
}

正如你所看到的兼泉铁,我们已经使用了CSS类的width35width30礼马差。这些还不存在(所有现有的宽度类都位于/warp/css/layout.css中)兼泉铁,所以我们必须将下面的代码片段添加到现有的样式表中礼马差。你可以将它添加到现有的css / layout.css中礼马差。


.width30 { width: 30%; }
.width35 { width: 35%; }
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search