Alternate paragraph backgrounds

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.

Thanks,

Graeme


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

  1. Apply Protaculous to the page, and choose prototype-packed as the
    library.
  2. 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.)
  3. 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.
  4. 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.

Thanks,

Graeme


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is a site with a stripe generator. http://www.stripegenerator.com/

This site will produce a small png file that can they be placed in a html item as a css background and tiled.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter

On Jul 12, 2010, at 12:11 PM, chuckamuck wrote:

This is a site with a stripe generator. http://
www.stripegenerator.com/

This site will produce a small png file that can they be placed in a
html item as a css background and tiled.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt that works fine - how do you ad padding so the background is not flush top, bottom and sides with the text.

Another way of doing this - how about just placing each paragraph in it’s own div - I suppose this will be okay if there’s not a lot of paragraphs


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walt, thanks I have been buggering around with the css all morning but forgot about the “p”

sample here - http://freshbrand.com/test/stripes.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very nice! What is the font in your logo? That’s really cool.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very nice! What is the font in your logo?

Stainless Extended


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt,

I get an error when trying this.

“fwShellCommand is not defined” plus a lot of scripty stuff.

Any ideas?

Thanks,

Graeme


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What version of Freeway, and what version of Protaculous?

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m using Freeway 5 Pro and Protaculous 0.6.4

Graeme


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m baffled, then. That’s what I’m using here, without error. What exact version of Freeway?

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

fwShellCommand() was introduced in 5.2 if that’s of any help…

Stewart


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options