[英]Overriding media queries for particular width - CSS
我創建了Responsive 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%,則可以得到理想的結果,但是我無法弄清楚如何在另一個css文件中覆蓋這些值。
我試圖用Google搜索,但是我得到的只是關於媒體查詢的優先級,而與覆蓋無關。
編輯:我已經使用子主題的.info文件添加了新的CSS文件。 以下是各個.info文件的內容。 我遵循了drupal文檔來創建子主題。 但是,我真的不覺得這在Drupal的體系結構中是個問題,但是重寫CSS Media查詢可能必須以不同的方式完成,得出此結論的原因是因為custom.css文件中的任何其他css屬性都被渲染,但覆蓋的媒體查詢。
原版的:
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文件中。
如果要通過drupal_add_css添加此CSS
drupal_add_css('/path/to/css.css',array('weight'=>'9999',));
使css文件與父主題完全相同。
如果問題仍然存在,請禁用CSS緩存-清除緩存,然后再檢查一次。
另一選擇查看您是否在子主題的.info文件或各種import語句中准確提及子主題路徑。
有一個技巧,您可以使用這種替代。
例如。 您有一個基本主題,文件base/css/donotwant.css
,在子主題的.info
文件中,您必須指定stylesheets[all][] = donotwant.css
並將其神奇地排除在外。
之后,您可以按照所需的方式在子主題中編碼樣式。
我的錯! 還有一個額外的“;” 在媒體查詢的開頭。 因此,沒有執行媒體查詢替代。 顯然是一個額外的“;” 我猜大概是CSS的結尾,不知道為什么從來沒有考慮過其余的CSS!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.