# Custom CSS foes
**URL:** https://community.zammad.org/t/custom-css-foes/13555
**Category:** Technical assistance
**Created:** [February 29, 2024, 7:49am UTC](https://community.zammad.org/t/custom-css-foes/13555 "2024-02-29T07:49:17Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@skip](https://community.zammad.org/u/skip)
#### Post date: [February 29, 2024, 7:49am UTC](https://community.zammad.org/t/custom-css-foes/13555/1 "2024-02-29T07:49:17Z")
### Infos:
- Used Zammad version: 6.2.0-1709021816
- Used Zammad installation type: package
- Operating system: ubuntu 22.04
- Browser + version: Firefox 123.0 (64-bit) and Microsoft Edge for Business 122.0.2365.52 (Official build) (64-bit)
### Expected behavior:
- Add custom CSS values to `/opt/zammad/app/assets/stylesheets/custom/custom.css` like e.g.
```auto
.login {
background: #ff00ff;
}
```
and see the login page with a different background color
### Actual behavior:
- Broken CSS with both Firefox and Edge
### Steps to reproduce the behavior:
- Add custom CSS values to `/opt/zammad/app/assets/stylesheets/custom/custom.css` like e.g.
```auto
.login {
background: #ff00ff;
}
```
- Make `zammad` the owner with `chmod zammad:zammad /opt/zammad/app/assets/stylesheets/custom/custom.css`
- Precompile assets with `zammad run rake assets:precompile`
- Restart service with `systemctl restart zammad-web`
I looked at all the posts and found only these steps, but somehow I am not able to make it work.
Also reapplying the same steps as [here](https://community.zammad.org/t/hiding-some-elements-custom-css/4987/12) to hide the private/public note as the same issue:
Any hints in the right direction would be appreciated as web design is not my strongest point.
Thanks
---
### Author:  [@Sal](https://community.zammad.org/u/Sal)
#### Post date: [February 29, 2024, 8:09pm UTC](https://community.zammad.org/t/custom-css-foes/13555/2 "2024-02-29T20:09:34Z")
I’ve had issues before which required restarting Zammad. My usual steps when updating CSS (which you need to do after every update) is the following:
1. Update CSS File
2. Stop Zammad
3. zammad run rake assets:precompile
4. Start Zammad
Hopefully that helps.
---
### Author:  [@skip](https://community.zammad.org/u/skip)
#### Post date: [March 1, 2024, 7:27am UTC](https://community.zammad.org/t/custom-css-foes/13555/3 "2024-03-01T07:27:23Z")
Hello Sal and thanks for the reply
I tried the following:
```bash
systemctl stop zammad
systemctl stop zammad-web
vi /opt/zammad/app/assets/stylesheets/custom/custom.css
zammad run rake assets:precompile
systemctl start zammad
systemctl start zammad-web
```
This is the content of my custom.css
```css
.login {
background: #ff00ff;
}
```
Maybe I am writing something wrong in the CSS, since it completely borks the website
Could you share a part of your custom.css to see if it is me who is doing something wrong?
Thanks
---
### Author:  [@Sal](https://community.zammad.org/u/Sal)
#### Post date: [March 1, 2024, 8:44pm UTC](https://community.zammad.org/t/custom-css-foes/13555/4 "2024-03-01T20:44:40Z")
I don’t see anything wrong with your CSS. The only difference is I named my file own.css.
If you stop Zammad it also stops web…reverse for when you start Zammad.
My suggestion would be to look at the page that isn’t loading the CSS properly. See what is missing.
---
### Author:  [@skip](https://community.zammad.org/u/skip)
#### Post date: [March 4, 2024, 7:17am UTC](https://community.zammad.org/t/custom-css-foes/13555/5 "2024-03-04T07:17:12Z")
Thanks @Sal!
I figured it out!
First the permissions on the `custom.css` file were wrong, then I verified also the `public/assets` directory and found that all `*.css` files had the wrong permission.
This is how I fixed it:
```bash
systemctl stop zammad
vi /opt/zammad/app/assets/stylesheets/custom/custom.css
chmod 644 /opt/zammad/app/assets/stylesheets/custom/custom.css #rw-r-r
zammad run rake assets:precompile
chmod 664 -R /opt/zammad/public/assets/*.css #rw-rw-r
systemctl start zammad
```
Now the CSS is correctly read and applied!
In case anyone wonders, this is my CSS to hide the _sidebard_ (Activity Stream) and the _First Steps_ in the Dashboard area:
```auto
.tab[data-area="first-steps-widgets"],
.sidebar.optional {
display: none;
}
```
Thanks a lot for your help and suggestions
P.S.
Nice easter-egg 😁
---
### Author:  [@skip](https://community.zammad.org/u/skip)
#### Post date: [March 5, 2024, 6:45am UTC](https://community.zammad.org/t/custom-css-foes/13555/6 "2024-03-05T06:45:04Z")
Just another example to hide elements in the dashboard.
Please remember that the elements are still present, but simply hidden from the view:
```auto
#app #content_permanent_Dashboard .tabs.tabs--big,
#app #content_permanent_Dashboard .column.ticket_waiting_time{
display: none;
}
```
---
### Author:  [@system](https://community.zammad.org/u/system)
#### Post date: [March 12, 2024, 6:45am UTC](https://community.zammad.org/t/custom-css-foes/13555/7 "2024-03-12T06:45:26Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.