Title: AMP & CSS
Last modified: April 18, 2019

---

# AMP & CSS

 *  Resolved [ayberkk](https://wordpress.org/support/users/2ladd/)
 * (@2ladd)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/amp-css/)
 * Hi,
 * I am using the original AMP (classic mode) plugin. But I don’t understand exactly
   how to do the CSS settings. Can you give me a sample code?
 * Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Support [Blaz K.](https://wordpress.org/support/users/blazk/)
 * (@blazk)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/amp-css/#post-11445881)
 * HI [@2ladd](https://wordpress.org/support/users/2ladd/),
 * in the classic mode you need to utilize the amp_post_template_css action of the
   AMP plugin. You can read more about this here: [https://amp-wp.org/documentation/how-the-plugin-works/classic-templates/](https://amp-wp.org/documentation/how-the-plugin-works/classic-templates/).
   You should put the code in your child theme’s functions.php. The sample code 
   is below:
 *     ```
       add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
   
       function xyz_amp_my_additional_css_styles( $amp_template ) {
         // only CSS here please...
         ?>
         /* Results widget stars */
         .rmp-amp-star::before {
           content: "★";
           font-size: 26px;
           color: #ccc;
           margin: -2px;
         }
   
         .rmp-amp-star-highlighted::before {
           color: #FF912C;
         }
   
         .rmp-amp-stars, .rmp-amp-average, .rmp-amp-votes {
           display: inline-block;
         }
   
         /* Text-align center in rating widget */
         .rmp-amp-rating-widget {
           text-align: center;
         }
   
         /* Bottom margin on title */
         #rmp-amp-rating-widget-title {
           margin-bottom: 10px;
         }
   
         /* These two inputs should not be displayed */
         #rmp-amp-action, #rmp-amp-post-id {
           display: none;
         }
   
         /* Center the stars */
         .rmp-amp-centered-fieldset {
           margin-left: auto;
           margin-right: auto;
           max-width: 200px;
         }
   
         .rmp-amp-rating {
           --star-size: 3;  /* use CSS variables to calculate dependent dimensions later */
           padding: 0;  /* to prevent flicker when mousing over padding */
           border: none;  /* to prevent flicker when mousing over border */
           unicode-bidi: bidi-override; direction: rtl;  /* for CSS-only style change on hover */
           text-align: left;  /* revert the RTL direction */
           user-select: none;  /* disable mouse/touch selection */
           font-size: 3em;  /* fallback - IE doesn't support CSS variables */
           font-size: calc(var(--star-size) * 1em);  /* because <code>var(--star-size)em</code> would be too good to be true */
           cursor: pointer;
           /* disable touch feedback on cursor: pointer - http://stackoverflow.com/q/25704650/1269037 */
           -webkit-tap-highlight-color: rgba(0,0,0,0);
           -webkit-tap-highlight-color: transparent;
           margin-bottom: 16px;
         }
         /* the stars */
         .rmp-amp-rating > label {
           display: inline-block;
           position: relative;
           width: 1.1em;  /* magic number to overlap the radio buttons on top of the stars */
           width: calc(var(--star-size) / 3 * 1.1em);
         }
         .rmp-amp-rating > *:hover,
         .rmp-amp-rating > *:hover ~ label,
         .rmp-amp-rating:not(:hover) > input:checked ~ label {
           color: transparent;  /* reveal the contour/white star from the HTML markup */
           cursor: inherit;  /* avoid a cursor transition from arrow/pointer to text selection */
         }
         .rmp-amp-rating > *:hover:before,
         .rmp-amp-rating > *:hover ~ label:before,
         .rmp-amp-rating:not(:hover) > input:checked ~ label:before {
           content: "★";
           position: absolute;
           left: 0;
           color: gold;
         }
         .rmp-amp-rating > input {
           position: relative;
           transform: scale(3);  /* make the radio buttons big; they don't inherit font-size */
           transform: scale(var(--star-size));
           /* the magic numbers below correlate with the font-size */
           top: -0.5em;  /* margin-top doesn't work */
           top: calc(var(--star-size) / 6 * -1em);
           margin-left: -2.5em;  /* overlap the radio buttons exactly under the stars */
           margin-left: calc(var(--star-size) / 6 * -5em);
           z-index: 2;  /* bring the button above the stars so it captures touches/clicks */
           opacity: 0;  /* comment to see where the radio buttons are */
           font-size: initial; /* reset to default */
         }
         form.amp-form-submit-error [submit-error] {
           color: red;
         }
         <?php
       }
       ```
   
 * You might have to adjust the css to fit your website.
 * Blaz
 *  Thread Starter [ayberkk](https://wordpress.org/support/users/2ladd/)
 * (@2ladd)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/amp-css/#post-11449847)
 * Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘AMP & CSS’ is closed to new replies.

 * ![](https://ps.w.org/rate-my-post/assets/icon-128x128.png?rev=2045796)
 * [Rate My Post - Star Rating Plugin by FeedbackWP](https://wordpress.org/plugins/rate-my-post/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/rate-my-post/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/rate-my-post/)
 * [Active Topics](https://wordpress.org/support/plugin/rate-my-post/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/rate-my-post/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/rate-my-post/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 2 replies
 * 2 participants
 * Last reply from: [ayberkk](https://wordpress.org/support/users/2ladd/)
 * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/amp-css/#post-11449847)
 * Status: resolved