相当于Bootstrap主题中的#page&#页面包装 -- 7 领域 和 theming 领域 drupal 相关 的问题

What is the equivalent of #page & #page-wrapper in Bootstrap theme?


简体版||繁體版
1
vote

问题

中文

在大多数drupal主题中,我发现IDS #page #page-wrapper ,但它在 bootstrap主题。

我试图找到主题,但最大我可以找到的是 .container 但是只封闭那个微粒部分i.e.标题,主要内容,页脚。

在引导主题中有任何ID或类,它涵盖了 99887665,几乎所有其他主题中的 #page ,或者如果没有我如何添加那个?

进行实验,我确实尝试在 99887666 之类的 99887666,如其他主题,

  <div id="page-wrapper">   <div id="page">   

并添加以下CSS来检查,

  #page {     border: 5px solid red; } #page-wrapper {     border: 5px solid blue; }   

但它适用于浏览器的边框,而不是页面的实际宽度,如下图所示。

在此处输入图像说明

因此,如这种方式,我们无法将其添加到引导主题。

如何应用#page和#page-wrapper来启动主题?谢谢。

英文原文

In most of the Drupal themes I find the IDs #page and #page-wrapper, but it is not available in the Bootstrap theme.

I tried to find in theme, but maximum I could find is class .container but is covers only that particulate section i.e. header, main-content, footer.

Is there any ID or class in Bootstrap theme which covers entire webpage like #page does in almost all other themes OR if there is not how can I add that?

To experiment, I did try to add following to page.tpl.php like other themes,

<div id="page-wrapper">   <div id="page"> 

And added following CSS to check,

#page {     border: 5px solid red; } #page-wrapper {     border: 5px solid blue; } 

But it applies to border of the browser not to actual width of the page as shown in the following image.

enter image description here

Hence looks like this way we can not add this to Bootstrap theme.

Any idea or suggestion how to apply #page and #page-wrapper to Bootstrap theme? Thanks.

     
   
   

回答列表

1
 
vote
vote
最佳答案
 

经过几次尝试和错误方法,我确实找到了这个解决方案。

为一个注释,我使用较少。

步骤1:添加 <div> page.tpl.php

在子主题的 page.tpl.php

文件中添加以下代码。
  <div id="page-wrapper">   <div id="page">   

step-2:在子主题的 style.less 中添加以下CSS。

  @media(min-width:@screen-sm-min) {       #page-wrapper {       width: @container-tablet;       margin-left: auto;       margin-right: auto;       border: 1px solid red; }     } @media(min-width:@screen-md-min) {       #page-wrapper {       width: @container-desktop;       margin-left: auto;       margin-right: auto;       border: 1px solid red;}     } @media(min-width:@screen-lg-min) {          #page-wrapper {       width: @container-large-desktop;       margin-left: auto;       margin-right: auto;       border: 1px solid red;}     }   

所以,这种方式,添加的 max-age0 将与响应主题的响应主题相和谐,它不会允许站点中的任何其他容器,不会干扰本机响应设计bootstrap。

在此处输入图像描述

进一步欢迎任何建议或评论。

 

After several try and error method, I did find the solution for this.

For a note, I am using LESS.

Step-1: Add a <div> to page.tpl.php

Add following code in the page.tpl.php file of your sub-theme.

<div id="page-wrapper">   <div id="page"> 

Step-2: Add the following CSS in the style.less of your sub-theme.

@media(min-width:@screen-sm-min) {       #page-wrapper {       width: @container-tablet;       margin-left: auto;       margin-right: auto;       border: 1px solid red; }     } @media(min-width:@screen-md-min) {       #page-wrapper {       width: @container-desktop;       margin-left: auto;       margin-right: auto;       border: 1px solid red;}     } @media(min-width:@screen-lg-min) {          #page-wrapper {       width: @container-large-desktop;       margin-left: auto;       margin-right: auto;       border: 1px solid red;}     } 

So, this way, the added <div> will be in harmony of Responsive theme of bootstrap and it will not displace any other container in the site and will not interfere with the native responsive design of Bootstrap.

enter image description here

Further Any suggestion or comment are welcome.

 
 

相关问题

0  布局详细信息节点+ CKEDITOTER布局  ( Layout detail node ckeditor layout ) 
当我创建这样的内容类型的节点时: 我可以添加图像,段落,......。但它在节点的详细信息页面上看起来如此: 没有图像,没有段落,......这可能是这个问题? 我正在使用过滤的HTML文本格式。当我检查段落的HTML时,没有图像,没有。只是文字...... 这些是我的上下文过滤器的设置过滤了HTML:...

0  显示自定义块内容  ( Display custom block content ) 
我想知道显示块内容的正确方法。 到目前为止,我知道几种方式: 1)将HTML直接输出以阻止内容。 IE。 $ block ['内容'] ='hello'; 2)使用预处理和主题函数和输出变量到模板文件。 3)向块内容提供阵列。 IE。 $block = array( 'contact' => ar...

0  从hook_preprocess_menu()中访问翻译和语言URL  ( Accessing translation and language url from hook preprocess menu ) 
我在drupal8中有设置语言和翻译,影响我的URL myurl.com/ru myurl.com/us myurl.com/fr 如果查找正在访问的国家/地区,我需要做什么,所以我可以将变量添加到枝条主题层 这是工作正常的钩子 /** * Implements hook_preprocess_HO...

25  通过Twig模板中的多个值内容字段迭代  ( Iterate through multiple value content field in twig template ) 
我需要控制 node.html.twig中 99887661 字段的渲染模板。 此工作: {{ content.field_admin_tags }} - 渲染所有(标签+所有字段值) {{ content.field_admin_tags.0 }} - 仅渲染字段中的第一个值,没有标签 问题:我...

0  IE修复欧米茄主题?  ( Ie fix for omega theme ) 
在过去,我已经使用了用于设计网站的融合主题。最近我开始使用omega主题,并实现了一个大问题。我去了IE,看起来很糟糕。在融合中,有一个IE修复,其中有一个单独的CSS文件,用于IE。我似乎无法弄清楚如何在欧米茄中这样做。我知道必须有办法,因为默认网站是在欧米茄的主题,它在IE中看起来很好。我如何解决这个问题? ...

17  将JavaScript文件添加到管理页面  ( Add javascript files to the administrative pages ) 
如何使用模块在每个管理页面中添加JavaScript / CSS文件? ...

2  为用户帐户表格覆盖的模板  ( Wich template to override for user account form ) 
我正在为我的Drupal 8站点构建主题,我想使用这样的用户信息创建自定义个人资料页面: http://bootsnipp.com/snippets/feature/profile-card 但我找不到正确的模板来覆盖我可以访问username,名称所需的所有信息,图片和例如他的地址。另外,我找不到用户编辑表单来更改...

0  将内容类型添加到每个视图行的类  ( Adding content type to the class of each views row ) 
我有一个视图,有一个过滤器只能从2种内容类型中拉出结果。我希望每个视图条目都有一个显示节点内容类型的类。我该怎么做? ...

1  如何在页面字段之间插入块内容?  ( How can i insert block content between page fields ) 
我的页面内容类型有两个实体参考类型,引用其他内容类型。 英雄 引用 英雄在页面顶部显示,我希望页面底部的引号。 在这两条内容之间,我有我想要显示的自定义块和视图。 如何在其他自定义内容下有英雄和引号节点? ...

7  如何更改语言项链接?  ( How do i alter a language item link ) 
我正在寻找在某些情况下修改Drupal 8的默认输出,语言切换器。理想情况下,我希望能够在枝模板中做到这一点,不必生成 Massive PHP文件,overwwwrites整个链路生成系统并添加一个大如果需要覆盖的情况。 我认为输出布局应该在类似于这个答案(这个答案输出了每种语言的相同URL) 我正在使用引导作为基本...

8  一个页面网站与Drupal 7  ( One page website with drupal 7 ) 
我看到许多个人或公司网站与一页的网站风格。单页设计非常好,可以尽可能快地给出您的所有信息,而无需让用户点击以查找您是谁,我真的想在Drupal中应用它们。 我还试图通过使用单页网站模块来实现一页的网站( http://drupal.org/project/single_page_website )这对简单页面来说非...

1  如何使用图像样式路径的图像与枝模板  ( How to get image with image style path to a twig template ) 
我创建了一个名为TV_Adbackground的字段,在提起录制为Uplaood背景图像的BLE。 上传工作很棒! 如何获取文件的路径或图像样式介质或略管进入枝模板? ... <div id="advertisement"> <!-- background-image uploaded on theme se...

-1  有没有办法将自定义类/包装器添加到页面节点,类似于使用视图创建的页面?  ( Is there a way to add custom classes wrappers to page nodes similar to pages cr ) 
我正在研究设计师提出的5个主题颜色,我需要与特定页面相关联。主题有2个区域需要受主题颜色的影响:侧边栏和内容。 我希望将一个字段添加到基本页面内容类型链接到分类词词汇表,其中术语将是颜色,所以我可以在创建页面时选择主题。我需要将一个类添加一个术语高度,足以影响页面内容类型的所有其他字段。 这将是在视图中的行等级,其中...

0  如何将自定义juquerry脚本添加到欧米茄主题?  ( How do i add custom jquerry script to omega theme ) 
我发现了这个代码: (function ($) { Drupal.behaviors.betterExposedFiltersExpandCollapseNested = { attach:function (context, settings) { // first collapse t...

6  如何防止在hook_menu()中在自定义页面回调上显示主题  ( How to prevent displaying the theme on a custom page callback in hook menu ) 
我正在使用 foo/myurl :在 foo/myurl中开发自定义模块 function foo_menu() { $items = array(); $items['foo/myurl'] = array( // change 'foo/myurl' to the url you want '...

0  如何从节点Twig文件添加到html.twig?  ( How to add to html twig from a node twig file ) 
我需要将物品映像添加到Facebook和Twitter上共享的帖子,这是由如下所示的Meta标签完成的,如下所示 <head> <head-placeholder token="{{ placeholder_token|raw }}"> <title>{{ head_title|safe_join(' |...

1  如何使用其他模板创建自定义页面?  ( How can i create a custom page with a different template ) 
我想要一个页面(例如,在 http://example.com/mypage )显示作为空白页面。如何为该特定页面使用不同的模板,以将其显示为空白页面? ...

9  如何在我自己的主题中覆盖管理主题?  ( How do i override the admin theme in my own theme ) 
我创建了自己的drupal 8主题: mytheme.info.yml: name: My Theme description: 'Drupal 8 Theme' type: theme base theme: bartik core: '8.x' mytheme.libraries.yml gl...

2  从模块传递数组以在模板中呈现  ( Pass array from module to render in template ) 
我在该模块中有一个模块名称mysite mysite。我的函数名为mysite_preprocess_panels_pane。具有阵列,我想呈现此阵列Inn panel.tpl.php。我的代码不起作用。请问,谢谢。 function mysite_preprocess_panels_pane(&$variabl...

4  如何仅在语言切换块中显示语言,其中存在翻译?  ( How to only display languages in language switcher block where a translation exi ) 
我需要在Drupal 7站点上启用数千种语言,但我不想为每个语言创建语言切换器侧栏的渲染开销。语言切换块的默认行为是显示在没有灰色字体中的翻译并击中的语言。 如何修改语言切换程序块,仅显示活动链接,即仅显示存在翻译的语言?我从这篇文章来看但需要帮助调整我的需求: <?php function YOURTHE...

0  如何覆盖词汇模板,但仅在特定内容类型上  ( How do i override the vocabulary template but only on a specific content type ) 
我有一个名为"扇区" 的词汇和一个名为"新闻" 的内容类型。基本上,VOCAB显示哪个扇区博客文章与关于该扇区的相应CMS页面相关的和链接。 如何自定义模板,显示该内容类型的页面上的词汇表? 非常感谢。 ...

2  覆盖添加/编辑表单  ( Overwrite add edit form ) 
我想做的就是拥有一个?.tpl.php文件,我可以写自己的html内容。最小的例子是: <div class="my-class"> <?php drupal_render($input_label); ?> <br /> <?php drupal_render($input_...

3  Lightbox2模块不允许悬停?  ( Lightbox2 module does not allow hover ) 
我在视图中使用LightBox2模块,以便在单击"较大" 中。这很好,但我也想在mouse_over上显示图像的预览。我还使用hover_preview模块,但我似乎无法使用单个视图使用两个模块。 这是我想要的一个例子: http://gochicorgohome.com/shop/15975, 242,49668 ...

0  如何使用template.php [复制]有条件地加载JavaScript  ( How to conditionally load javascript with template php ) 
这个问题已经在这里有答案: 关闭 9年前。 可能的重复: 如何从主题的template.php 中添加CSS和JS文件.PHP > 我有一个内容类型,它涉及每个节点的一些js魔法。如何将其编...

0  访问引用的节点字段 - 字段级别模板  ( Access a referenced nodes fields field level templating ) 
我的内容类型,具有参考字段到另一个内容类型。这允许无限量的条目。 我为此字段创建了一个模板: field--node--field-my-fields.html.twig 我希望能够访问我引用的节点的字段。通常您可以通过访问实体来执行此操作,但我似乎无法执行此操作。 {% for item in items...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有