0
Answered

How to customise the CSS of the main pages?

Gary Shergill 10 years ago updated by Eugene Pankov (Project coordinator) 10 years ago 8
Hi all,

Loving Ajenti, works brilliantly! Thanks.
 
Had one question though about how to customise CSS and "rebuild" after.

I am running on Ubuntu 12 and the following are where I think the relevant css could be:

/usr/share/pyshared/ajenti/plugins/main/content/css
/usr/lib/pymodules/python2.7/ajenti/plugins/main/content/css

I've tried customising css (colours, images, etc) for my deployment but no changes are ever pushed into the web app. I've restarted Ajenti and even rebooted the machine to no avail.

I'm assuming there is a "build" step I am missing out? Can't find it anywhere though...

Thanks for any help/advice!

Kind Regards,

Gary Shergill
+1
Under review
Hi Gary,

I suggest that you start with source checkout of Ajenti first (instead of modifying an installed package): http://docs.ajenti.org/en/latest/dev/intro.html
Note the requirement for CoffeeScript and LESS compilers. There's actually a resource build involved, which can be done by running make.

If you want to just quickly customize looks for your deployment, it's better to create a plugin which bundles your JS/CSS. 
See the docs (updated) here: http://docs.ajenti.org/en/latest/dev/intro.html and here: http://docs.ajenti.org/en/latest/dev/resources.htm...

P.S. if you would like to fully remove "Ajenti" brand from the panel (white-label), you need to hold one of the commercial licenses.

Hi Eugene,

Thanks for the response, will be looking into this information now.

The main goal is only to change the default "orange" css on various elements to a different color.

Thank you.

Kind Regards,

Gary Shergill
+1
Here's an example CSS override for you: https://gist.github.com/Eugeny/2049b75306af4234add5
Hi Eugene,

As per http://docs.ajenti.org/en/latest/dev/resources.html I attempted to edit the css files with your suggestion but nothing changed. I also installed less and coffee-script for compiling but this doesn't appear to change anything.

I am sure I'm missing something really simple.

Going to try the plugin approach now (not ideal, but can always just call it themes).

Thanks and Kind Regards,

Gary Shergill
Hi,

So what I'm seeing is that the admin console always goes to "http://localhost:8000/agenti:static/resources.css"... to get the .css. I have no idea where this is being built.

I've created a custom plugin already and none of my classes in  a new custom.css file are being picked up.

Thank you again for any help! Regards,

Gary Shergill
+1
Have you used .m.css extension for your files? Only files with extensions marked as injected here: http://docs.ajenti.org/en/latest/dev/resources.html are combined into resources.css.
Hi Eugene,

I had tried editing custom.c.css before too but that wasn't working.

I just rolled back to the vanilla state and reinstalled and edited custom.c.css and everything worked (after the rollback in initially tried editing custom.css which didn't work, saw your reply and tried custom.c.css again and it worked).

Sorry for your time though, looks like the issue was with me, I may have accidentally broken something (possibly a permissions issue after moving folders around) but it's all working great now.

Thanks for the help and the links, they will be brilliant for future development.

Kind Regards,

Gary Shergill

edit: not sure how to mark your initial and final responses as "Answer"....