PUBLISHER SPECIFIC CSS RULES

Size: px

Start display at page:

Download "PUBLISHER SPECIFIC CSS RULES"

Chastity Barton
6 years ago
Views:

1 PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu

2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed background color rule instructions to sections and 3.2.

3 (24) Sisällysluettelo 1 Guidelines Usage Web Fonts Common Styles Base Font Titles Links Press Room Specific Styles Search Box Panel Heading Form Control Buttons Panel Collapse Filter Title Filter Option Press Release Lift News Type Subtitle Title Text Show More Button Button Text Contacts Title Contact Name Contact Details Images, Logos & Documents Tabs Tab Titles Caption Details Tags... 17

4 (24) Document List Publisher Infobox Contact Details Description Title Description Text Release Specific Styles Search Box Form Control Button Keywords Title Keywords Image Caption Release Title Release Subtitle Release Lead Text Release Short Text Release Body Section Titles Keywords, Categories and Locations Subheading Images & Documents Contacts About Us Publisher Infobox... 24

5 (24) 1 Guidelines 1.1 Usage In this document you find some examples of CSS rules that target various Press Room elements. You can use these examples as a basis for developing your own rules. Edit the property values to match your needs and remove the declarations that you don t need to change. The following CSS properties affect fonts and colors and should be fairly safe to use: background-color color font-family font-style font-weight opacity text-decoration text-transform Use the following properties more carefully, because they might affect the page layout: border font-size letter-spacing margin padding Using other CSS properties should be avoided. 1.2 Web Fonts If you want to use web fonts in your press room, you have to import a separate stylesheet, which loads the fonts from the hosting url(// You can import Google Fonts like url(//fonts.googleapis.com/css?family=open+sans);

6 (24) 2 Common Styles This chapter describes the CSS rules that affect press room elements globally. If you cannot achieve the desired result with these rules, try more specific selectors described later in this document. 2.1 Base Font The following rule targets the base font in press room..pressroom { line-height: ; 2.2 Titles The following rules target the various titles in press room. Note that there aren t h2 and h6 elements in press room..pressroom h1,.pressroom h3,.pressroom h4,.pressroom h5 { font-weight: bold;.pressroom h1 { font-size: 2em;.pressroom h3 { font-size: 1.17em;.pressroom h4 { font-size: 1em;.pressroom h5 { font-size:.83em;

7 (24) 2.3 Links The following rules target the links in press room..pressroom a { color: #3399CC; cursor: pointer;.pressroom a:visited { color: #3399CC;.pressroom a:hover { color: #246B8F; text-decoration: underline;.pressroom a:active { color: #246B8F;

26.1.2016 8 (24) 3 Press Room Specific Styles Search Box Press Release Lift Show More Button Facebook and Twitter feeds come as

8 (24) 3 Press Room Specific Styles Search Box Press Release Lift Show More Button Facebook and Twitter feeds come as styled HTML from corresponding social media sites. Their styling cannot be changed. Contacts Logos Documents Images Publisher Infobox

9 (24) 3.1 Search Box Buttons Form Control Panel Heading Panel Collapse Filter Title Filter Options Panel Heading The following CSS rule targets the upper part of the search box:.pressroom.prs-search.panel-prs.panel-heading { background-color: #FFF; Recommendation: Only the background color should be changed. Changing the margin or other layout properties may break the search box layout Form Control The following CSS rule targets the search input box and other form controls in search box:.pressroom.prs-search.form-control { background-color: #FFF; border: none; color: #555; padding: 6px 12px; Buttons The following CSS rule targets the default buttons in search box:.pressroom.prs-search.btn-default { background-color: #E0E0E0;

10 (24) The following CSS rule targets the active buttons in search box:.pressroom.prs-search.btn-primary { background-color: #191E34; Panel Collapse The following CSS rule targets the collapsible part of the search box:.pressroom.prs-search.panel-prs.panel-collapse { background-color: #FFF; Filter Title Recommendation: Only the background color should be changed. Changing the margin or other layout properties may break the search box layout. The following CSS rule targets the filter titles in search box:.pressroom.prs-search h4 { font-size: 1.2em; font-weight: bold; line-height: 1.1; margin-bottom: 10px; margin-top: 10px; Filter Option The following CSS rule targets the filter options in search box:.pressroom.prs-search.filters a span { line-height: 1.4;

11 (24) 3.2 Press Release Lift News Type Subtitle Title Text The following CSS rule targets the whole press release lift:.pressroom.lift {

12 (24) News Type The following CSS rule targets the news type element in press release lift:.pressroom.lift.news-type { background-color: #F90; color: #FFF; font-size:.8em; padding: 5px; Subtitle The following CSS rule targets the subtitle element in press release lift:.pressroom.lift.caption-text span { font-size:.9em; line-height: ; margin-bottom: 0; margin-top: 0; Title The following CSS rule targets the title element in press release lift:.pressroom.lift.caption-text h1 { color: #39C; font-size: 1.65em; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;

13 (24) Text The following CSS rule targets the text element in press release lift:.pressroom.lift.caption-text p { font-size:.9em; line-height: ; margin-bottom: 10px; margin-top: 0px; Background color The following CSS rule changes the background color of the lift area:.pressroom.lift.caption-text { background: #fff; 3.3 Show More Button Button Text Button Text The following CSS rule targets the Show More button:.pressroom.btn.btn-show-more { border-top: 1px solid #cccccc; color: #70767F; font-size: 18px; line-height: 1.33;

26.1.2016 14 (24) 3.4 Contacts Title Contact Name Contact Details 3.4.1 Title The following CSS rule targets the title in Contacts section:.pressroom.

14 (24) 3.4 Contacts Title Contact Name Contact Details Title The following CSS rule targets the title in Contacts section:.pressroom.contacts h3 { border-bottom: solid 1px #CCC; font-size: 1.65em; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 40px; Contact Name The following CSS rule targets the title in Contacts section:.pressroom.contacts.person-text h4 { font-size: 1.2em; font-weight: bold; line-height: 1.1; margin-bottom: 2px; margin-top: 0;

15 (24) Contact Details The following CSS rule targets the contact details in Contacts section:.pressroom.contacts.person-text div { color: #70767F; line-height: ; margin-bottom: 2px; margin-top: 0;

16 (24) 3.5 Images, Logos & Documents Tabs Active Tab Title Default Tab Titles Caption Details Tags Document List Tab Titles The following CSS rule targets the default tab titles:.pressroom.nav-tabs li a { color: #39C; font-size: 1.65em; The following CSS rule targets the active tab title:.pressroom.nav-tabs li.active a { color: #555;

17 (24) Caption The following CSS rule targets the image caption:.pressroom.picture.picture-title { font-size: 11px; Details The following CSS rule targets the image details:.pressroom.picture div { Tags Note that this rule affects also the image caption and tags. You can override these declarations with caption s and tag s own rules. The following CSS rule targets the image and document tags:.pressroom.label { background-color: #191E34; border-radius: 0; color: #FFF; font-size: 75%; font-weight: bold; Document List The following CSS rule targets the document list in documents tab:.pressroom.document-row {

18 (24) 3.6 Publisher Infobox Description Title Contact Details Description Text Contact Details The following CSS rule targets the contact details in publisher infobox:.pressroom.prs-footer.contact-container { line-height: ; Description Title The following CSS rule targets the description title in publisher infobox:.pressroom.prs-footer h5 { font-size:.83em; font-weight: bold; Description Text The following CSS rule targets the description text in publisher infobox:.pressroom.prs-footer p { line-height: ; margin-bottom: 10px; margin-top: 0; Note that this rule also affects the contact details in the publisher infobox.

26.1.2016 19 (24) 4 Release Specific Styles Search Box Image Caption Release Title Release Subtitle Release Lead Text Release

19 (24) 4 Release Specific Styles Search Box Image Caption Release Title Release Subtitle Release Lead Text Release Short Text Release Body Keywords, Categories & Locations Section Titles Images & Documents Subheadings Contacts Publisher Infobox

26.1.2016 20 (24) 4.1 Search Box Form Control Button Keywords Title Keywords 4.1.1 Form Control The following CSS rule targets the form control in search box:.pressroom.tag-list.

20 (24) 4.1 Search Box Form Control Button Keywords Title Keywords Form Control The following CSS rule targets the form control in search box:.pressroom.tag-list.form-control { background-color: #FFF; border: none; color: #555; padding: 6px 12px; Button The following CSS rule targets the button in search box:.pressroom.tag-list.btn { background-color: #E0E0E0; Keywords Title The following CSS rule targets the keywords title in search box:.pressroom.tag-list h4 { font-size: 1.2em; font-weight: 700;

21 (24) Keywords The following CSS rule targets the keywords in search box:.pressroom.tag-list.tag-listing>.label { background-color: #191E34; border-radius: 0; color: #FFF; font-size: 75%; font-weight: bold; 4.2 Image Caption The following CSS rule targets the image caption:.pressroom.figure.figcaption { background: #FFF; opacity:.85; 4.3 Release Title The following CSS rule targets the release title:.pressroom.news-content h1 { font-size: 36px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;

22 (24) 4.4 Release Subtitle The following CSS rule targets the release subtitle:.pressroom.news-content.news-meta { color: #808080; line-height: ; margin-bottom: 20px; margin-top: 0; 4.5 Release Lead Text The following CSS rule targets the release lead text:.pressroom.news-content > p:first-of-type { font-weight: bold!important; line-height: ; margin-bottom: 10px; margin-top: 0; 4.6 Release Short Text The following CSS rules target the release short text. The first one affects paragraph spacing and the second one font formatting:.pressroom.news-content #short p { line-height: !important; margin-bottom: 10px!important; margin-top: 0!important;.pressroom.news-content #short p span { color: #000!important; font-family: 'PT Sans', Arial, Helvetica, sans-serif!important; font-size: 14px!important; font-weight: normal!important;

23 (24) Note that you have to postscript your CSS values with!important in order to override the press room settings. 4.7 Release Body The following CSS rules target the release short text. The first one affects paragraph spacing and the second one font formatting:.pressroom.news-content #medium p { line-height: !important; margin-bottom: 10px!important; margin-top: 0!important;.pressroom.news-content #medium p span { color: #000!important; font-family: 'PT Sans', Arial, Helvetica, sans-serif!important; font-size: 14px!important; font-weight: normal!important; Note that the release body is formatted by the author of the release. If you really want to override the author-generated formatting, you have to postscript your CSS values with!important. 4.8 Section Titles The following CSS rule targets the section titles (keywords, categories and locations):.pressroom.tags h5,.pressroom.tags-content h5 { font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 10px;

24 (24) 4.9 Keywords, Categories and Locations The following CSS rule targets the keywords, categories and locations:.pressroom.tags.label,.pressroom.tags-content.label { background-color: #191E34; border-radius: 0; color: #FFF; font-size: 75%; font-weight: bold; 4.10 Subheading The following CSS rule targets the subheadings in Images, Contacts and About us sections:.pressroom.article-footer h3 { border-bottom: 1px solid #ccc; font-size: 1.65em; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 40px; 4.11 Images & Documents 4.12 Contacts See Images, Logos & Documents Tabs. See Contacts About Us See Base Font Publisher Infobox See Publisher Infobox.

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties