Custom CSS overridden by theme

1
I've been trying to edit the CSS by using the one I made for another app but I couldn't figure out where to place it for it to get used. I've added the code to Mendix\PROJECT\theme\styles\css\custom in custom.css but that keeps getting overridden by the theme.   So now I'm editing the same file inside the theme.zip file I downloaded but that seems like a very roundabout way of doing it.  I've tried following the video on the Mendix Youtube page: https://www.youtube.com/watch?v=7m7L7cUXgOQ and https://docs.mendix.com/howto6/setup-mendix-ui-framework-with-just-css but the video is outdated and the docs page points me to the file that changes nothing. Should I rather follow this guide: https://docs.mendix.com/howto50/setup-mendix-ui-framework   Where am I going wrong?
asked
5 answers
2

There is an explanation how to change the theme at 'https://docs.mendix.com/howto6/create-a-custom-theme-with-the-mendix-ui-framework'. Personally I use the combination of Koala and Sublime text editor for the 6.10.3 and 7.0.2 modeler and made my changes in theme/styles/ssas/custom CSS files.

The Sublime text editor allows me to search through all the files in the theme directory and gives me direct access to the found locations in the search results. You can use this functionality to see if (parts of) your CSS code is already use in both the library and custom directory. You are expected not to change things in the ssas lib directory. Copy the lib to custom files, update your changes and remove unnecessary code in the custom ssas file(s).

After the necessary changes, I start a recompile command by Koala for the ssas custom CSS files. Koala automatically performs a CSS error checking, if so it points me to the file and location of the error.

Be aware that Mendix not always detects small CSS changes, so personally I clean the deployment directory before giving a (locally) run to be sure that all CSS changes are processed.

With the above approach should it possible to make your CSS modifications, good luck.

Added comment:

The described method works only for the Mendix User Interface (UI). For example, to change something using CSS in a bootstrap widget, you must do the adjustment in the widget and re-compile the widget. The widget and the Mendix UI are totally separated CSS environments.

 

answered
1

You should follow the documentation on https://docs.mendix.com/howto50/setup-mendix-ui-framework. The when you're making changes in the css they get overwritten when the sass gets compiled to css during deployment.

You can use tools like Koala (I'm using that one) or Scout like explained in the documentation. This will make sure that the changes you're making in the sass files will be compiled to css immediately and your changes won't get overwritten on deploy. So only make changes in the the sass/custom folder and make sure you have a sass compiler.

answered
1

Jim, besides the suggestions you've gotten already regarding using a SASS compiler, the root of your issue is that you have a theme selected under Project -> Settings -> Runtime -> Theme. Any theme selected there relates to a zip file in your theme directory. So, if you have a theme selected, the runtime will unpack the zip file every time you start the app and use that.

If you select (Default) as your theme, Mendix instead reverts to the non-zipped files in your theme folder. So, I think you'll want to do 2 things:

  • Change your theme setting back to (Default). Just doing this will let you see your changes to custom.css persist
  • Set up your SASS compiler and make your styling changes to the .scss files instead
answered
0

You shouldn't have to edit the CSS file that's in the theme package, the custom.css should be way to go as far as I know. I haven't done much with CSS though, so forgive me if it's not 100% correct :P

You can check out the index.html file in the theme folder and check which CSS files are being included (and in which order). It's possible that you defined styling to the same class, but because the theme's css is included after your custom.css it will "override" the same attributes (if present in the theme's css of course). A more detailed explanation can be found here:
http://stackoverflow.com/questions/2417287/two-css-files-defining-same-class

Another thing to try is simply using !important to the changes you make in the custom.css. If that works, you at least know that the custom.css file is being included and that the problem is then most likely something as described above.

I hope this helps a little, good luck!

answered
0

CSS uses inheritance. So there is a hierarchical relationship that can be overridden with the same command with the text important; behind it like color: red !important;. However as I stated before, changing a CSS command in the Ssas directory and changing a bootstrap CSS command are two different things.

Sublime Text editor allows you to do a text search in a folder including the sub folders by right click on the ssas folder. You can try to add the CSS command with the !important text after it in the custom directory. Recompile the Ssas custom directory, clean the deployment directory and rerun the Mendix program. Look if the added CSS command is added to your HTML page in the deployment page. If the command is there and still not work you need to search the solution in the bootstrap environment. Good luck with it.

answered