• Registered: 2015-10-30
  • Posts: 23

Topic: Add my own CSS file to customize gallery?

I have a number of changes that I make to every gallery that require editing theme.css. The thing is that after every time I edit a gallery using the builder (to add / remove an image, edit a caption, etc), I have to manually make these changes to theme.css again. I'm wondering if there's a way to put this custom css in my own css file and add that css file in with just one line somewhere (rather than adding it to theme.css). Even if I still have to add in this one line and my css file every time after using the builder, it would save me a lot of time. It will also let me more easily teach other people how to update the galleries.

It's not obvious to me what file should be loading the custom css though. I imagine it should be another line in whatever file loads theme.css. But I can't seem to find that.

  • Registered: 2015-10-30
  • Posts: 23

Re: Add my own CSS file to customize gallery?

I figured out that I can have it point to a different URL than the default for theme.css. If I could get that to work, that would do the trick. I'd love for all my galleries to point to the same theme, same version of juicebox (so I can update easily), and same button icons (which I may change later). It seems like this should be achievable using a combination of the themeUrl config option, and this:
https://www.juicebox.net/support/embedd … ore-folder

However, when I point themeUrl to a different location (in my case it's this: "../jbcore/classic/theme.css"), the navigation arrows and social media buttons don't load.

I'm testing this locally on my machine using Firefox. Is there some reason that this in particular wouldn't work locally?

  • Registered: 2015-10-30
  • Posts: 23

Re: Add my own CSS file to customize gallery?

Actually, it may be pointing to a different location for the .js file that's causing the problem. I'm having a lot of trouble tracking it down.

  • Registered: 2015-10-30
  • Posts: 23

Re: Add my own CSS file to customize gallery?

Just to be clear, I kept the jbcore folder intact and moved it up one directory. I'd like my master jbcore directory to be one level up from all the galleries.

  • Registered: 2015-10-30
  • Posts: 23

Re: Add my own CSS file to customize gallery?

I uploaded the gallery and it's working now that it's online. I don't get why, but it's working. I'd recommend adding a note to the relevant documentation that this won't work when testing offline.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Add my own CSS file to customize gallery?

First of all, there is no reason why testing locally in Firefox should not work. Your local problem may have been due to a browser caching issue. The next time you try testing locally, try clearing your browser's cache before loading your gallery's web page.

There should also be no problem having your shared 'jbcore' folder one level up from your galleries.

You can certainly put your custom CSS in an external file and load it into your gallery's web page using a <link> tag.
Other than ensuring that your CSS file is present, all you would need to add to your gallery's web page is a <link> tag in the <head> section such as:

<link href="custom.css" rel="stylesheet">

Alternatively, you could modify the 'theme.css' template file that JuiceboxBuilder-Pro uses to generate each gallery's 'theme.css' file. The modified file would then be present in all galleries created by the application.
On a Windows PC, the location of the 'theme.css' template file is:
C:\Program Files (x86)\JuiceboxBuilder-Pro\template\jbcore\classic\theme.css

I hope these notes help.

  • Registered: 2015-10-30
  • Posts: 23

Re: Add my own CSS file to customize gallery?

Thanks! That is very helpful.

I was clearing the cache while testing locally, but never got it to work until I uploaded it.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Add my own CSS file to customize gallery?

Hopefully everything will run smoothly but if you find that you run into a similar problem again, please post back and let me know.
You could maybe zip your gallery (and whatever resource files are required to replicate the file structure you use) and upload it somewhere so that I can download it and run it locally myself to try to reproduce the problem.
Thank you.