PJS.Bootstrap CSS, alternate shapes, class usage

Topics: Administration, General
Jun 8, 2014 at 7:45 AM
In a site using the PJS.Bootstrap (love it!) I face the issue to handle (e.g.) the background for different 'ContentItems'.

Using 'spacelab.css' I changed in 'MyStyle.css' - selector '.well' to e.g. transparent (see code below). This works, however, it (as expected) changes ALL the backgrounds using Class="well".

I certainly tried to use 'alternate shapes' or 'The technical name of the Widget, used for css class and alternates' (see below: class="widget-colson1/2). However, PJS.Bootstrap wraps their <div> before the 'Orchard <div>' and therefore class="widget-colson1 doesn't have any effect!

Question: is there any 'CSS-technique' to keep the "class='well'" confined to a certain page!?
OR: do I miss any other - CSS - option!?

thanks for your time and ideas, ed

MyStyle.css:
.well{background-color: transparent; border: none;}

__source projection with 'shape' in ContentItem1:
<aside class="col-md-3">
  <div class="well well-sm">
    <div class="zone zone-aside-second">
<article class="widget-colson1 widget-aside-second widget-projection-widget widget">
.... etc
__source projection with 'shape' in ContentItem2:
<aside class="col-md-3">
  <div class="well well-sm">
    <div class="zone zone-aside-second">
<article class="widget-colson2 widget-aside-second widget-projection-widget widget">
.... etc
Jun 9, 2014 at 9:14 AM
Maybe jQuery way? Or you can have a different layout for the specific page where you can set the parent class.