“Magic” CSS classes with special meaning

Some CSS selectors on the web site are “magic” – in other words, they mean something specific to a stylesheet or script.

You can get the functionality described below by simply using the appropriate CSS. For example, if you want a link to open a streaming popup for KRNN, just make a link with the class .krnn-listen-popup, like this:

 <a class="krnn-listen-popup">Listen to KRNN</a>

To embed “now playing” information below it, just add a container with the .krnn-now-playing class, like this:

 <div class="krnn-now-playing"></div>

Here is the full list of CSS selectors that will do “magical” things:

Specially styled ads
- PSA style ads – Ads (especially for use on the home page) can have a similar style to our normal posts. These should only be used for internal ads with at least as much general interest as a news item, such as launching a new program or podcast. Enter this class in the “Container Classes” field when creating an ad
  - ```
  .psa-style
```
- No style – removes (almost) all styles for text/HTML ads. Useful when you want to style your own ad.
  - ```
  .no-style
```
Streaming popups – when links with these styles are clicked, a live streaming window for the corresponding station pops up. Implemented in plugins/ktoo-streaming-helper/ktoo-streaming.js (where the popup URLs can also be defined).
- ```
.ktoo-listen-popup a, a.ktoo-listen-popup
```
- ```
.krnn-listen-popup a, a.krnn-listen-popup
```
- ```
.kxll-listen-popup a, a.kxll-listen-popup
```
Now Playing AJAX embed – adds “now playing” information (from the appropriate station) to the end of the container with these classes. “Now playing” information is from the NPR Composer API. Implemented in plugins/ktoo-streaming-helper/ktoo-streaming.js.
- ```
.ktoo-now-playing-embed
```
- ```
.krnn-now-playing-embed
```
- ```
.kxll-now-playing-embed
```
Left-aligned secondary menu – Does two things to menu items with this class in the secondary/upper menu: left-aligns them and hides them on smaller screens. Implemented in the KTOO theme style.css.
- ```
.left-menu
```
- Use this class up by adding it to the appropriate menu item under Appearance > Menus > Upper Menu using the “CSS Classes” field for the menu item (turn it on in “Screen Options” in the upper right if it isn’t turned on by default).
- For reference, the actual selectors targeted in styles.css:
  - ```
  #header-secondary-outer .sf-menu .left-menu
```
- ```
#header-secondary-outer nav > ul > li.left-menu
```
Social icons in secondary menu – groups social icons in a horizontal row. Implemented in the KTOO theme style.css.
- Parent menu item: groups children in a row instead of a sub-menu. Text of this menu item will be hidden (unless the KTOO theme is not activated, in which case it will show up as a normal menu parent item).
  - ```
  .menu-social-links
```
- Each menu item under the parent menu item. Text of these menu items will be hidden (unless the KTOO theme is not activated, in which case they will show up as a normal menu item).
  - ```
  .social-icon
```
- Specific social icons (in addition to the .social-icon class above):
  - ```
  .icon-twitter
```
  - ```
  .icon-facebook
```
  - ```
  .icon-youtube
```
  - ```
  .icon-instagram
```
- Mobile-only links in the sidebar menu – hides links in the sidebar (or “off canvas menu”) from desktops (by checking the size of the browser window).
  - ```
  mobile-only
```