DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE. Version Number: 1.0 Last Updated, December 3, 2014

Size: px

Start display at page:

Download "DIGITAL NEWS EXPERIENCES WIDGET STYLE GUIDE. Version Number: 1.0 Last Updated, December 3, 2014"

Britney Shelton
5 years ago
Views:

1 WIDGET STYLE GUIDE Version Number: 1.0 Last Updated, December, 2014

2 USING WIDGETS What is a widget? DIGITAL NEWS EXPERIENCES The embeddable AP widgets provide an end user easy access to your DNE website from your main website - when users click a link in an AP widget on your main site, they are brought 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. No other 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 minimum width needed for a widget is 00px 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 Prepared by Product Design Version 1.0 Last Modified Dec,

3 88x1 Region 1 Region 2 CUSTOMIZABLE REGIONS REGION 1 - WIDGET NAME This is where the title of the widget appears, so users know what kind of content they are interacting with. An 88x1 ad unit is sometimes displayed in this region. REGION 2 - CONTENT Our 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 - LINKS Style these buttons so they grab attention and draw traffic to your DNE pages. OVERRIDING DEFAULT CSS PROPERTIES An!important declaration provides a way to override default values per css property, i.e.: Region (default) (override) font-family: Times New Roman!important; CUSTOMIZING A SPECIFIC WIDGET 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_a172517e7bd49bf0fce b825 ></div> Your CSS would look like this: #ap_widget_container_a172517e7bd49bf0fce b825.table-widget-wrapper.title-block background: blue!important; 2014 Prepared by Product Design Version 1.0 Last Modified Dec, 2014

4 88x1 Region 1 GLOBAL STYLES Customization options for all regions include: text color, font family, font style. Region 2 /* Font family, style throughout widget - All elements */.table-widget-wrapper *,.table-widget-wrapper.inner-frame h1 a,.table-widget-wrapper.inner-frame label Region 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

5 1 2 REGION 1 - Widget Name 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.. Release dates and bylines: Only available in Standings and Polls widgets. You may edit the color of this text. CSS Properties /* Title background color */.table-widget-wrapper.title-block /* Title font family, style */.table-widget-wrapper.title-block * /* Title text color */.table-widget-wrapper.title-block a /* Release date text color, weight, style */.table-widget-wrapper.title-block label 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

6 REGION 2 - Content - Part 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.. 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 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 Row hover color: You may change the color the rows become when a user places the cursor over them Prepared by Product Design Version 1.0 Last Modified Dec,

7 REGION 2 - Content - Part CSS Properties /* Border color around table, table header */.table-widget-wrapper.contentwrapper.inner-frame,.table-widget-wrapper table th border- /* Table caption background color, font family, color, style, weight */.table-widget-wrapper table th,.table-widget-wrapper table th span /* Table row number background color, text color, style, weight */.table-widget-wrapper.row-number /* Table even row background color */.table-widget-wrapper table tr.even td /* Table odd row background color */.table-widget-wrapper table tr.odd td /* 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- /* Table row hover background color */.table-widget-wrapper table tr td:hover /* 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 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

8 REGION - Button Links - Part 1 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.. 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 Prepared by Product Design Version 1.0 Last Modified Dec,

9 REGION - Button Links - Part 2 CSS Properties /* Space between contextual buttons & around the table */.table-widget-wrapper.content-block /* Contextual button font family, color, style, weight, letter case */.table-widget-wrapper.nav-wrapper button span text-transform: inherit; /* Contextual button background color, border color */.table-widget-wrapper.nav-wrapper button border- /* Contextual button hover background color */.table-widget-wrapper.nav-wrapper button:hover /* 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; 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

10 Photo Gallery Widgets - Part 1 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.. 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 Prepared by Product Design Version 1.0 Last Modified Dec,

11 GALLERY CSS Properties /* Gallery slide container background color */.widget-container.gallery.table-widget-wrapper.slidecontainer background: #!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 /* Gallery slide pagination block font family, color, style, weight */.widget-container.gallery.table-widget-wrapper.slidesjspagination * /* Gallery slide navigation button background color */.widget-container.gallery.table-widget-wrapper.slidesjsnavigation background: rgba(28, 148, 208, 0.6); /* Gallery slide navigation button hover color */.widget-container.gallery.table-widget-wrapper.slidesjsnavigation:hover background: rgba(28, 148, 208, 1); /* Gallery slide title hover font color */.widget-container.gallery.table-widget-wrapper.slide-title a:hover span /* Gallery slide navigation right button arrow tip color */.widget-container.gallery.table-widget-wrapper.slidesjsprevious:after border-right-color: #fff; /* Gallery slide pagination block background color */.widget-container.gallery.table-widget-wrapper.slidesjspagination background: rgba(0, 0, 0, 0.7); /* Gallery slide navigation left button arrow tip color */.widget-container.gallery.table-widget-wrapper.slidesjsnext:after border-left-color: #fff; 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

12 Example: Custom CSS Styles 2014 Prepared by Product Design Version 1.0 Last Modified Dec,

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that