Documents

Dashboard CSS Customization

Alex Reservations provides a WordPress hook that allows you to inject custom CSS into the dashboard, enabling you to customize the appearance of various elements.

Implementation

Add the following code to your child theme's functions.php file:

add_action('alex-reservations-dashboard', function(){
    ?>
    <style>
        /* Your custom CSS here */
    </style>
    <?php
});

Important: Always add custom code to your child theme's functions.php file, never modify the parent theme directly. This ensures your customizations won't be lost during theme updates.

Example Usage

Here's a practical example of customizing the calendar view. Add this code to your child theme's functions.php:

add_action('alex-reservations-dashboard', function(){
    ?>
    <style>
        #month-days-wrap .bg-indigo-300 { background:orange; }
    </style>
    <?php
});

Troubleshooting

If your custom CSS is not applying:

  1. Verify you're using a properly configured child theme
  2. Check if your child theme's functions.php file is being loaded
  3. Verify the hook name is spelled correctly: alex-reservations-dashboard
  4. Check if your CSS selectors are specific enough
  5. Use browser developer tools to inspect elements and verify CSS specificity

Notes

  • The custom CSS is only injected in the Alex Reservations dashboard pages
  • Changes are applied immediately after saving your functions.php file
  • You can combine multiple CSS rules in a single hook callback
  • The hook accepts PHP code, allowing you to make your CSS dynamic based on conditions or settings