覆盖特定宽度的媒体查询 - CSS

Question

我已经创建了响应式 Bartik 的子主题，我需要在不触及原始主题的情况下减小侧边栏的宽度：

原文：

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

CSS 在子主题中：

/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
    #sidebar-first {
        width: 18% !important;
        margin-left: -92% !important; /* LTR */
    }
    #sidebar-second {
        width: 18%;
        margin-left: -32%; /* LTR */
        clear: none;
    }
}

令我惊讶的是，原来的 CSS 正在生效。除了媒体查询之外，我可以覆盖任何其他 css 属性。如果我在原始 css 文件本身中将 25% 更改为 18% 并将 -100% 更改为 -92%，我将获得所需的结果，但我无法弄清楚如何在另一个 [=] 中覆盖这些值41=] 文件.

我尝试 google 但我得到的只是关于媒体查询中的优先级，而不是关于覆盖。

编辑： 我使用子主题的 .info 文件添加了新的 CSS 文件。以下是相应 .info 文件的内容。我按照 drupal 文档来创建子主题。但是，我真的不觉得这是 Drupal 体系结构中的问题，但是覆盖 CSS 媒体查询可能必须以不同的方式完成，得出这个结论的原因是因为 [=] 中的任何其他 css 属性38=] 文件正在呈现，但覆盖的媒体查询除外。

原文：

name = Responsive Bartik Tiles
description = Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

副主题：

name = Indian Snakes Responsive Bartik Tiles
description = Indian Snakes Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

base theme = responsive_bartik_tiles

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css
stylesheets[all][] = css/custom.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

唯一的区别是增加了行 -

stylesheets[all][] = css/custom.css

在子主题的 .info 文件中。

Answer 1

如果您通过 drupal_add_css
添加此 css
drupal_add_css( '/path/to/css.css', 大批（ 'weight' => '9999', ) );
保持 css 文件与父主题完全相同。
如果问题仍然存在，请禁用 CSS 缓存 - 清除缓存并再检查一次。
另一种选择 查看您是否在子主题的 .info 文件或各种 import 语句中准确提及子主题路径。

Answer 2

我的错！有一个额外的';'在媒体查询的开头。因此，只有媒体查询覆盖没有被执行。显然是一个额外的';'大概意思是css我猜，不知道为什么剩下的css从来没有考虑过！

Answer 3

有一个技巧可以用于这种覆盖。

例如。你有一个基本主题，有一个文件 base/css/donotwant.css，在你的子主题的 .info 文件中你必须指定 stylesheets[all][] = donotwant.css 它会被神奇地排除。

之后，您可以在子主题中以您想要的方式对样式进行编码。

覆盖特定宽度的媒体查询 - CSS

Overriding media queries for particular width - CSS

html

css

drupal

drupal-theming