Title: Adding CSS styles to PIS elements displayed through shortcode
Last modified: April 6, 2017

---

# Adding CSS styles to PIS elements displayed through shortcode

 *  Resolved [vinzen](https://wordpress.org/support/users/vinzen/)
 * (@vinzen)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-css-styles-to-pis-elements-displayed-through-shortcode/)
 * Hi Aldo,
 * I’m using the shortcode on pages to display/list the recent posts. I want to 
   apply CSS styles to the output of the shortcode. How do I create a widget ID 
   in the shortcode so the CSS styling is only applied to the shortcode output and
   not elsewhere, like the sidebar widgets. I’m able to apply CSS styling only to
   specific sidebar widgets, that works fine. Can I do the same with the shortcodes?

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

 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-css-styles-to-pis-elements-displayed-through-shortcode/#post-8999430)
 * Hi Vinzen 🙂
    welcome back!
 * You can use this technique for shortcodes in posts, for example:
 *     ```
       .post .pis-ul {
       	background-color: #ff0000;
       }
       ```
   
 * and this for shortcodes in pages:
 *     ```
       .page .pis-ul {
       	background-color: #ff0000;
       }
       ```
   
 * In other words, prepend the class `.post` or `.page` and then the class to modify,
   for example `.pis-ul` or `.pis-li` or `.pis-title`, and so on.
 * The widgets in the sidebar should remain untouched.
 * Let me know if you need more help.
 *  Thread Starter [vinzen](https://wordpress.org/support/users/vinzen/)
 * (@vinzen)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-css-styles-to-pis-elements-displayed-through-shortcode/#post-9000589)
 * Thanks so much for the prompt response, Aldo.
 * It worked like a charm. 🙂
 *  Plugin Author [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * (@aldolat)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-css-styles-to-pis-elements-displayed-through-shortcode/#post-9002604)
 * You’re very welcome! 🙂

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

The topic ‘Adding CSS styles to PIS elements displayed through shortcode’ is closed
to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/posts-in-sidebar_aed6f1.svg)
 * [Posts in Sidebar](https://wordpress.org/plugins/posts-in-sidebar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/posts-in-sidebar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/posts-in-sidebar/)
 * [Active Topics](https://wordpress.org/support/plugin/posts-in-sidebar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/posts-in-sidebar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/posts-in-sidebar/reviews/)

## Tags

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

 * 3 replies
 * 2 participants
 * Last reply from: [Aldo Latino](https://wordpress.org/support/users/aldolat/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/adding-css-styles-to-pis-elements-displayed-through-shortcode/#post-9002604)
 * Status: resolved