DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE · DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE...

$: DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE · DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE _3UHSDUHGE\3URGXFW'HVLJQ_9HUVLRQ _/DVW0RGL¿HG'HF 2 DIGIT Widget Instructions & CSS Selector$
Version Number: 1.0 Last Updated, December 3, 2014

DIGITAL NEWS EXPERIENCESWIDGET STYLE GUIDE

© 2014 | Prepared by Product Design | Version 1.0 | Last Modified Dec 3, 2014 2

DIGITAL NEWS EXPERIENCESWidget Instructions & CSS Selector Guide

USING WIDGETS

What is a widget?The embeddable AP widgets provide an end user easy access to your DNE website from yourmain website - when users click a link in an AP widget on your main site, they arebrought to your DNE website to see the full story.

How do I embed a widget in my web pages?Just copy the embed code and add it to your web page in the area you want it to display. Noother code or embedding is needed in the header or footer of your site.

How do I set the dimensions for the widgets?Widgets will automatically resize themselves by recognizing the dimensions of the div they are embedded in. You don’t have to worry about setting widths or heights. The minimumwidth needed for a widget is 300px wide.

How do I style the widgets?AP Widgets include a series of default styles that we believe will look good on almost any website. However, if you wish to further customize your widget’s look, you can modify the CSS selectors using in-line styles to do so. Simply find the selector responsible for the area you are attempting to modify and add the new style to your site’s code. A list of the CSS selectors used in the Widgets can be found at the end of this document.



Region 1

Region 2

Region 3

REGION 1 - WIDGET NAMEThis is where the title of the widget appears, so users know what kind of content they are interacting with. An 88x31 ad unit is sometimes displayed in this region.

REGION 2 - CONTENTOur content, your styles: Whether it’s headlines, polls, schedules or photo galleries, you have the power to adjust widget colors and fonts so they blend-in with your site.

REGION 3 - LINKSStyle these buttons so they grab attention and draw traffic to your DNE pages.

An !important declaration provides a way to override default values per css property, i.e.: (default) (override)font-family: inherit; font-family: Times New Roman !important;

88x31

All widgets have a similar HTML structure, and they all will inherit changes unless each specific container is targeted. If you’d like to target a specific container, simply include the custom div ID for that container and use it in combination with other classes.

For example:

If your container embed code included the following: <div id=”ap_widget_container_a1725173e7bd49bf30fce5887421b825”></div>

Your CSS would look like this:#ap_widget_container_a1725173e7bd49bf30fce5887421b825 .table-widget-wrapper .title-block { background: blue!important;}

CUSTOMIZABLE REGIONS

OVERRIDING DEFAULT CSS PROPERTIES

CUSTOMIZING A SPECIFIC WIDGET



Region 1

Region 2

Region 3

88x31 Customization options for all regions include: text color, font family, font style.

/* Font family, style throughout widget - All elements */.table-widget-wrapper *,.table-widget-wrapper .inner-frame h1 a,.table-widget-wrapper .inner-frame label { font-family: inherit; font-style: inherit; color: inherit;}

GLOBAL STYLES



1. Name: You may edit the font, font family and font style of the widget’s name.

2. Name container color: You may edit the color of the container in which widget names appear.

3. Release dates and bylines: Only available in Standings and Polls widgets. You may edit the color of this text.

/* Title background color */.table-widget-wrapper .title-block { background: inherit; }

/* Title font family, style */.table-widget-wrapper .title-block * { font-family: inherit; font-style: inherit; }

/* Title text color */.table-widget-wrapper .title-block a { color: inherit; }

/* Release date text color, weight, style */.table-widget-wrapper .title-block label { color: inherit; font-style: inherit; font-weight: inherit;}

1 2

3

CSS Properties

REGION 1 - Widget Name



1. Table headers: You may change the text color and font of the table titles.

2. Table border: You may change the color of the hairline border that surrounds the table.

3. Rank number: You may change the color of the numbers that organize ranked content. You may also change the font style and weight of these numbers.

4. Row content: You may change the text color, font style and font family of the text found in the rows.

5. Odd row color: You may change the background color of all oddly-numbered rows in the table.

6. Even row color: You may change the background color of all evenly-numbered rows in the table.

7. Row hover color: You may change the color the rows become when a user places the cursor over them.

1

2

4

5

6

7

3

REGION 2 - Content - Part 1



/* Border color around table, table header */.table-widget-wrapper .content-wrapper .inner-frame,.table-widget-wrapper table th { border-color: inherit; }

/* Table caption background color, font family , color, style, weight */.table-widget-wrapper table th,.table-widget-wrapper table th span { background: inherit; font-family: inherit; color: inherit; font-style: inherit; font-weight: inherit; }

/* Table cell border color, font family, color, style, weight */.table-widget-wrapper table td,.table-widget-wrapper table td span,.table-widget-wrapper table td a { border-color: inherit; font-family: inherit; color: inherit; font-style: inherit; font-weight: inherit; }

/* Table row number background color, text color, style, weight */.table-widget-wrapper .row-number { background: inherit; color: inherit; font-style: inherit; font-weight: inherit; }

/* Table even row background color */.table-widget-wrapper table tr.even td { background: inherit; }

/* Table odd row background color */.table-widget-wrapper table tr.odd td { background: inherit; }

/* Table row hover background color */.table-widget-wrapper table tr td:hover { background: inherit; }

/* Table row hover background color, text color */.table-widget-wrapper table tr td:hover,.table-widget-wrapper table tr td:hover span, .table-widget-wrapper table tr td:hover a { background: inherit; color: inherit;}

CSS Properties

REGION 2 - Content - Part 2

1

2

4

5

6

7

3



1. Background color: You may change the color of the button containers that hold the links.

2. Text: You may change the text color, font family, font style, font weight and letter case of the text.

3. Border: You may change the color and weight of the button hairline border.

4. Background hover color: You may change the color the button becomes when a user places the cursor over it.

5. Left button icon: You may move the “More” button icon to the right or left of the text.

6. Right button icon: You may move the “Home” button icon to the right or left of the text.

1 23 4

REGION 3 - Button Links - Part 1

5 6



/* Space between contextual buttons & around the table */.table-widget-wrapper .content-block { background: inherit; }/* Contextual button font family, color, style, weight, letter case */.table-widget-wrapper .nav-wrapper button span { font-family: inherit; color: inherit; font-style: inherit; font-weight: inherit; text-transform: inherit; }/* Contextual button background color, border color */.table-widget-wrapper .nav-wrapper button { background: inherit; border-color: inherit; }/* Contextual button hover background color */.table-widget-wrapper .nav-wrapper button:hover { background: inherit; }/* Contextual left button’s space before text */.table-widget-wrapper .content-wrapper button.button-left span:before { content: inherit; }/* Contextual left button’s space after text */.table-widget-wrapper .content-wrapper button.button-left span:after { content: “”; }/* Contextual right button’s space before text */.table-widget-wrapper .content-wrapper button.button-right span:before { content: “”; }/* Contextual right button’s space after text */.table-widget-wrapper .content-wrapper button.button-right span:after { content: inherit;}

CSS Properties

REGION 3 - Button Links - Part 2

1 23 4

5 6



1. Widget title font: You may change the text color and font family, style and weight of the widget’s title.

2. Slide title background color: You may change the color of the container in which the title of the slide on display appears.

3. Slide title hover color: You may change the color the slide’s title becomes when a user places the cursor over it.

4. Slide container background color: You may change the color of the container in which gallery slides appear.

5. Pagination unit: You may change the color and font family, style and weight of the text in the photo widget’s pagination unit.

6. Arrow buttons, container color: You may change the color of the containers that hold the left and right arrow icons.

7. Arrow buttons, container hover color: You may change color the buttons become when a user places the cursor over them.

8. Right navigation arrow: You may change the color of the right arrow icon.Left navigation arrow: You may change the color of the left arrow icon.

1

2

4

5

6 78

3

Photo Gallery Widgets - Part 1



/* Gallery slide pagination block font family, color, style, weight */.widget-container .gallery.table-widget-wrapper .slidesjs-pagination * { font-family: inherit; color: inherit; font-style: inherit; font-weight: inherit; }

/* Gallery slide navigation button background color */.widget-container .gallery.table-widget-wrapper .slidesjs-navigation { background: rgba(28, 148, 208, 0.6); }

/* Gallery slide navigation button hover color */.widget-container .gallery.table-widget-wrapper .slidesjs-navigation:hover { background: rgba(28, 148, 208, 1); }

/* Gallery slide navigation right button arrow tip color */.widget-container .gallery.table-widget-wrapper .slidesjs-previous:after { border-right-color: #fff; }

/* Gallery slide navigation left button arrow tip color */.widget-container .gallery.table-widget-wrapper .slidesjs-next:after { border-left-color: #fff; }

GALLERY CSS Properties

/* Gallery slide container background color */.widget-container .gallery.table-widget-wrapper .slide-container { background: #333 !important; }

/* Gallery slide title background color, border color */.widget-container .gallery.table-widget-wrapper .slide-title { background: inherit !important; border-color: #8d9192 !important; }

/* Gallery slide title font family, color, style, weight */.widget-container .gallery.table-widget-wrapper .slide-title span { font-family: inherit; color: inherit; font-style: inherit; font-weight: inherit; }

/* Gallery slide title hover font color */.widget-container .gallery.table-widget-wrapper .slide-title a:hover span { color: inherit; }

/* Gallery slide pagination block background color */.widget-container .gallery.table-widget-wrapper .slidesjs-pagination { background: rgba(0, 0, 0, 0.7); }

1

2

4

5

6 78

3


DIGITAL NEWS EXPERIENCESExample: Custom CSS Styles

DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE · DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE...

Documents

Transcript of DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE · DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE...