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

Tue Aug 27 11:02:17 UTC 2013

Thanks everyone who has worked on this.  Please remember that this is a paid support contract, so bill appropriately…

Plus, Sean, if I could ask you to forward on any answers to the client.  I’ll follow up tomorrow and see that they’re ok.

Thanks

Gavin

  _____  

Gavin Chait | Head of Services | Open Knowledge Foundation
 <mailto:gavin.chait at okfn.org> gavin.chait at okfn.org | M:  +44 (0) 78 9495 7090  |  <http://okfn.org/> http://okfn.org/

From: John Martin [mailto:john.martin at okfn.org] 
Sent: 27 August 2013 12:54
To: Sam Smith
Cc: Gavin Chait; Nigel Babu; ckan-support at lists.okfn.org; Sean Hammond; support at ckan.org
Subject: Re: [CKAN-support] Landcare New Zealand support query on Templates

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:

1.	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.
2.	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.
3.	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> 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> http://docs.ckan.org/en/ckan-2.0/theming.html

[3]  <http://docs.ckan.org/en/ckan-2.0/frontend-development.html> http://docs.ckan.org/en/ckan-2.0/frontend-development.html

[4]  <https://developer.mozilla.org/en-US/docs/Web/CSS/background-image> 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> 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  |   <https://twitter.com/nigelbabu> @nigelbabu

The <http://okfn.org/>  Open Knowledge Foundation

Empowering through Open Knowledge

 <http://okfn.org/> http://okfn.org/  |  <http://twitter.com/OKFN>  @okfn  |  <https://www.facebook.com/OKFNetwork>  OKF on Facebook  | <http://blog.okfn.org/>   Blog  | <http://okfn.org/about/newsletter>   Newsletter

CKAN | <http://ckan.org/>  http://ckan.org/ | <http://twitter.com/CKANproject>  @CKANproject | the world’s leading open-source data portal platform

On 23 August 2013 12:51, Gavin Chait <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 <tel:%2B44%C2%A0%280%29%C2%A078%C2%A09495%C2%A07090>  (0) 78 9495 7090 |  <https://twitter.com/GavinChait> @GavinChait

The  <http://www.google.com/url?q=http%3A%2F%2Fokfn.org%2F&sa=D&sntz=1&usg=AFQjCNG2PcKjUT2LrlbSh4JGbu1dt-bNyg> Open Knowledge Foundation

Empowering through Open Knowledge

 <http://okfn.org/> http://okfn.org/ |  <http://twitter.com/OKFN> @okfn |  <https://www.facebook.com/OKFNetwork> OKF on Facebook |  <http://blog.okfn.org/> Blog | <http://okfn.org/about/newsletter>  Newsletter

From: Aaron McGlinchy [mailto:McGlinchyA at landcareresearch.co.nz] 
Sent: 23 August 2013 03:42
To: 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
http://lists.okfn.org/mailman/listinfo/ckan-support

-- 

Sam Smith
Graphic Designer  |  skype: mintcanary  |   twitter: mintcanary

The <http://okfn.org/>  Open Knowledge Foundation

Empowering through Open Knowledge

 <http://okfn.org/> http://okfn.org/  |  <http://twitter.com/OKFN>  @okfn  |  <https://www.facebook.com/OKFNetwork>  OKF on Facebook  | <http://blog.okfn.org/>   Blog  | <http://okfn.org/about/newsletter>   Newsletter

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