Better documentation on the CSS changes you can make, more extensive examples, or add more GUI options to modify these elements in admin
The current CSS doco does not have many useful examples, and I personally have had to email Hudu support and request an ID on certain elements several times.
We need better examples of CSS and the sections worth updating to improve quality of life.
Better yet, add more sliders and colour pickers, check boxes etc to allow people to easily modify more of the design.
Also worth noting there is different CSS for dark mode/ light modes - so duplicate CSS can be required.
For example - these are the elements I am changing
/* =====SECTION HEADERS ===== */
.dark-portal .nasa__block-header h1 {
/* ===== QUICK NOTES ===== */
.asset-sidebar__group > header:nth-child(1) > h2:nth-child(1) {
/* ===== ONBOARDING PROCESSES ===== */
.company-summary__section-header > h2:nth-child(1) {
.cpanel__process h4 {
.cpanel__process h3 {
/* ===== SIDE MENU FOLDERS ===== */
.sidebar__title {
/* ===== Company Address and Details ===== */
.company-summary__actions h1 {
/* ===== Overview, Museum tabs at the top ===== */
.far.fa-home {
.far.fa-link {
.far.fa-university {
.far.fa-share-nodes {
/* ===== PAGE TITLE ===== */
.cpanel-name__content h1 {
/* ===== ADMIN TITLE ===== */
.admin h2 {
/* ===== ADMIN PAGE SUB HEADINGS ===== */
.admin header {
/* ===== ICONS BEFORE COMPANIES, MY VAULT PAGE TITLE ===== */
.companyindex_container .name::before {
/* ===== ICONS BEFORE GLOBAL KB TITLE ===== */
.newkb__container .name::before {
/* ===== ADMIN PAGE TITLE ===== */
.company-dashboard .name {
/* ===== COMPANIES, MY VAULT PAGE TITLE ===== */
.companyindex_container .name {
/* ===== PASSWORD PARENT ===== */
.nasapassword_parent {
/* ===== GOBAL KB PAGE TITLE ===== */
.newkb__container .name {
/* ===== GENERAL HEADER FORMATTING FOR ARTICLES ===== */
.richtextcontent h1 {
.richtextcontent h2 {
.richtextcontent h3 {
Log in to comment and vote
Comments5
Black Quasar
Oct 14, 2024
Some of the things which will help to style with CSS, followed by some interesting changes since you asked for examples:
Intelligent classes added to container objects and buttons, so we don't need to haphazardly target like
.class>div~nav>a:not([href])Populating the 'title' attribute of elements with the text, especially for buttons and list view headers.
Populating HTML for titles with the full name (sometimes very short clipped name comes from database, it's not just styled).
List view using a single table, rather than nested ones, so it's easier to target elements. Also use the same number and type of elements for the header and content rows!!
Don't put some content of a field as regular text, then have special text/element inside as well. It's hard to style/move just the text.
Apply classes to body or other appropriate element for the type of page, because then you don't need specific classes further down.
Use the same element hierarchy structure whether content is present in a container or not. I know this one impacts how your developers work directly, but having at least 2x CSS selectors just because an empty list has nav tag adjacent to another element, but populated list has it inside.. really sucks.
Use the same base element hierarchy between pages (shouldn't be hard to target the title, for every type of asset/password/article).
Making it realistic for us to apply styles to the editor, which runs in an iFrame so bypasses our CSS.
Add a class like .inmuseum to links in related items so that we can still style them to indicate museum after the default feature was removed.
Black Quasar
Oct 14, 2024
Some of the more interesting CSS changes I've made, most of which will be easier if they fix the above (incidentally these are also candidates for GUI settings). I hope they might inspire you to target more:
Hiding company "agreements."
Hiding created and updated columns in list view.
Reducing the width of expiration column in list view.
Hiding the pointless long date format expiration and showing only coloured days remaining in list view.
Making all field labels more prominent.
Adding text to colours for passwords, so they show clear meaning reducing thought and error.
Apply a maximum size and border to images, so you can follow the words without skipping due to images.
Tree view in a box, generated by unordered list with the class .tree added to it.
Customised template table formatting, because touching table borders sets everything statically.. applied with a .class, style header rows (single cell) differently compared to regular (2 columns).
Right sidebar and asset titles show full name on moreover.
Inline code tag gets a background to stand out..
Checkbox groups have this name added to them and styling to make them no longer blend in.
Field hints show 'Hint:" at the start and stand out.
Password both dropdowns taller minimum height and they expand the page (small height is their workaround so it doesn't go off screen, but bad UX).
All large text fields have taller minimum height.
Global checkbox for asset tagging fields moved to the right, styled to appear attached to drop-down.
If you want to achieve these, some need much more advanced selectors and some are not possible with a single selector, or require :has() or targeting pseudo-elements before/after for example.
Amethyst Bagel
Nov 28, 2024
Paul G. Do you have examples of the code you have used for these changes?
Black Quasar
Nov 28, 2024
Nicholas B. I do but overall CSS is hundreds of lines with comments. What are you interested in?
Black Quasar
Oct 14, 2024
I'm going to preface this comment with "Yes, I do also wish it was easier to target elements in a consistent way."
Your problem here is not the changes you can make, but rather the lack of consistency (improving over time) and lack of smart anchors, considering what we would like to style.
It's based around generic structure of generic HTML elements because the elements are created by JavaScript and Ruby by object structure, not just the content.
You can style most of Hudu using modern CSS and these changes for consistency will make it easier, where most is already possible.
Example: You can put global CSS to style differently for a single user.
Bottom line is: they need to understand their impact and add more specific classes at key locations like menu containers, different types of links.. but as it stands you can target anything on the page by improving your CSS skill, as long as it involves the element and its attributes. Only text can't be targeted.