Business Intelligence Tools / Developers Corner

A Custom Menu Style Kickstarter (for the non-CSS savvy)

If you’re like me, you’re not really HTML or CSS savvy but you’d like a way to make your text area look a little nicer. Perhaps, you’d like to separate header information to look like categories and the information below that to have a different style. Personally, I like to make a custom menu panel on each page of my dashboard with filters, property controls, and notes relevant for the visualizations on the active page. Using a few simple CSS scripts in a the javascript editor, I can achieve the look below in a text area.

custom-menu

If you like this look, here’s the snippet of the CSS to get you started:

custom-menu-css

button – style for the dark gray boxes that are clickable links to another page

activebutton – style for the light gray boxes that indicate the active category (for the visualizations on current page)

subtitle – style for the light yellow boxes that are subcategory headers (in this case, each sub-category contains a control property drop-down menu that changes the display of the visualization)

Feel free to customize the properties of each box to the colors, font styles, and font sizes to your liking! 🙂

For those who need additional explanation on how to ‘call’ this script in your HTML editor, don’t worry that post is coming soon!

 

 

 

1 thought on “A Custom Menu Style Kickstarter (for the non-CSS savvy)

  1. Pingback: A Custom Menu Style Kickstarter Cont… |

Leave a Reply

Your email address will not be published. Required fields are marked *