Custom CSS per-page or per-section using data attributes


This article explains how to use data attributes in Power Pages to apply custom CSS styles to specific pages or sections. By inspecting the page using browser developer tools, you can find the data attribute called "data-sitemap-state" on the body tag, which contains information about the current page and its parent page. You can use this data attribute to target specific pages or sections with CSS selectors. The article provides examples of CSS selectors for different pages and sections. Additionally, the article includes a bonus trick on how to use CSS pseudo-elements to add Font Awesome icons to list items.


Article 14m

Login now to access my digest by 365.Training

Learn how my digest works
Features
  • Articles, blogs, podcasts, training, and videos
  • Quick read TL;DRs for each item
  • Advanced filtering to prioritize what you care about
  • Quick views to isolate what you are looking for right now
  • Save your favorite items
  • Share your favorites
  • Snooze items you want to revisit when you have more time