2 different master/detail data sets

Question

Hello. I have created a master/detail dataset for a photo gallery, with customised css. Whenever I tried to use this same spry tool for different purposes, so with different customised css, the photo gallery data set was roped into the new layout. To make the two independent, I tried saving the master/detail css of the photo gallery to an external style sheet - not sure why (I'm new to this), thought it would detach those rules from the default settings. Now when I add a new data set it appears with no css attributes at all. Help much appreciated.

Answer 1

I understand completely  the desire to do something that turns out to be really complicated! But therein lies a real goal.
Have you uploaded this to a server, so I can see your code in action (or frozen...as the case may be!)?
To target specific IDs:
Wrap the entire masterdetail widget in a div:
<div id="galleryone">
<div class="MasterDetail">
        <div spry:region="ds1" class="MasterContainer">
          <div class="MasterColumn" spry:repeat="ds1" spry:setrow="ds1" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected">{thumbnail}</div>
        </div>
        <div spry:detailregion="ds1" class="DetailContainer">
          <div class="DetailColumn">
            <h2>{title}</h2>
          </div>
          <div style="position: relative;"><div class="DetailColumn">{image}
          <div class="DetailColumn credit">{credit}</div></div></div>
          <div class="DetailColumn top"><em>{medium}</em>   {size}</div>
          <div class="DetailColumn">{date}</div>
          <div class="DetailColumn">{place}</div>
          <div class="DetailColumn">{price}</div>
          <div class="DetailColumn" id="sold">{sold}</div>
        </div>
        <br style="clear:both" />
      </div>
</div>
Then you can restyle the CSS file by making a complete copy of the CSS file and re-linking it:
@charset "UTF-8";
/* SpryMasterDetail.css */
/* Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Master/Detail structure container.
* If you want to constrain the width of the Master/Detail structure, set a width on
* the Master/Detail container. By default, our structure expands horizontally to fill
* up available space.
#galleryone .MasterDetail {
    font: 100% Verdana, Geneva, sans-serif;
    margin: 2px;
/* This is the selector for the Master Container element which houses all the MasterColumn
* classes. By default the Master column occupy about 35% from the width of the
* entire structure.
#galleryone .MasterDetail .MasterContainer {
    width: 99px;
    float: left;
    height: 650px;
    overflow-y: auto;
/* This is the selector for a Master Column element which holds the actual data for
* a master column.
#galleryone .MasterDetail .MasterColumn {
    font-size: 75%;
    padding:5px 10px 5px 0;
    cursor:pointer;
    float: left;
/* This is the selector for a highlighted Master Column element.
#galleryone .MasterDetail .MasterColumnHover {
    background-color: #090;
/* This is the selector for a selected Master Column element.
#galleryone .MasterDetail .MasterColumnSelected {
    padding: 25px 5px;
    color: black;
/* This is the selector for the Detail Container element which houses all the DetailColumn
* classes. By default the Detail column occupy about 60% from the width of the
* entire structure.
#galleryone .MasterDetail .DetailContainer {
    padding:10px 0 0 0;
    width: 605px;
    float: right;
    overflow: auto;
#galleryone .DetailColumn.position {
    position: relative;
/* This is the selector for a Detail Column element which holds the actual data for
* a detail column.
#galleryone .MasterDetail .DetailColumn {
    margin-bottom: 1px;
Notice that I have pre-pended the #galleryone to every style in this stylesheet. Be sure to leave a space after #galleryone. This focuses specifically on the master/detail in <div id="galleryone">. Make sure this file is loaded after any generic master/detail CSS file. Better yet, make all your galleries specific with IDs (both in the page and in a CSS file).
If I only have small changes to make, I would add the additional styles into the generic stylesheet:
.MasterDetail {
    font: 100% Verdana, Geneva, sans-serif;
    margin: 2px;
#galleryone .MasterDetail {margin: 30px;}
Note that I only made a style selector for the one attribute that changed. All the other attributes will remain the same (font: 100% Verdana, Geneva, sans-serif;)
It is possible that styling other than specifically master/detail styling will vary from gallery to gallery.
For instance, if h2 will change from gallery to gallery:
#galleryone h2 {color: red;}
Do this in either your general or your master/detail stylesheet.
Curly brackets are the two keys to the right of the "P" key on the keyboard...shift to get curly brackets.
When you make a secondary stylesheet (named to correspond to its use), you must attach it to your page using the Link icon at the bottom of the CSS Styles Panel. Browse to the file and press the Link radio button. Then your additional styles will show in your stylesheet.
Beth