Change css files for a custom theme

Share your advanced knowledge/code with the community.
User avatar
T4r4ntul4
Posts: 132
Joined: Wed May 21, 2014 1:57 pm
Location: Netherlands
Contact:

Change css files for a custom theme

Post by T4r4ntul4 »

Hey all,

Small tutorial on how to edit a custom theme for your webapp.

This is how i did it, maybe there are better solutions, but this worked for me.
Its important to have at least 2 monitors. And before you begin editing always make a backup.
My main browser is Mozilla firefox (I dont know if this method can be used in other browsers).

These are the steps i did:
- Just make your GUI in your app with all the necessary gadgets
- Compile the app with F5
- Press ctrl+shift+C to open the inspector in the browser
- Rightclick with your mouse on the top node, and select 'expand all'
- In the inspector move your mouse over the code, if it goes well you see blue highlights
- Those blue highlights are aswell in your webapp at the same time
- If you click on a node, you see its css on the right side of screen
- You can edit the style properties, if you change anything it will be realtime changed
- Do this for all the gadgets you want to change
- Warning: Dont close your browser, nothing is saved yet

From here on there are maybe better solutions, but i did the following:
- I wrote down all the css styles i did change
- And manually searched and edited them in the corresponding css files
- If you dont see your changes, press shift and click on the browser reload icon.

I needed to change 3 css files:
- /spiderbasic/libraries/javascript/themes/flat/window.css (window background color and font color)
- /spiderbasic/libraries/javascript/dojo/dgrid/css/dgrid.css (listicon gadget)
- /spiderbasic/libraries/javascript/dojo/themes/flat/flat.css (rest of the gadgets)

If you edit those css files, and select create app, and select 'copy spiderbasic libraries' then it will be exported with your webapp.

If someone has better options to do things, please share.