[ckan-dev] Changing themes/background image

[John Martin]

Hullo Aaron,

Let me clarify a couple of things. There are basically several ways you can change your CSS for a CKAN instance:
Sysadmin config - within your CKAN instances sysadmin panel there is a Custom CSS field. If you are simply trying to change one or two display things on your instance this is the simplest way to do it. So for example adding: `.hero { background: red; }` would replace the homepage squares with a red background. I do not recommend doing this if you planning on customizing it beyond one or two things.
Customizing the default CSS - this is the method you are referring to already. I've added instructions on how to do this [1]. This is recommended if you are want to change a few default theme colours, fonts, backgrounds, etc.
Create a custom extension - this is more in depth but best way of customising your CKAN instance. It's also the most supported and documented [2]


[1]
> What directory should the custom CSS/LESS be located?
>  

The file you need to edit is `ckan/public/base/less/custom.less`


> How is the custom style applied to the entire site?
Once you've added your CSS tweaks you'll need to run `./bin/less` (or `./bin/less --production` if you are debug == false). To understand the reasons why you need to run `./bin/less` (and to install the dependancies) it's recommended you read our front end documentation [3]


> What is the syntax for setting the background image in the custom style, is it the same as homepage.less?
The element you'll want to target is `.hero` and you'll need to change the `background-image` on it. For example: `body .hero { background-image: url("http://placekitten.com/300/300"); }` would give you a wonderful repeating cat background. The MDN docs on the `background-image` attribute [4] are a good start if you wan't to understand more.


> Do changes in the custom style sheet override homepage.less?
If you follow the steps above: yes.



[2] http://docs.ckan.org/en/ckan-2.0/theming.html
[3] http://docs.ckan.org/en/ckan-2.0/frontend-development.html
[4] https://developer.mozilla.org/en-US/docs/Web/CSS/background-image


Hope this helps.   

--
John Martin
Front End Developer, CKAN · skype: johnamartin
The Open Knowledge Foundation
Empowering through Open Knowledge
http://okfn.org/ · @okfn (http://twitter.com/okfn)


On Wednesday, 7 August 2013 at 05:38, Aaron McGlinchy wrote:

> Hi, previous advice on changing the background image pointed to using custom.less.
>   
> Following on from that we have some more questions:
> What directory should the custom CSS/LESS be located?
> How is the custom style applied to the entire site?
> What is the syntax for setting the background image in the custom style, is it the same as homepage.less?
> Do changes in the custom style sheet override homepage.less?
>  
> Thanks
> Aaron
>   
>  
>  
>  
> Please consider the environment before printing this email
> Warning: This electronic message together with any attachments is confidential. If you receive it in error: (i) you must not read, use, disclose, copy or retain it; (ii) please contact the sender immediately by reply email and then delete the emails.
> The views expressed in this email may not be those of Landcare Research New Zealand Limited. http://www.landcareresearch.co.nz
> _______________________________________________
> ckan-dev mailing list
> ckan-dev at lists.okfn.org (mailto:ckan-dev at lists.okfn.org)
> http://lists.okfn.org/mailman/listinfo/ckan-dev
> Unsubscribe: http://lists.okfn.org/mailman/options/ckan-dev
>  
>  


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.okfn.org/pipermail/ckan-dev/attachments/20130807/87b0d52c/attachment-0001.html>