Home \ Daylife Select Documentation \ Content Pinning

Content Pinning

Content Pinning

This feature lets you pin any article, photo, quote, or Twitter tweet to the top of a topic page using an Editor's Picks module.  You can easily manage all the pinned content and apply items to multiple topic pages.

snapshot Note: The feature was released in Daylife Select v.2.0.6 on May 28th, 2009. If you created a Daylife Select prior to then, you will need to take specific action to activate this feature. Sites created after v.2.0.6 support this feature automatically. Please follow the steps below to activate content pinning on your site if it was created before v.2.0.6.

  1. You will need to add the Editor’s Picks module to any and all topic pages where you’d like to pin content.

    If you are using the Default Page Design, we suggest that you place the Editor’s Picks module as the top item in the right-hand column of the layout.

    If you would like to feature the Editor’s Picks module in the center content well, we suggest that you modify your site-wide topic page template by replacing the River of News module with the Latest Articles module and placing Editor’s Picks module directly above the articles.

    Check out this preview of what this modified template would look like. Of course you can place the Editor’s Picks module anywhere on your topic page template to support any editorial experience that you would like to create.

  2. You will also need to add the CSS block for the new Editor’s Picks module so that it displays properly on your site. To add the Editor’s Picks module CSS, copy the block of CSS below and add it to the "Additional CSS" section of your Appearance Tab or append it to the bottom of your custom CSS.

    Editor's Picks Module CSS 
    /* =MODULE: news overview */

.DL-news-overview .DL-filter {
	float:right;
	margin:-33px 0 0;
	position: relative;
}

.DL-news-overview .DL-filter-button {
	background:transparent url(slider_icon.png) no-repeat scroll 0 0;
	color:#416799;
	cursor:pointer;
	font-size:11px;
	font-weight:bold;
	height:22px;
	padding:6px 5px 5px 41px;
}

.DL-news-overview .DL-active,
.DL-news-overview .DL-filter-button:hover { /* filter button active */
	background-position: 0 -33px;
}

.DL-news-overview .DL-filter-popup {
	position:absolute;
	right:0;
	top:33px;
	width:400px;
	z-index:1000;
}

.DL-news-overview .DL-filter-popup .DL-border-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #333;
	opacity: .9;
	filter:alpha(opacity=90);
}

.DL-news-overview .DL-filter-popup .DL-content {
	padding:15px;
	position:relative;
}

.DL-news-overview .DL-filter-popup .DL-filter-wrapper {
	margin-bottom: 20px;
}

.DL-news-overview .DL-filter-popup .DL-last {
	margin-bottom: 0;
}

.DL-news-overview .DL-filter-popup h4 {
	font-weight: bold;
	color: #fff;
}

.DL-news-overview .DL-filter-popup h4.filter_by_source {
	border-bottom:1px solid #FFFFFF;
	margin-bottom:10px;
	padding-bottom:2px;
}

.DL-news-overview .DL-filter-popup p.description {
	color: #fff;
	border-bottom: 1px solid #fff;
	font-size: 11px;
}

.DL-news-overview .DL-filter-popup .labels {
	margin-top:10px;
	overflow:hidden;
}

.DL-news-overview .DL-filter-popup .left-label {
	float:left;
	font-weight: bold;
	font-size: 10px;
	color: #fff;
}

.DL-news-overview .DL-filter-popup .right-label {
	float:right;
	font-weight: bold;
	font-size: 10px;
	color: #fff;
}

.DL-news-overview .DL-filter-popup label {
	color: #fff;
}

.yui-h-slider {
	background:#EEEEEE none repeat scroll 0 0;
	border:1px solid #CCCCCC;
	height:7px;
	margin-top:12px;
	position:relative;
	width:100%;
}

.yui-h-slider .yui-slider-thumb {
	cursor:default;
	position:absolute;
	top: -12px !important;
}

.DL-news-overview ol.loading {
	background: url(http://diacache.daylife.com/_static/release-47333/v2/img/../img/b_w_loader.gif) no-repeat center center;
}

.DL-news-overview ol.DL-mixed-media li {
	float: left;
	width: 184px;
	margin: 0 10px 10px 0;
	position: relative;
}

.DL-news-overview ol.DL-mixed-media li .DL-list-item-wrapper {
	height: 220px;
	padding: 5px;
	border: 1px solid #ccc;
	overflow: hidden;
}

.DL-news-overview ol.DL-mixed-media li.DL-photo .DL-list-item-wrapper {
	padding: 0px;
	height: 230px;
}

.DL-news-overview ol.DL-mixed-media li.DL-last-column {
	margin-right: 0px;
}

.DL-news-overview ol.DL-mixed-media li.DL-last-row {
	margin-bottom: 0px;
}

.DL-news-overview ol.DL-mixed-media li.DL-first-column {
	clear: both;
}

.DL-news-overview ol.DL-mixed-media li p.DL-excerpt a.DL-external {
	font-size: 11px;
}

.DL-news-overview ol.DL-mixed-media li.DL-article h6.DL-headline a {
	font-size:15px;
	font-weight:bold;
	line-height:110%;
}

.DL-news-overview ol.DL-mixed-media li p.DL-excerpt,
.DL-news-overview ol.DL-mixed-media li p.DL-caption,
.DL-news-overview ol.DL-mixed-media li p.DL-excerpt a,
.DL-news-overview ol.DL-mixed-media li p.DL-caption a {
	font-size:12px;
	line-height:125%;
}

.DL-news-overview ol.DL-mixed-media li p.DL-excerpt a.DL-external,
.DL-news-overview ol.DL-mixed-media li p.DL-caption a.DL-external {
	font-size:11px;
}

.DL-news-overview ol.DL-mixed-media li p.DL-excerpt,
.DL-news-overview ol.DL-mixed-media li p.DL-caption {
	padding-bottom: 10px;
}

.DL-news-overview ol.DL-mixed-media li img.DL-scraped-image {
	margin: 0 6px 6px 0;
}

.DL-news-overview ol.DL-mixed-media li.DL-article .DL-title-wrapper {
	margin-bottom: 5px;
}

/* QUOTE: quote block  */

.DL-news-overview li.DL-quote q {
	height: 180px;
}

.DL-news-overview ol li.DL-not-main-quote q a { /* sets up generic quote case */
	background:transparent url(http://diacache.daylife.com/_static/v2/img/daylife/quote-left.png) no-repeat scroll 0 0;
	display:block;
	font-size:16px;
	line-height:27px;
	min-height:42px;
	padding:0 0 5px 57px;
	text-decoration:none;
	text-indent:18px;
}

.DL-news-overview ol li.DL-not-main-quote q a:hover { /* sets up an underline when someone hovers over a quote */
	text-decoration: underline;
}

.DL-news-overview ol li.DL-quote img.DL-quote-photo {
	height:36px;
	margin-left:5px;
	width:36px;
	border:1px solid #CCCCCC;
}

/* QUOTE: quote sizes for river of news and related quotes - we stagger the quote layout depending on length of quote  */

.DL-news-overview ol li.DL-not-main-quote q a {
	padding:0;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_one {
	background-position:0 9px;
	font-size:22px;
	line-height:39px;
	padding-top:0;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_two {
	background-position:0 7px;
	font-size:18px;
	line-height:30px;
	padding-top:0;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_three {
	background-position:0 4px;
	font-size:16px;
	line-height:24px;
	padding-top:0;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_four {
	background-position:0 2px;
	font-size:13px;
	line-height:22px;
	padding-top:0;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_five {
	font-size:13px;
	line-height:19px;
	background-position:0 0px;
	padding-top: 0px;
}

.DL-news-overview ol li.DL-not-main-quote q a.length_six {
	background-position:0 0;
	font-size:12px;
	line-height:17px;
	padding-top:2px;
	background-position:0 7px;
	padding-top: 0px;
}

.DL-news-overview ol li.DL-not-main-quote cite.DL-speaker,
.DL-news-overview ol li.DL-not-main-quote cite.DL-speaker a {
	font-size: 12px;
}

.DL-news-overview ol li.DL-not-main-quote cite.DL-source {
	font-size:9px;
	line-height:12px;
	text-align:right;
	margin-top:1px;
}

.DL-news-overview cite.DL-source a.DL-name {
	color:#666666;
	font-size:9px;
	text-transform:uppercase;
}

.DL-news-overview ol li.DL-not-main-quote cite.DL-source span.DL-timestamp {
	display:inline;
	font-size:9px;
}

/* Photo */

.DL-news-overview li.DL-photo .DL-title-mask {
	background:#000000 none repeat scroll 0 0;
	bottom:1px;
	height:21px;
	left:1px;
	opacity:0.6;
	filter:alpha(opacity=60);
	position:absolute;
	width:182px;
}

.DL-news-overview li.DL-photo cite.DL-source a.DL-name {
	color:#fff;
}

/* .DL-news-overview */

.DL-news-overview li.DL-article cite.DL-source,
.DL-news-overview li.DL-photo cite.DL-source,
.DL-news-overview li.DL-quote div.DL-quote-attribution-wrapper {
	position: absolute;
	bottom: 5px;
	line-height: 100%;
	width: 172px;
}

.DL-news-overview li.DL-photo cite.DL-source {
	left: 6px;
}

.DL-news-overview li.DL-quote div.DL-quote-attribution-wrapper {
	position: absolute;
	bottom: 4px;
	right: 6px;
	width: 172px;
}

.DL-news-overview li.DL-article cite.DL-source img.DL-favicon {
	margin-right:3px;
	margin-top:-3px;
}

.DL-news-overview ol.DL-mixed-media li.DL-first-column {
	clear: both;
}

/* =MODULE: EDITOR'S PICK */

/* height */

.DL-pinned-news-overview ol.DL-mixed-media li .DL-list-item-type {
	background:#E6E6E6 none repeat scroll 0 0;
	border: 1px solid #ccc;
	border-bottom: 0;
	color:#666666;
	font-size:9px;
	letter-spacing:1px;
	line-height:9px;
	padding:4px 5px 1px;
	text-transform:uppercase;
}

.DL-pinned-news-overview ol.DL-mixed-media li .DL-list-item-wrapper {
	height:175px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured .DL-list-item-wrapper {
	height:250px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-single-featured .DL-list-item-wrapper {
	height:150px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-photo .DL-list-item-wrapper {
	height:185px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-photo.DL-featured .DL-list-item-wrapper {
	height:260px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-photo.DL-single-featured .DL-list-item-wrapper {
	height:289px;
}

/* width */

.DL-pinned-news-overview ol.DL-mixed-media li {
	width:182px;
	background: #FFF;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-sort-hover {
	background: #FF9;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-sort-hover .DL-list-item-type,
.DL-pinned-news-overview ol.DL-mixed-media li.DL-sort-hover .DL-list-item-wrapper {
	opacity: .4;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-sort-hover .DL-title-mask {
	opacity: .2;
}

.DL-pinned-news-overview ol.DL-mixed-media .DL-title-mask {
	width:180px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured { /* mask for photo source */
	width:278px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured .DL-title-mask { /* mask for photo source */
	width:276px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-single-featured { /* mask for photo source */
	width:566px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-single-featured .DL-title-mask { /* mask for photo source */
	width:564px;
}

/* Regular Article and Photo */

.DL-pinned-news-overview ol.DL-mixed-media li.DL-article h6.DL-headline a {
	font-size:13px;
}

.DL-pinned-news-overview ol.DL-mixed-media li p.DL-excerpt,
.DL-pinned-news-overview ol.DL-mixed-media li p.DL-caption {
	font-size:11px;
	line-height:133%;
}

.DL-pinned-news-overview ol.DL-mixed-media li p.DL-excerpt a,
.DL-pinned-news-overview ol.DL-mixed-media li p.DL-caption a {
	line-height:100%;
	font-size:11px;
}

.DL-pinned-news-overview ol.DL-mixed-media li a.DL-photo-inside {
	display: block;
}

.DL-pinned-news-overview ol.DL-mixed-media li p.DL-caption {
	padding: 5px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-article cite.DL-source,
.DL-pinned-news-overview ol.DL-mixed-media li.DL-photo cite.DL-source,
.DL-pinned-news-overview ol.DL-mixed-media li.DL-quote div.DL-quote-attribution-wrapper {
	width:170px;
}

/* Regular Quote */

.DL-pinned-news-overview ol li.DL-not-main-quote q a.length_one,
.DL-pinned-news-overview ol li.DL-not-main-quote q a.length_two {
	background-position:0 4px;
	font-size:15px;
	line-height:26px;
	padding-top:0;
}

.DL-pinned-news-overview ol li.DL-not-main-quote q a.length_three { /* everything is length_three */
	background-position:0 1px;
	font-size:12px;
	line-height:17px;
	padding-top:0;
}

.DL-pinned-news-overview ol li.DL-not-main-quote cite.DL-source span.DL-timestamp {
	display:block;
}

/* Featured */

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured cite.DL-source,
.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured cite.DL-source,
.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured div.DL-quote-attribution-wrapper {
	width:256px;
}

/* Featured Article */

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured h6.DL-headline a {
	font-size:20px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured p.DL-excerpt {
	font-size:16px;
	height:auto;
	line-height:120%;
	overflow:visible;
	padding-bottom:10px;
}

.DL-pinned-news-overview ol.DL-mixed-media li.DL-featured p.DL-excerpt a {
	font-size: 15px;
	line-height:100%;
}

/* Featured Photo */

.DL-pinned-news-overview li.DL-featured cite.DL-source,
.DL-pinned-news-overview li.DL-featured div.DL-quote-attribution-wrapper {
	width:256px;
}

.DL-pinned-news-overview li.DL-featured.DL-photo cite.DL-source {
	bottom: 76px;
}

.DL-pinned-news-overview li.DL-featured.DL-photo .DL-title-mask {
	bottom:74px;
}

.DL-pinned-news-overview li.DL-single-featured.DL-photo cite.DL-source {
	bottom: 42px;
}

.DL-pinned-news-overview li.DL-single-featured.DL-photo .DL-title-mask {
	bottom:40px;
}

/* Featured Quote */

.DL-pinned-news-overview li.DL-single-featured.DL-not-main-quote q a.length_one,
.DL-pinned-news-overview li.DL-single-featured.DL-not-main-quote q a.length_two {
	background-position:0 7px;
	font-size:28px;
	line-height:37px;
	padding-top:0;
}

.DL-pinned-news-overview li.DL-featured.DL-not-main-quote q a.length_one,
.DL-pinned-news-overview li.DL-featured.DL-not-main-quote q a.length_two {
	background-position:0 12px;
	font-size:22px;
	line-height:42px;
	padding-top:0;
}

.DL-pinned-news-overview li.DL-single-featured.DL-not-main-quote q a.length_three {
	background-position:0 6px;
	font-size:26px;
	line-height:34px;
	padding-top:0;
}

.DL-pinned-news-overview li.DL-featured.DL-not-main-quote q a.length_three {
	background-position:0 12px;
	font-size:24px;
	line-height:36px;
	padding-top:4px;
}

/* River of news module content wrapper issue */

.DL-river-of-news.DL-pinned-river-of-news .DL-module-content-wrapper {
	margin:10px !important;
}

TO PIN CONTENT:

  1. Go to a topic page, find an item you want to pin, and open the wizard.
  2. Mouse-over the item and click the thumbtack "pin" icon.
  3. In the palette that opens, choose the pages you want to pin the item to. For topic pages, you can choose from the related topics (these are suggested in the palette) or search our topics database. You can also choose the home page or a custom page.
    - To pin to a custom page, you need to have created at least one such page. See the “Related Information” section below to learn how to do this.
    - To pin to groups of topic or custom pages, you first need to create shared templates for the pages you want to pin to. See the “Related Information” section below to learn how to do this.
  4. Click "Done" in the first palette, and your items are now pinned to the page(s).
Clicking on the thumbtack icon opens the “Pin this Content” palette (as shown above). From here you can select the topic pages where you’d like to pin the content. Choose from the suggested topic pages or search for other topic pages. After pinning a content item, you can remotely preview how the item will appear on different topic pages within the Editor’s Picks module. You can change the sort order of pinned content items, unpin content items, and preview your changes live. Once you’ve confirmed the display of the Editor’s Picks module for a particular topic page, you’re all set. Click to the actual topic page to see the Editor’s Picks module featuring all of your pinned content items.

To Manage Pinned Content:

  1. In the wizard, go to the Edit Content tab and click "Manage Pinned Content" at the bottom.
  2. In the palette that opens, click "Edit" for the item you want to manage. Another palette will open, and there you can (on a per-topic-page basis, using the pull-down) shuffle the item order, delete items, and preview how they'll appear in the Editor's Picks module on each topic page.
  3. Click "Save Sort Order" and "Done", then close out the palettes for the Edit Content tab.  
  4. Navigate to the topic pages you edited to see the revised Editor's Picks module.

Watch the Video

NOTE: If you’ve already pinned an item and attempt to pin it again, we’ll show you where it was previously pinned and direct you there so you can edit that existing pin. We’ll also offer recommendations for other relevant topics to pin the item to.

Related Information