SHOW:
|
|
- or go back to the newest paste.
| 1 | - | sportevai.it |
| 1 | + | AMP TOP STICKY CSS STYLES |
| 2 | ||
| 3 | - | 1. Paste this code in the <head> section of the AMP page: |
| 3 | + | This is a version of the CSS styles to test on the site, please let us know if the plugin “sanitizes” it. |
| 4 | ||
| 5 | - | Important: This code should only be added once. Ensure these elements are not already present before adding. In AMP, each library can only be included once, and duplicating the inclusion will result in an error, causing your AMP page to become invalid. |
| 5 | + | |
| 6 | + Insert the following CSS styles in your tag <style amp-custom> on the AMP page: | |
| 7 | - | <script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script> |
| 7 | + | |
| 8 | - | <script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script> |
| 8 | + | #cl-top-sticky {
|
| 9 | - | <script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script> |
| 9 | + | position: fixed; |
| 10 | - | <script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script> |
| 10 | + | top: 0; |
| 11 | left: 0; | |
| 12 | width: 100%; | |
| 13 | - | 2. Insert the following CSS styles in your tag <style amp-custom> on the AMP page: |
| 13 | + | height: 100px; |
| 14 | z-index: 2147483600; | |
| 15 | - | #cl-top-sticky{position:fixed;top:0;left:0;width:100%;height:100px;z-index:2147483640;box-shadow:0 2px 5px rgba(0,0,0,.3);background-color:#fff}.cl-ts-hidden{display:none}.cl-ts-visible{display:block}.cl-ts-close-button{position:absolute;bottom:-28px;width:28px;height:28px;right:0;background:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="341 8 13 13"><path fill="%234F4F4F" fill-rule="evenodd" d="M354 9.31 352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z"/></svg>') 9px 9px no-repeat #fff;box-shadow:-1px 2px 1px 0 rgba(0,0,0,.2);border:none;border-radius:0 0 0 12px}#clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]){display:none}#clickio-ts-list:has(#clickio-ts-creative[style*="width:"][style*="0px"]){display:none;}#clickio-ts-list{height:100px}
|
| 15 | + | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); |
| 16 | - | aside.m-ctr{z-index:2147483646;}label.fsc{z-index:2147483640;}
|
| 16 | + | background-color: #fff; |
| 17 | } | |
| 18 | .cl-ts-hidden {
| |
| 19 | - | 3. Add this code at the beginning of the <body> of your AMP page before all other elements: |
| 19 | + | display: none; |
| 20 | } | |
| 21 | - | <amp-state id="tsvisibilityState"> |
| 21 | + | .cl-ts-visible {
|
| 22 | - | <script type="application/json"> |
| 22 | + | display: block; |
| 23 | - | {
|
| 23 | + | } |
| 24 | - | "clhideTs": false |
| 24 | + | .cl-ts-close-button {
|
| 25 | - | } |
| 25 | + | position: absolute; |
| 26 | - | </script> |
| 26 | + | bottom: -28px; |
| 27 | - | </amp-state> |
| 27 | + | width: 28px; |
| 28 | - | <div style="height:100px"> |
| 28 | + | height: 28px; |
| 29 | - | <amp-list id="clickio-ts-list" layout="fill" data-block-on-consent src="https://cns.clickiocdn.com/amp_360?source_url=SOURCE_URL&canon=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=AVAILABLE_SCREEN_WIDTH&scr_h=AVAILABLE_SCREEN_HEIGHT&sid=244396&said=733926&btype=hsticky"> |
| 29 | + | right: 0; |
| 30 | - | <template type="amp-mustache"> |
| 30 | + | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMzQxIDggMTMgMTMiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTM1NCA5LjMxIDM1Mi42OSA4bC01LjE5IDUuMTlMMzQyLjMxIDggMzQxIDkuMzFsNS4xOSA1LjE5LTUuMTkgNS4xOSAxLjMxIDEuMzEgNS4xOS01LjE5IDUuMTkgNS4xOSAxLjMxLTEuMzEtNS4xOS01LjE5eiIvPjwvc3ZnPg==");
|
| 31 | - | <div id="cl-top-sticky" class="cl-ts-visible" [class]="tsvisibilityState.clhideTs ? 'cl-ts-hidden' : 'cl-ts-visible' " > |
| 31 | + | background-size: 13px 13px; |
| 32 | - | <amp-iframe data-block-on-consent resizable |
| 32 | + | background-position: 9px; |
| 33 | - | id="clickio-ts-creative" |
| 33 | + | background-color: #fff; |
| 34 | - | height="100" |
| 34 | + | background-repeat: no-repeat; |
| 35 | - | layout="fixed-height" |
| 35 | + | box-shadow: -1px 2px 1px 0 rgba(0, 0, 0, 0.2); |
| 36 | - | frameborder="0" |
| 36 | + | border: none; |
| 37 | - | sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation" |
| 37 | + | border-radius: 0 0 0 12px; |
| 38 | - | src="{{_frame_src}}"
|
| 38 | + | } |
| 39 | - | on="message:AMP.setState({tsvisibilityState: {clhideTs: true}})">
|
| 39 | + | #clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]) {
|
| 40 | - | <div placeholder></div> |
| 40 | + | display: none; |
| 41 | - | <div overflow></div> |
| 41 | + | } |
| 42 | - | </amp-iframe> |
| 42 | + | #clickio-ts-list:has(#clickio-ts-creative[style*="width:"][style*="0px"]) {
|
| 43 | - | <button class="cl-ts-close-button" on="tap:AMP.setState({tsvisibilityState: {clhideTs: true}})" style=""></button>
|
| 43 | + | display: none; |
| 44 | - | </div> |
| 44 | + | } |
| 45 | - | </template> |
| 45 | + | #clickio-ts-list {
|
| 46 | - | </amp-list> |
| 46 | + | height: 100px; |
| 47 | - | </div> |
| 47 | + | } |
| 48 | aside.m-ctr {
| |
| 49 | z-index: 2147483646; | |
| 50 | } | |
| 51 | label.fsc {
| |
| 52 | z-index: 2147483640; | |
| 53 | } | |
| 54 | ||
| 55 | ||
| 56 |