Rows With Alternating Colors

[dfree99]

I'm trying to duplicate this format in my post content:

http://www.bbb.org/dallas/accredited-business-directory/air-conditioning-contractors-and-systems

In particular, I want it to be full rows (100%) that are responsive rows with colored backgrounds. But without using html tables.

How can I do this?

[Tom]

How do you identify the colour each post should be? (Your example is not alternating, nor does it display a pattern.)
How many colours?
What theme are you using?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[dfree99]

I'm using education pro theme.

I'm not particular about the color. It can be alternating. It doesn't really matter, I just would like some differentiation between rows.

[Tom]

Simple CSS can do this for you:

.post:nth-child(1n) {       /* odd posts are this colour */
  background: chocolate;
}

.post:nth-child(2n) {        /* even posts are this colour */
  background: cornflowerblue;
}

Change the selector if you want to attach the colour differently.
See more about nth-child: https://css-tricks.com/how-nth-child-works/

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[dfree99]

This looks great, but it appears to be formatting the rows to link to other full posts.

I am actually trying to display content inline, all relating to 1 post. These are not excerpts from a full post. This is all content detail for this one post.

In other words, I will be entering information for 3 -5 businesses, but the data will all be entered into 1 post.

[Tom]

So, within a given post, you want different sections to have different background colours?

Simply add a CSS class per business as an inline style in the post markup and use those classes to style the colours. You could get programmatic about this, building custom post sections and fields, if you want.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts