Custom CSS foes

[skip]

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.

  .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.

  .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 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

[Sal]

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.

[skip]

Hello Sal and thanks for the reply

I tried the following:

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

.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

[Sal]

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.

[skip]

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:

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:

.tab[data-area="first-steps-widgets"],
.sidebar.optional {
    display: none;
}

Thanks a lot for your help and suggestions

P.S.
Nice easter-egg

[skip]

Just another example to hide elements in the dashboard.
Please remember that the elements are still present, but simply hidden from the view:

#app #content_permanent_Dashboard .tabs.tabs--big,
#app #content_permanent_Dashboard .column.ticket_waiting_time{
    display: none;
}