The examples above demonstrate how to customize the Campus Directory Pro WordPress plugin on a single page by applying targeted CSS rules to its HTML structure. The plugin outputs structured markup for person profiles using nested
elements with specific classes (such as .ent-person-type, .tax-person-title, .tax-person-department, .ent-person-phone, and .ent-person-email).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="srcontent emdbox"> | |
| <div class="segment-block ent-person-type"> | |
| <div class="segtitle"></div> | |
| <div class="segvalue">Faculty</div> | |
| </div> | |
| <div class="segment-block tax-person-title"> | |
| <div class="segtitle"></div> | |
| <div class="segvalue"> | |
| <a href="https://campusdirpro.emdplugins.com/person_title/emeritus" rel="tag">Emeritus</a> | |
| <a href="https://campusdirpro.emdplugins.com/person_title/epoch-foundation-professor-of-international-management" rel="tag">Epoch Foundation Professor of International Management</a> | |
| </div> | |
| </div> | |
| <div class="segment-block tax-person-department"> | |
| <div class="segtitle">Department</div> | |
| <div class="segvalue"> | |
| <a href="https://campusdirpro.emdplugins.com/person_department/architecture" rel="tag">Architecture</a> | |
| </div> | |
| </div> | |
| <div class="segment-block ent-person-phone"> | |
| <div class="segtitle"></div> | |
| <div class="segvalue"> | |
| <i class="fa fa-phone fa-fw"></i> | |
| <a href="tel:718-332-6527">718-332-6527</a> | |
| </div> | |
| </div> | |
| <div class="segment-block ent-person-email"> | |
| <div class="segtitle"></div> | |
| <div class="segvalue"> | |
| <i class="fa fa-envelope fa-fw"></i> | |
| <a href="mailto:[email protected]">[email protected]</a> | |
| </div> | |
| </div> | |
| </div> |
What you can do
- Change the color and weight of role labels like Faculty.
- Style title links (e.g., Emeritus or professor titles) and add hover effects.
- Color-code departments automatically using their
data-tax-person-departmentvalue. - Style phone numbers and email links (including hover states) for better visibility.
- Add container-level styling (borders, padding, rounded corners) so each profile stands out.
Why this approach?
Applying CSS is safe and update-proof: you avoid editing the plugin core and keep all data and functionality intact while customizing the look-and-feel. Place your CSS in the page-specific stylesheet, a custom CSS box on that single page, or via your child theme so changes apply only where you want them.
Quick example (CSS snippet)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Style the whole container */ | |
| .srcontent.emdbox { | |
| border: 1px solid #ccc; | |
| padding: 12px; | |
| border-radius: 8px; | |
| width: 400px; | |
| } | |
| /* Faculty type */ | |
| .ent-person-type .segvalue { | |
| color: darkblue; | |
| font-weight: bold; | |
| } | |
| /* Titles (Emeritus, Professor, etc.) */ | |
| .tax-person-title .segvalue a { | |
| color: darkgreen; | |
| text-decoration: none; | |
| } | |
| .tax-person-title .segvalue a:hover { | |
| color: limegreen; | |
| text-decoration: underline; | |
| } | |
| /* Department */ | |
| .tax-person-department .segvalue a { | |
| color: purple; | |
| font-style: italic; | |
| } | |
| /* Phone number */ | |
| .ent-person-phone .segvalue a { | |
| color: brown; | |
| font-weight: bold; | |
| } | |
| .ent-person-phone .segvalue a:hover { | |
| color: orange; | |
| } | |
| /* Email */ | |
| .ent-person-email .segvalue a { | |
| color: darkred; | |
| } | |
| .ent-person-email .segvalue a:hover { | |
| color: crimson; | |
| font-weight: bold; | |
| } |