I have two template overrides set up. One so I can display this page differently from other pages:


And another so I can display my event related pages differently:


On the first one, the sidebars are styled as they are on other pages. But on the event page, the styling goes away.

In firebug, the breakdown seems to happen at this point:

<div class="rt-block featured-block">

Prior to that point, everything appears identical in firebug. On the first override, clicking on that div indicates my gantry-custom.css is being applied. But when I inspect the same div in firebug for the event page, it does not show gantry-custom.css being applied.

I am at a loss for what could be happening here.


1 Answer 1


No it's not identical. There is a small difference between both pages:

Take a look at the div with the id rt-sidebar-a. In your first page its placed in a container with classes rt-grid-3 rt-pull-6 and in the second page the parent container has the classes rt-grid-2 rt-pull-8.

Your CSS rule for styling this left sidebar is #rt-main .rt-grid-3 .rt-block which is the answer why this rule is applied to the first page and not to the second.

enter image description here enter image description here

  • Thanks! I am trying to figure out the simplest CSS selector that would apply to both .rt-grid-2 and rt-grid-3. Selectors like #rt-main .rt-grid-3 .rt-grid-2 wouldn't work, what I am looking for is the equivalent of "select elements that come from either of these classes". I suppose statements such as #rt-main .rt-grid-3 .rt-block, #rt-main .rt-grid-2 .rt-block { Is that considered clean code? Commented Sep 15, 2015 at 9:01
  • I think that is absolutely valid code
    – fruppel
    Commented Sep 15, 2015 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.