FAQ Q382: Can I customize the backend using CSS and/or Javascript?

Yes, you can. You'll need to add the following extension to your site: Embed Planyo backend on your website. This extension, once installed, allows you to specify the url of an external CSS and/or Javascript file which will be included in each backend page, also when the backend is NOT embedded on your website but you're using it on the www.planyo.com domain.

Both your custom CSS and Javascript can be customized to only make customizations on specific backend pages. You can accomplish this by detecting the current context which can be done by checking the classes of the top-level DIV element with the id = wrapper. The classes of this element include the current url, site id, user id, user type (site admin / moderator / resource admin etc.), the current device and others. Here is the listing of all classes used:

Class name	Meaning
pgn_XXXX	Current url. It's the path part of the url with all non-alphanumeric characters replaced by underscore, e.g. pgn_schedule_php for https://www.planyo.com/schedule.php
pgn_siteXXX	Current site ID, e.g. pgn_site123 for site ID = 123
pgn_moder / pgn_site_admin / pgn_res_admin / pgn_agent	Current user role
pgn_userXXX	Current user ID e.g. pgn_user123 for user ID = 123
embedded_be	Set only if the backend is embedded into an iframe on your website, otherwise this class will not be present.
dev-mob-tab / dev-desk	dev-desk is present for desktop devices, dev-mob-tab for tablets / mobile phones
pgn_sandbox	Present only in the sandbox environment

Here is a specific example. Let's say you want to hide the lock button on the reservation details page - only to the resource admins. In such case you'll need to use developer tools in your browser, check the css selector to use (in this case #lock_button) and include the specific page, e.g.:

.pgn_rental_php.pgn_res_admin #lock_button {display:none;}