# Adding Custom Styles to Default Components

**URL:** <https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557>\
**Category:** Get Help\
**Tags:** question\
**Created:** [October 1, 2025, 7:47pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557 "2025-10-01T19:47:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![iliketocode2](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/iliketocode2/32/2970_2.png) [@iliketocode2](https://discourse.openondemand.org/u/iliketocode2)\
**Post date:** [October 1, 2025, 7:47pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/1 "2025-10-01T19:47:34Z")

</div>

I am relatively new to Open OnDemand and I am trying to learn the best practices for modular styling and design for pages, specifically for the form.yml.erb. I noticed in the html there are predefined divs which I am able to access manually by calling a javascript function in a form.js file. For example, for the mb-3 divs (depicted in the attached image) I could select each div with document.querySelectorAll(“.mb-3”).forEach(el =\> … and then rearrange/change those elements in whatever way I want. However, this process is very slow and doesn’t lend itself to great customizability across forms. I am wondering where I can access the .html itself that is used to build form.yml.erb pages so I can then alter the structure of the page without having to rearrange existing elements with JavaScript.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/b/b4693fbaad3d3a73ab94ee4aa9475f9498b22452.png)

Another aspect I am curious about is the best practice for styling. I have been able to style parts of the form by importing .css files but it seems as though some of the styles I attempt to apply to the default page elements (as described above) are overridden and thus not applied. Similarly, it seems like bad practice to remove default elements from the page by setting their style.display to ‘none’ rather than just removing them from the HTML. For example, if I wanted to remove the large sidebar that displays all of the available apps in a form.yml.erb file, how would I do that without using the strategy described before?

Thank you for all of your help!

---

<div class="post-metadata">

**Author:** ![jeff.ohrstrom](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jeff.ohrstrom/32/136_2.png) [@jeff.ohrstrom](https://discourse.openondemand.org/u/jeff.ohrstrom)\
**Post date:** [October 1, 2025, 8:32pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/2 "2025-10-01T20:32:15Z")

</div>

> [@iliketocode2](#):
>
> I am wondering where I can access the .html itself that is used to build form.yml.erb

I believe they’re generated programmatically through the Ruby gem `bootstrap_form`, so it may not be so easy.

> [@iliketocode2](#):
>
> having to rearrange existing elements with JavaScript.

I’m pretty sure you define the order in the `form.yml.erb`. I.e., the order they’re defined in the form section of that file is the order they’ll appear in.

> [@iliketocode2](#):
>
> For example, if I wanted to remove the large sidebar that displays all of the available apps in a form.yml.erb file

I think your best bet is to override that partial page, removing/adding what you’d like.

> **[Customizations — Open OnDemand 4.0.0 documentation](https://osc.github.io/ood-documentation/latest/customizations.html#overriding-pages)**

Here’s the partial in question:

> <https://github.com/OSC/ondemand/blob/master/apps/dashboard/app/views/batch_connect/session_contexts/new.html.erb>

Hope that helps.

---

<div class="post-metadata">

**Author:** ![iliketocode2](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/iliketocode2/32/2970_2.png) [@iliketocode2](https://discourse.openondemand.org/u/iliketocode2)\
**Post date:** [October 1, 2025, 9:53pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/3 "2025-10-01T21:53:22Z")

</div>

Thank you so much! This is very helpful – pointing me to the OOD GitHub has made it a lot clearer of how to best go about customization. Now, when I go to edit an existing partial, how can I ensure that making changes in the etc/ood/config/apps/dashboard route won’t affect other users on the cluster? My goal is to apply these form styling edits to apps in my local prod folder for now. Thanks!

---

<div class="post-metadata">

**Author:** ![jeff.ohrstrom](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jeff.ohrstrom/32/136_2.png) [@jeff.ohrstrom](https://discourse.openondemand.org/u/jeff.ohrstrom)\
**Post date:** [October 2, 2025, 1:21pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/4 "2025-10-02T13:21:33Z")

</div>

> [@iliketocode2](#):
>
> I ensure that making changes in the etc/ood/config/apps/dashboard route won’t affect other users on the cluster?

It’ll affect all users. I guess you need a 2nd test instance for staff? You may be able to apply FACLs to the file so it isn’t loaded. For example you could `chmod` it to `640` so it’s not readable by regular users then `chown root:staff` or something similar so it’s only readable by staff members in the `staff` unix group.

That said, I’ve never applied FACLs to partials so I’m not 100% sure it’d work and not error out.

---

<div class="post-metadata">

**Author:** ![iliketocode2](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/iliketocode2/32/2970_2.png) [@iliketocode2](https://discourse.openondemand.org/u/iliketocode2)\
**Post date:** [October 2, 2025, 3:21pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/5 "2025-10-02T15:21:50Z")

</div>

Thank you! Yes, I will definitely give that a shot! Before I try that out I’ve got a few questions about another possible way to go about this: Is there any configuration file that would let me point OOD to use a personal folder for partials, or is that kind of override only supported under `/etc/ood/config/apps/dashboard/views`? Would it be possible to set up something like this in the OOD architecture?

Also, I’m still getting familiar with Ruby on Rails, so I want to check my understanding of how the rendering works. From the docs:

> “Open OnDemand is built with Ruby on Rails which uses partials to build the web pages that are ultimately served to the clients. All partials are held within dashboard’s views folder. These are the default partials that get distributed when you install the package.”

Am I right in thinking that Rails reads those partials, compiles them into a full HTML page, and then passes that back to Apache (via Passenger), which serves it over HTTPS to the browser?

Finally, just to confirm: there wouldn’t be a way to build a JS file that “reroutes” OOD to use partials from a local folder, right? That override mechanism only works through Rails’ normal view lookup, not client-side JS?

Thank you so much for your continued help!

---

<div class="post-metadata">

**Author:** ![jeff.ohrstrom](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jeff.ohrstrom/32/136_2.png) [@jeff.ohrstrom](https://discourse.openondemand.org/u/jeff.ohrstrom)\
**Post date:** [October 2, 2025, 3:30pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/6 "2025-10-02T15:30:54Z")

</div>

> [@iliketocode2](#):
>
> Would it be possible to set up something like this in the OOD architecture?

Unlikely. I mean this is sort of an admin privilege to be able provide new partials. I’m not sure I’d feel comfortable opening this up further than it already is.

> [@iliketocode2](#):
>
> Am I right in thinking that Rails reads those partials, compiles them into a full HTML page, and then passes that back to Apache (via Passenger), which serves it over HTTPS to the browser?

Yes that’s right.

> [@iliketocode2](#):
>
> Finally, just to confirm: there wouldn’t be a way to build a JS file that “reroutes” OOD to use partials from a local folder, right? That override mechanism only works through Rails’ normal view lookup, not client-side JS?

No because as you seem to know, it’s all server side.

Maybe what you want is to boot the dashboard in development mode and test out changes there before promoting them to production where others can see it? It takes a bit of work to setup, but that’s how we develop OnDemand (we use a production system to boot the development app).

> **[Developing The OOD Dashboard — Open OnDemand 4.0.0 documentation](https://osc.github.io/ood-documentation/latest/tutorials/tutorials-dashboard-apps.html)**

---

<div class="post-metadata">

**Author:** ![iliketocode2](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/iliketocode2/32/2970_2.png) [@iliketocode2](https://discourse.openondemand.org/u/iliketocode2)\
**Post date:** [October 3, 2025, 9:13pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/7 "2025-10-03T21:13:25Z")

</div>

Yes, that’s actually perfect! Thank you for pointing me to the development dashboard.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/b/bae70bd0ed39a3ae769c2108155f4cb3e9da8385.png) [@system](https://discourse.openondemand.org/u/system)\
**Post date:** [April 1, 2026, 9:13pm UTC](https://discourse.openondemand.org/t/adding-custom-styles-to-default-components/4557/8 "2026-04-01T21:13:35Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.