For power users and agencies with specific brand guidelines, Bright Dashboard Pro provides dedicated fields to inject
custom CSS and HTML directly into the dashboard environment.
1. Using Custom CSS
Each dashboard tab includes a code editor for styles. This CSS is loaded only when the dashboard is being viewed.
Example: Custom Card Branding
LyogQ2hhbmdlIHRoZSBjYXJkIGJhY2tncm91bmQgYW5kIGJvcmRlciAqLwouYndkYmQtY2FyZCB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmOWY5OwogICAgYm9yZGVyLXRvcDogNHB4IHNvbGlkICM5OTVjNmY7CiAgICBib3JkZXItcmFkaXVzOiA4cHg7CiAgICBib3gtc2hhZG93OiAwIDRweCA2cHggcmdiYSgwLDAsMCwwLjA1KTsKfQoKLyogTWFrZSBoZWFkZXJzIGJvbGQgYW5kIGJyYW5kLWNvbG9yZWQgKi8KLmJ3ZGJkLWNhcmRfX3RpdGxlIHsKICAgIGNvbG9yOiAjNGE0ZjZlOwogICAgZm9udC13ZWlnaHQ6IDcwMDsKfQ==
Common Selectors
If you want to tweak the design, here are a few classes to get you started:
Global Page Elements
LmJ3ZGJkLWRhc2hib2FyZC1wYWdlIHsgLyogTWFpbiB3cmFwcGVyIGZvciB0aGUgZGFzaGJvYXJkIFVJICovIH0KLmJ3ZGJkLWRhc2hib2FyZC1wYWdlLmJ3ZGJkLWRhc2hib2FyZC1jbGllbnQgeyAvKiBNYWluIHdyYXBwZXIgZm9yIHRoZSBDbGllbnQgZGFzaGJvYXJkICovIH0KLmJ3ZGJkLWRhc2hib2FyZC1wYWdlLmJ3ZGJkLWRhc2hib2FyZC1hZG1pbiB7IC8qIE1haW4gd3JhcHBlciBmb3IgdGhlIEFkbWluIGRhc2hib2FyZCAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyIHsgLyogVG9wIGJhciBjb250YWluZXIgKi8gfQouYndkYmQtZGFzaGJvYXJkLWNvbnRlbnQgeyAvKiBNYWluIGNvbnRlbnQgYXJlYSBiZXR3ZWVuIGhlYWRlciBhbmQgZm9vdGVyICovIH0KLmJ3ZGJkLWRhc2hib2FyZC1mb290ZXIgeyAvKiBUaGUgZm9vdGVyIHNlY3Rpb24gY29udGFpbmluZyBjcmVkaXRzICovIH0=
LmJ3ZGJkLWRhc2hib2FyZC1oZWFkZXJfX2NvbHVtbi0tcHJpbWFyeSB7IC8qIExlZnQgc2lkZSBvZiBoZWFkZXIgKFRpdGxlICsgV2VsY29tZSBNZXNzYWdlKSAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyIGgxIHsgLyogVGhlIG1haW4gd2VsY29tZSB0aXRsZSAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyX19kZXNjcmlwdGlvbiB7IC8qIFRoZSBpbnRybyB0ZXh0IGJlbG93IHRoZSB0aXRsZSAqLyB9
LmJ3ZGJkLWRhc2hib2FyZC1oZWFkZXJfX2xvZ28geyAvKiBDb250YWluZXIgZm9yIHRoZSBhZ2VuY3kgbG9nbyAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyX19zdXBwb3J0LXRpdGxlIHsgLyogVGl0bGUgYXQgdGhlIHRvcCBvZiB0aGUgc3VwcG9ydCBjb2x1bW4gKi8gfQouYndkYmQtZGFzaGJvYXJkLWhlYWRlcl9fc3VwcG9ydC1kZXNjcmlwdGlvbiB7IC8qIFRleHQgYXQgdGhlIHRvcCBvZiB0aGUgc3VwcG9ydCBjb2x1bW4gKi8gfQouYndkYmQtZGFzaGJvYXJkLWhlYWRlcl9fY29udGFjdCB7IC8qIFdyYXBwZXIgZm9yIGluZGl2aWR1YWwgY29udGFjdCBsaW5lcyAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyX19jb250YWN0LS1lbWFpbCB7IC8qIFRhcmdldGluZyB0aGUgRW1haWwgbGluZSBzcGVjaWZpY2FsbHkgKi8gfQouYndkYmQtZGFzaGJvYXJkLWhlYWRlcl9fY29udGFjdC0tcGhvbmUgeyAvKiBUYXJnZXRpbmcgdGhlIFBob25lIGxpbmUgc3BlY2lmaWNhbGx5ICovIH0KLmJ3ZGJkLWRhc2hib2FyZC1oZWFkZXJfX2NvbnRhY3QtLXdlYnNpdGUgeyAvKiBUYXJnZXRpbmcgdGhlIFdlYnNpdGUgbGluZSBzcGVjaWZpY2FsbHkgKi8gfQouYndkYmQtZGFzaGJvYXJkLWhlYWRlcl9fY29udGFjdC0taG91cnMgeyAvKiBUYXJnZXRpbmcgdGhlIEhvdXJzIGxpbmUgc3BlY2lmaWNhbGx5ICovIH0=
LmJ3ZGJkLWRhc2hib2FyZC1oZWFkZXJfX2N0YS1ncm91cCB7IC8qIFdyYXBwZXIgZm9yIHN1cHBvcnQgYnV0dG9ucyAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyX19jdGEtZ3JvdXAgLmRhc2hib2FyZC1jdGEgeyAvKiBDbGFzcyBmb3IgYm90aCBidXR0b25zICovIH0KLmJ3ZGJkLWRhc2hib2FyZC1oZWFkZXJfX2N0YS1ncm91cCAuYnV0dG9uLXByaW1hcnkgeyAvKiBQcmltYXJ5IGJ1dHRvbiBjbGFzcyAqLyB9Ci5id2RiZC1kYXNoYm9hcmQtaGVhZGVyX19jdGEtZ3JvdXAgLmJ1dHRvbi1zZWNvbmRhcnkgeyAvKiBTZWNvbmRhcnkgYnV0dG9uIGNsYXNzICovIH0=
Dashboard Cards (The Grid)
LmJ3ZGJkLWNhcmRzIHsgLyogVGhlIG1haW4gZ3JpZCBjb250YWluZXIgZm9yIGFsbCBub3RlcyAqLyB9Ci5id2RiZC1jYXJkIHsgLyogVGhlIGluZGl2aWR1YWwgY2FyZCB3cmFwcGVyICovIH0KLmJ3ZGJkLWNhcmRfX3RpdGxlIHsgLyogRWFjaCBub3RlJ3MgdGl0bGUgKGgyKSAqLyB9Ci5id2RiZC1jYXJkX19jb250ZW50IHsgLyogVGhlIG1haW4gY29udGVudCBhcmVhIG9mIHRoZSBub3RlICovIH0=
LmJ3ZGJkLWNyZWRpdHMgeyAvKiBUaGUgZ3JpZCBjb250YWluZXIgZm9yIGZvb3RlciBjb250ZW50ICovIH0KLmJ3ZGJkLWNyZWRpdHNfX2xvZ28geyAvKiBDb250YWluZXIgZm9yIHRoZSBmb290ZXIgYWdlbmN5IGxvZ28gKi8gfQouYndkYmQtY3JlZGl0c19fY29udGVudCB7IC8qIENvbnRhaW5lciBmb3IgdGhlIGNyZWRpdCB0ZXh0ICovIH0KLmJ3ZGJkLWNyZWRpdHNfX2NvbnRlbnQgcCB7IC8qIFRoZSBhY3R1YWwgY3JlZGl0IHRleHQgbGluZSAqLyB9
2. Using Custom HTML
The HTML fields are perfect for adding tracking scripts, custom notification bars, or third-party widgets (like a
live chat bubble or a feedback form).
Global HTML: Injected at the bottom of both dashboards.Local HTML: Injected at the bottom of the specific dashboard.
If you use a tool like Tidio or another chat support tool, simply paste your script or iframe code into the HTML field.
PHNjcmlwdCBzcmM9Ii8vY29kZS50aWRpby5jby9YWFhYWFhYWFhYWFhYWC5qcyIgYXN5bmM+PC9zY3JpcHQ+
3. The Code Editor
The settings pages include a built-in code editor that provides:
Syntax Highlighting: Colors your code for better readability.Error Checking: Helps you spot missing brackets or typos.Keyboard Support: Use `Esc` + `Tab` to navigate out of the editor if you’re using a keyboard.
Important: While custom code is powerful, poorly written CSS or HTML can break the layout of your dashboard. Always preview your changes after saving!
Next step is to configure your access & visibility controls .
