Hi there- any help would be GREATLY appreciated!
Here's my problem:
I need to have my client be able to add a class to a repeatable container div.
This is b/c the container divs are actually "articles" that she will dupe, edit, and then add a class to...the addition of the class is essential because I will be using jQuery to categorize the article-div's by their class names.
So the class being added by the client is just a "hook" for my jquery code to use (code not added yet)to target/show/hide different categories of articles.
Please tell me if I missed something, but it seemed that, in order to add a class via P.L. to my repeatable/editable div ("articleContainer_Id", below), I had to wrap it inside another repeatle/editable element ("articleContainerWrapper_Id", below) first. (which I did, below).
However, I am now testing it and here's what happens:
1- In P.L., I select the OUTER div ("articleContainerWrapper_Id") to edit.
2- Once the editing window is open, I can now select & add a class to the INNER div ("articleContainer_Id"), from the style sheet drop-down menu. (the class I ADDED is (".mainsTest") which just changes the text color (as a test)).
When I tested the above, the layout broke...
I looked at the code in firebug & it seems that what caused it to break was the NEW class that was added in P.L. to the "articleContainer_Id" div OVERWROTE the existing class that was on that div(".articleContainer" class), instead of just adding the class.
The only work-around that comes to mind is adding ANOTHER empty/wrapper div with no classes assigned to it, just to use as a hook?
PLEASE HELP! Please feel free to look through my code on the server, etc.
I have all the main code below (pre-edited version/not broken):
<div id="recipeColumn" class="clearfix">
<div id="articleContainerWrapper_Id" class="cms-editable cms-repeat">
<div id="articleContainer_Id" class="articleContainer cms-editable cms-repeat">
<img id="topImg_Id" class="topImg cms-editable" src="images/articleContainerSamplePic1_628x297.jpg" alt="" />
<h3 id="articleTitle_Id" class="articleTitle cms-editable">Lamb Meatballs</h3>
<div class="hr"></div>
<div id="ingredContainer_Id" class="ingredContainer clearfix cms-editable">
<ul class="ingredients">
<li id="ingredCol1" class="cms-repeat">Ingredient 1</li>
</ul>
<ul class="ingredients">
<li id="ingredCol1" class="cms-repeat">Ingredient 1</li>
</ul>
<div class="hr"></div>
</div> <!--CLOSE ingredContainer div-->
<div class="articleText cms-editable" id="articleText_Id">
<p>Lorem ipsum dolor sit amet...</p>
</div> <!--CLOSE Article text-->
</div> <!--CLOSE articleContainer_Id-->
</div> <!--CLOSE articleContainerWrapper_Id-->
</div> <!--CLOSE recipeColumn-->
