[CKAN-support] Landcare New Zealand support query on Templates

Tue Aug 27 10:53:48 UTC 2013

Hullo,  

This guy sent an email to ckan-dev a while back and I sent a reply about how to edit LESS / making small CSS changes. I've pasted my original email here (as perhaps he missed it):

=============================================

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]

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

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]

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.

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.  

=============================================

Here endeth the original email. But I do take the point that it should be a little clearer in the docs how to do this exact thing...  

--
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 Friday, 23 August 2013 at 11:50, Sam Smith wrote:

> I'm not sure if the way I've been doing this is the best or should be our recommended method (something we need to establish for the docs), but I add a new stylesheet for customisations, rather than editing an existing one. Once you go down that path it is just a standard HTML/CSS job, and no knowledge of CKAN is really required.
>  
> The downside to this approach is that it adds an additional request to the server. An upside would be that it doesn't force the use of LESS on the dev.
>  
>  
> On 23 August 2013 09:00, Nigel Babu <nigel.babu at okfn.org (mailto:nigel.babu at okfn.org)> wrote:
> > Hi Gavin,
> >  
> > Pretty sure this is because we import custom.less a little too early in ckan.less. If you set something to override the background (which is "hero" class) in custom.less, it gets overridden later by the actual CSS that we provide. I think that's a bug, I'll defer to Sam or John about that.
> >  
> >  
> > Nigel Babu
> >  
> >  
> >  
> > Developer  |  @nigelbabu (https://twitter.com/nigelbabu)
> >  
> >  
> > The Open Knowledge Foundation (http://okfn.org/)
> >  
> >  
> > Empowering through Open Knowledge
> >  
> >  
> > http://okfn.org/  |  @okfn (http://twitter.com/OKFN)  |  OKF on Facebook (https://www.facebook.com/OKFNetwork)  |  Blog (http://blog.okfn.org/)  |  Newsletter (http://okfn.org/about/newsletter)
> >  
> >  
> >  
> >  
> >  
> >  
> > CKAN | http://ckan.org/ | @CKANproject (http://twitter.com/CKANproject) | the world’s leading open-source data portal platform
> >  
> >  
> >  
> > On 23 August 2013 12:51, Gavin Chait <gavin.chait at okfn.org (mailto:gavin.chait at okfn.org)> wrote:
> > > Hi all,  
> > >   
> > > The following queries are from Landcare New Zealand, a support client.  The first has, I think, insufficient detail to answer and I’ve asked them to flesh it out.
> > >   
> > > The second relates to retheming the template and would be a useful item in the docs.  Could you please review and let me know what they need to do?
> > >   
> > > ---
> > > We were trying to change the background image using the theming and changes to the CSS/LESS, but had trouble. We’ve found out how to do simple changes like that in the Config options CSS, but for future reference it would be good to get up to speed on how to start more advanced theming (we don’t actually have a desired theme we want to apply, so this would be learning which we could apply when we do.  Perhaps teaching us how to change the background via the CSS/LESS could be a training example?).
> > > ---
> > >   
> > > Much appreciated…
> > >   
> > > Gavin
> > >   
> > >  
> > > Gavin Chait
> > > Head of Services | skype: whythawk | M:  +44 (0) 78 9495 7090 (tel:%2B44%C2%A0%280%29%C2%A078%C2%A09495%C2%A07090) | @GavinChait (https://twitter.com/GavinChait)
> > > The Open Knowledge Foundation (http://www.google.com/url?q=http%3A%2F%2Fokfn.org%2F&sa=D&sntz=1&usg=AFQjCNG2PcKjUT2LrlbSh4JGbu1dt-bNyg)
> > > Empowering through Open Knowledge
> > > http://okfn.org/ | @okfn (http://twitter.com/OKFN) | OKF on Facebook (https://www.facebook.com/OKFNetwork) | Blog (http://blog.okfn.org/) | Newsletter (http://okfn.org/about/newsletter)
> > >  
> > >   
> > > From: Aaron McGlinchy [mailto:McGlinchyA at landcareresearch.co.nz]  
> > > Sent: 23 August 2013 03:42
> > > To: gavin.chait at okfn.org (mailto:gavin.chait at okfn.org)
> > > Cc: Michael Speth
> > > Subject: RE: URGENT: FW: CKAN setup/info  
> > >   
> > > Hi Gavin,
> > >             We have a first few things that we would like your help with under our support plan.
> > >   
> > > a)      We have encountered trouble getting the data preview function to work, and
> > > b)       We were trying to change the background image using the theming and changes to the CSS/LESS, but had trouble. We’ve found out how to do simple changes like that in the Config options CSS, but for future reference it would be good to get up to speed on how to start more advanced theming (we don’t actually have a desired theme we want to apply, so this would be learning which we could apply when we do.  Perhaps teaching us how to change the background via the CSS/LESS could be a training example?).
> > >   
> > > My initial thought is that rather than you guys just fixing things, we try and upskill ourselves in the process – so maybe you assessing the problem and then talking us through fixing?
> > >   
> > > I’ve cc in Michael Speth who is the technical person who is setting up CKAN for us, and who you would need to liaise with.
> > >   
> > > So, when would you be able to assist us with this, how long do you think it should take, how would you like to work it…
> > >   
> > > Thanks
> > > Aaron  
> > >  
> > >   
> > >  
> > >  
> > >  
> > > _______________________________________________
> > > CKAN-support mailing list
> > > CKAN-support at lists.okfn.org (mailto:CKAN-support at lists.okfn.org)
> > > http://lists.okfn.org/mailman/listinfo/ckan-support
> > >  
> >  
>  
>  
>  
> --  
> Sam Smith
> Graphic Designer  |  skype: mintcanary  |   twitter: mintcanary
>  
>  
> The Open Knowledge Foundation (http://okfn.org/)
>  
>  
> Empowering through Open Knowledge
>  
> http://okfn.org/  |  @okfn (http://twitter.com/OKFN)  |  OKF on Facebook (https://www.facebook.com/OKFNetwork)  |  Blog (http://blog.okfn.org/)  |  Newsletter (http://okfn.org/about/newsletter)
>  

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.okfn.org/mailman/private/ckan-support/attachments/20130827/1b841619/attachment-0003.html>