I have created a sub-theme of Responsive Bartik and I need to reduce the width of sidebars without touching the original theme:
Original:
@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 in sub-theme:
/* 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;
}
}
To my surprise the original CSS is taking effect. Except for the media queries any other css properties I am able to override. If I change 25% to 18% and -100% to -92% in the original css file itself I am getting the desired result, but I am not able to figure out how to override these values in another css file.
I tried to google but all I am getting is regarding the priorities in media queries but nothing regarding overriding.
Edit: I have added the new CSS file using .info file of the sub-theme. Below are the contents of respective .info file. I have followed a drupal documentation to create sub-theme. However, I dont really feel this is a problem in Drupal's architecture but overriding CSS Media query has to be done in a different way probably, the reason for this conclusion is because any other css attributes in custom.css file are being rendered with exception of overridden media query.
Original:
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"
Sub-theme:
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"
The only difference is the addition of line -
stylesheets[all][] = css/custom.css
in sub-theme's .info file.
My bad! There was an extra ';' at the beginning of the media query. Due to this only media query overrides were not being executed. Apparently an extra ';' would probably mean the end of css I guess, do not know why rest of the css was never considered!