Look and Feel CSS config

[susanszkyp]

Hi everyone,

Does anyone know how the custom uploaded CSS file should look in order for changes to take effect? I tried redefining a few colors based on the source CSS and inspect, but when I upload the file, nothing changes.

Example change (no effect):

table.reservations td.resdate {
	background-color: #185299;
}

Thanks!

[Mohamedhazeem]

If the original CSS rules are more specific than yours, they might override your changes. Try increasing specificity by adding more qualifiers to your selector.

table.reservations td.resdate {
    background-color: #185299 !important;
}

Make sure your custom CSS file is being loaded after the source CSS file. If the source file is loaded after your custom file, it may overwrite your styles. Sometimes browsers cache CSS files. Try clearing the browser cache or using the "hard refresh" option. Inspect the page and check if there are any errors in the console (F12). Sometimes, if there’s an issue with how the CSS file is referenced, it may not load at all.

By the way, if you're looking for a more interactive way to apply CSS changes, you might want to try TweakSync. It allows you to make real-time CSS changes in Chrome and instantly sync them back to your codebase in VS Code. This could help avoid those tricky CSS problems by letting you see the changes live. You can check it out on the Chrome Web Store and VS Code Marketplace.

[susanszkyp]

Thanks! This was really helpful. I managed to make most of the changes take effect.