Is there a way to create alternately coloured backgrounds, i.e., one paragraph has a grey background, the next is white, and repeat this throughout a text box?
I’ve tried manually putting graphic boxes behind. However, as you can imagine this can get messy and doesn’t appear the same in different browsers.
Perhaps tables? But do tables give you a great amount of flexibility? I need anchors and different formating throughout the sentence.
There is an action to make alternating stripes in a table, but that
would mean you would need to make a table, place each paragraph in a
separate table cell, and thus render your page into a hopeless mess,
accessibility-wise. Try this approach, using the Protaculous Action.
Apply Protaculous to the page, and choose prototype-packed as the
library.
Click on the HTML box that contains the paragraphs you want to
stripe, and note what name appears in the Title box on the left-most
tab of the Item Inspector. (Be sure to note upper and lower case, as
JavaScript is case-sensitive.)
Click somewhere else on the page so the Actions palette shows the
page-level Actions again, and switch to the Protaculous tab if it
isn’t already front.
Click on the top Function Body button, and paste in the following
code, and then replace the placeholder word YourBox with the exact
name you noted in step 2. Also change the color code #cccccc to
whatever color you want your alternate paragraphs to be.
var container = 'YourBox';
var alt = rowstripe = '#cccccc';
Element.addMethods({
stripe: function(elm){
var elm = $(elm);
rowstripe = (rowstripe == 'transparent') ?
alt : 'transparent';
if(!elm.getStyle('background-color') ||
elm.getStyle('background-color') == rowstripe){
elm.setStyle('background-color:transparent');
}else{
elm.setStyle('background-color:' + rowstripe);
}
return elm;
}
});
$(container).select('p').invoke('stripe');
Okay the dialog, then preview in a browser, and see if you get
alternating stripes. If you don’t, post a link to the page so I can
look at it in Firebug and see what went blooey.
Walter
On Jul 12, 2010, at 7:58 AM, Graeme wrote:
Is there a way to create alternately coloured backgrounds, i.e., one
paragraph has a grey background, the next is white, and repeat this
throughout a text box?
I’ve tried manually putting graphic boxes behind. However, as you
can imagine this can get messy and doesn’t appear the same in
different browsers.
Perhaps tables? But do tables give you a great amount of
flexibility? I need anchors and different formating throughout the
sentence.
Yes, but that’s not going to make every other paragraph in a container
DIV a different color, which was what the OP was asking about. It is
cool to make repeating textures, though.
You can do the padding by creating a specially-named CSS style. Click the gear menu in the Styles palette and choose New Style. If your HTML box is called item4 in the Inspector, then in the Tag field, enter ‘#item4 p’ (without the quotes), then tab into the Name field, delete whatever is there, then (very important) tab back out so the lack of name “sticks”.
Click the Extended button, then New, and in the Name field enter ‘padding’ and in the Value field enter ‘8px 12px’ or something like that (again, without the quotes). Okay that, then press New again, and this time enter ‘margin’ and ‘0’ for the name and value. Okay, then Okay again.
Don’t try to apply this style to anything. It works because Freeway always publishes tag-only styles to the page, and because the CSS selector matches the paragraphs you are trying to reach.