CSS construct for your jobs listing format?

API & Customization
1

Love the post http://www.knackhq.com/links/blogs/eating-our-own-dog-food.html and interested in replicating the 3 column list for jobs (about half way down) with grey backgrounds to the boxes.

I've tried a few ways of setting the backcolor of various fields and items without success - any tips to make it work?

Thanks

2

Thanks, very useful. try this if you have links:

.kn-list .kn-details-link a {
border-radius: 5px;
text-decoration: none !important;
padding: 5px 13px;
background-color: #eee;
}
.kn-list .kn-details-link a:hover {
background-color: #f6f6f6;
}

3

Thanks Brandon - that's excellent - I wasn't getting the .kn-details-column.first right.

4

Hi Brad, here's the CSS. It's basically two lists, each filtered by a job "type". The lists are formatted to use 3 columns in Knack.

/* Font styles */
.kn-content h3 {
  color: #8f3181; 
  margin-top: 18px;
  margin-bottom: 8px;
  line-height: 160%;
  font-size: 115%;
}
body .kn-content p {
  line-height: 160%;
}
.kn-content .kn-scenes p, .kn-content .kn-scenes td {
	font-size: 16px;
}
.kn-content b {
  color: #8f3181;
}

/* job cards */

.kn-list .kn-details-column.first {

background-color: #e2e2e2;

padding: 8px 0 10px 14px;

}


/* apply link */

.kn-list .kn-details-column a {

border-radius: 5px;

text-decoration: none !important;

padding: 5px 13px;

background-color: #eee;

}

.kn-list .kn-details-column a:hover {

background-color: #f6f6f6;

}


/* same height for all job descriptions */

.kn-list .field_6 td {

height: 100px;

}