Editing the styles.css File
  • 23 Sep 2022
  • 1 Minute to read
  • Comment

Editing the styles.css File

  • Comment

The styles.css file lets you edit the style and layout of the Members Portal. You can use this file to override and build on top of the style we provide for the Members Portal by default.

You can access this file via Settings > Web template editor on the Admin Panel.

Don't have an admin user ready for your developers yet?

Create one on the Admin Panel or ask a space admin to create one for you.

Pro tip!

Consider using a .nx class to easily spot style elements you override.

 /* Making all buttons on the Members Portal square */

.nx .btn {   
    border-radius: 0;
}

Hiding elements using CSS

You can also use styles.css to hide specific elements on the Members Portal. Hiding elements using styles.css is a two-step process.

You first need to find the ID or data component name of the element you're trying to hide on your Members Portal by inspecting a page that contains the element.

We'll use the Maps section on the Members Portal Bookings page as an example.

image.png

Inspect your page and find the element you're trying to hide.

image.png

In this case, the id of the Map element we want to hide is "map_link".

image.png

Once you've find your element's id or data component name, you can alter it's display through the styles.css file.

All you need to do is set the element's id display property to none and save your changes.

#map_link {
    display: none;
    }

The Map section should now no longer appear on the Members Portal.

image.png


Was this article helpful?